Envy Опубликовано 23 апреля, 2015 Поделиться Опубликовано 23 апреля, 2015 Привет, суть на картинке: нужно поставить червяка в бок форума, причем фиксировано, то есть при просмотре сайта и пролистывании страницы он не должен двигаться. Спасибо. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
PurpleNut Опубликовано 23 апреля, 2015 Поделиться Опубликовано 23 апреля, 2015 (изменено) В globalTemplate добавьте перед открывающим или закрывающим тегом body <div class="worm"></div> В ipb_styles.css добавьте .worm { /* Укажите путь к своей картинке */ background: url("{style_images_url}/worm.png") left top no-repeat; display: none; /* Укажите высоту фонового изображения */ height: 200px; left: 0; position: fixed; /* Укажите расстояние от верхнего края окна браузера */ top: 200px; /* Укажите ширину фонового изображения */ width: 95px; z-index: 100; } /* Фикс, когда свободного пространства по бокам становится слишком мало, прячем картинку с червяком. Ширина определяется визуально: сужайте окно браузера, пока картинка с червяком не станет "наползать" на контент на странице. Потом через Firebug или его аналог для вашего браузера можно узнать значение оной. */ @media all and (min-width: 1070px) { .worm { display: block; } } Хотя нет, неправильно, сначала впишите просто .worm { /* Укажите путь к своей картинке */ background: url("{style_images_url}/worm.png") left top no-repeat; /* Укажите высоту фонового изображения */ height: 200px; left: 0; position: fixed; /* Укажите расстояние от верхнего края окна браузера */ top: 200px; /* Укажите ширину фонового изображения */ width: 95px; z-index: 100; } в стили, а потом, когда определите ширину, при которой червяк будет наползать на контент, добавьте @media all and (min-width: 1070px) { .worm { display: block; } } а в предыдущие скобки добавьте правило display: none; таким вот образом должно всё получиться: .worm { /* Укажите путь к своей картинке */ background: url("{style_images_url}/worm.png") left top no-repeat; display: none; /* Укажите высоту фонового изображения */ height: 200px; left: 0; position: fixed; /* Укажите расстояние от верхнего края окна браузера */ top: 200px; /* Укажите ширину фонового изображения */ width: 95px; z-index: 100; } /* Фикс, когда свободного пространства по бокам становится слишком мало, прячем картинку с червяком. Ширина определяется визуально: сужайте окно браузера, пока картинка с червяком не станет "наползать" на контент на странице. Потом через Firebug или его аналог для вашего браузера можно узнать значение оной. */ @media all and (min-width: 1070px) { .worm { display: block; } } Изменено 23 апреля, 2015 пользователем PurpleNut Viktar83 и Envy 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Envy Опубликовано 23 апреля, 2015 Автор Поделиться Опубликовано 23 апреля, 2015 В globalTemplate добавьте перед открывающим или закрывающим тегом body <div class="worm"></div> В ipb_styles.css добавьте .worm { /* Укажите путь к своей картинке */ background: url("{style_images_url}/worm.png") left top no-repeat; display: none; /* Укажите высоту фонового изображения */ height: 200px; left: 0; position: fixed; /* Укажите расстояние от верхнего края окна браузера */ top: 200px; /* Укажите ширину фонового изображения */ width: 95px; z-index: 100; } /* Фикс, когда свободного пространства по бокам становится слишком мало, прячем картинку с червяком. Ширина определяется визуально: сужайте окно браузера, пока картинка с червяком не станет "наползать" на контент на странице. Потом через Firebug или его аналог для вашего браузера можно узнать значение оной. */ @media all and (min-width: 1070px) { .worm { display: block; } } Хотя нет, неправильно, сначала впишите просто .worm { /* Укажите путь к своей картинке */ background: url("{style_images_url}/worm.png") left top no-repeat; /* Укажите высоту фонового изображения */ height: 200px; left: 0; position: fixed; /* Укажите расстояние от верхнего края окна браузера */ top: 200px; /* Укажите ширину фонового изображения */ width: 95px; z-index: 100; } в стили, а потом, когда определите ширину, при которой червяк будет наползать на контент, добавьте @media all and (min-width: 1070px) { .worm { display: block; } } а в предыдущие скобки добавьте правило display: none; таким вот образом должно всё получиться: .worm { /* Укажите путь к своей картинке */ background: url("{style_images_url}/worm.png") left top no-repeat; display: none; /* Укажите высоту фонового изображения */ height: 200px; left: 0; position: fixed; /* Укажите расстояние от верхнего края окна браузера */ top: 200px; /* Укажите ширину фонового изображения */ width: 95px; z-index: 100; } /* Фикс, когда свободного пространства по бокам становится слишком мало, прячем картинку с червяком. Ширина определяется визуально: сужайте окно браузера, пока картинка с червяком не станет "наползать" на контент на странице. Потом через Firebug или его аналог для вашего браузера можно узнать значение оной. */ @media all and (min-width: 1070px) { .worm { display: block; } } Попробую и отпишу. Спасибо! Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Envy Опубликовано 23 апреля, 2015 Автор Поделиться Опубликовано 23 апреля, 2015 Попробую и отпишу. Спасибо! А как сделать, чтобы было снизу ровно по экрану, т.е чтобы лев опустился на край Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
WOLF Опубликовано 23 апреля, 2015 Поделиться Опубликовано 23 апреля, 2015 top: 200px; заменяем на bottom: 0px; P.S. я думал человек с таким опытом, должен подобные вещи знать... Envy 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Envy Опубликовано 23 апреля, 2015 Автор Поделиться Опубликовано 23 апреля, 2015 top: 200px; заменяем на bottom: 0px; P.S. я думал человек с таким опытом, должен подобные вещи знать... Спасибо, должен. Дело в том, что последний раз я трогал ipb и хтмл вообще тогда, когда последний раз заходил сюда по серьезке) ~1,5 года назад. WOLF, а как сделать этот див ссылкой не подскажешь? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
WOLF Опубликовано 23 апреля, 2015 Поделиться Опубликовано 23 апреля, 2015 див? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Envy Опубликовано 23 апреля, 2015 Автор Поделиться Опубликовано 23 апреля, 2015 WOLF, ну картинку льва Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
WOLF Опубликовано 23 апреля, 2015 Поделиться Опубликовано 23 апреля, 2015 <a href="ссылка"> <div class="worm"></div> </a> Envy 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.