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

 

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

 

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

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

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

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

margin-top: 35px;

Edited March 11, 201511 yr by Атаман

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

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

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

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

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

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

К

 

#header_bar {

 

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

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

К

 

#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 будет прозрачный, включая кнопки.

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

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

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

Edited March 11, 201511 yr by wick

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

@Атаман, скажите, а в чем принципиальная разница между 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;
}

Edited March 11, 201511 yr by Viktar83

@Viktar83, согласен, разница очевидна. Сразу не заметил такой тонкости, спасибо! :D