Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Одмин

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

Recommended Posts

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

 

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

 

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

Share this post


Link to post
Share on other sites

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


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

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

margin-top: 35px;

Edited by Атаман
  • Upvote 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

  • Upvote 1

Share this post


Link to post
Share on other sites

К

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

#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 by wick

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...