Jump to content

Фиксированная картинка сбоку сайта.


 Share

Recommended Posts

Привет, суть на картинке: нужно поставить червяка в бок форума, причем фиксировано, то есть при просмотре сайта и пролистывании страницы он не должен двигаться.

post-7648-0-76856400-1429795216.png

 

Спасибо.

Link to comment
Share on other sites

В 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;
    }
}
Edited by PurpleNut
Link to comment
Share on other sites

В 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;
    }
}

Попробую и отпишу. Спасибо! :)

Link to comment
Share on other sites

Попробую и отпишу. Спасибо! :)

А как сделать, чтобы было снизу ровно по экрану, т.е чтобы лев опустился на крайpost-7648-0-02506500-1429816215.png

Link to comment
Share on other sites

top: 200px;

заменяем на 

  bottom: 0px;

P.S. я думал человек  с таким опытом, должен подобные вещи знать... 

Link to comment
Share on other sites

top: 200px;

заменяем на 

  bottom: 0px;

P.S. я думал человек  с таким опытом, должен подобные вещи знать... 

 

Спасибо, должен. Дело в том, что последний раз я трогал ipb и хтмл вообще тогда, когда последний раз заходил сюда по серьезке) ~1,5 года назад. :)

WOLF, а как сделать этот див ссылкой не подскажешь?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...