Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Одмин

Прокрутка черной полосы

Рекомендованные сообщения

Здравствуйте!

 

У меня вот такой вопрос к знатокам по дизайну. Обратите внимание, на форуме http://forums.ibresource.ru в самом верху прокручивается вверх-вниз черная полоска, на которой размещены кнопки "Вход" и "Регистрация". То есть, в любом положении эти кнопки видны. Вот подскажите как реализизовать такую возможность на IPB 3.2.3, чтобы верхний блок с черной полоской и ссылками на ней всегда находился в верхней части форума, как на форуме ИБР?

 

P.S. Там у них глухо на форуме, поэтому там вопрос не задаю... :)

Поделиться сообщением


Ссылка на сообщение
03/11/15 14:23 (изменено)

Дописать в #header_bar {


position: fixed;
width: 100%;
top: 0px;
z-index: 9999;

Дописать в #branding {

margin-top: 35px;

Изменено пользователем Атаман
  • Upvote 2

Поделиться сообщением


Ссылка на сообщение

@Атаман, сделал всё, как Вы сказали, но не получилось на 3.2.3. Может что-то забыли?

Поделиться сообщением


Ссылка на сообщение

Извиняюсь! Все получилось, просто кэш не сразу обновил...

Поделиться сообщением


Ссылка на сообщение

Только остался один вопрос - можно ли черную полоску сделать прозрачной как на ИБРе? Спасибо.

Поделиться сообщением


Ссылка на сообщение

Разобрался: opacity

Поделиться сообщением


Ссылка на сообщение

Разобрался: opacity

как указать opacity и где? Полоску закрепил, но прозрачность не понял где ставить и как

Поделиться сообщением


Ссылка на сообщение

К

 

#header_bar {

 

background: rgba(0, 0, 0, 0.8);

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

opacity: 0.5; не стоит добавлять, весь header будет прозрачный, включая кнопки.

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

К

 

#header_bar {

 

background: rgba(0, 0, 0, 0.8);

Спасибо сделал так:

 

#header_bar {
background: #323232 url({style_images_url}/user_navigation.png ) repeat-x bottom;
padding: 0;
text-align: right;
           position: fixed;
           width: 100%;
           top: 0px;
           z-index: 9999;
           opacity:0.9;
}

Поделиться сообщением


Ссылка на сообщение

Ну смотрите сами, чтоб не были прозрачные, лучше использовать другой вариант

Поделиться сообщением


Ссылка на сообщение

opacity: 0.5; не стоит добавлять, весь header будет прозрачный, включая кнопки.

Понял )) Спасибо!

Поделиться сообщением


Ссылка на сообщение
03/11/15 18:53 (изменено)

Вылезла вот какая беда )) теперь после закрепления полоски этой, всё сместилось вниз немного и теперь при наведении на имена пользователей в онлайне, всплывающая информация не показывается, так как она уехала вниз )

#header_bar {
background: rgba(0, 0, 0, 0.8); url({style_images_url}/user_navigation.png ) repeat-x bottom;
padding: 0;
text-align: right;
           position: fixed;
           width: 100%;
           top: 0px;
           z-index: 9999;

}

 

#branding {
background: transparent;
min-height: 70px;

padding: 15px 0 0 0;
color: #bec9d5;
position:relative;
           margin-top: 50px;
}

Изменено пользователем wick

Поделиться сообщением


Ссылка на сообщение

@Атаман, скажите, а в чем принципиальная разница между opacity: 0.8 и background: rgba(0, 0, 0, 0.8) ?

Поделиться сообщением


Ссылка на сообщение
03/11/15 19:19 (изменено)

@Атаман, скажите, а в чем принципиальная разница между opacity: 0.8 и background: rgba(0, 0, 0, 0.8) ?

Осмелюсь ответить:

в первом случае прозрачность действует на все элементы, вложенные в этот слой

во втором прозрачность применяется только к фону данного слоя

 

-----

 

Вылезла вот какая беда )) теперь после закрепления полоски этой, всё сместилось вниз немного и теперь при наведении на имена пользователей в онлайне, всплывающая информация не показывается, так как она уехала вниз )

Не совсем понял, но догадываюсь: сместилась "всплывающая карточка пользователя" относительно имени, на которое наводиться мышка?

 

если да, то можно попробовать вместо margin задать отступ при помощи padding:

 

#branding {
   background: transparent;
   min-height: 70px;

   padding: 65px 0 0 0;

   color: #bec9d5;
   position:relative;
}

Изменено пользователем Viktar83
  • Upvote 2

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...