Горизонтальная полоса на странице с разными цветами на каждой стороне

0

Мне нужно что-то сделать, как показано ниже.

До сих пор мне удалось сделать это как http://jsfiddle.net/GDDA5/1006/, но я не могу добавить другой цвет на каждой стороне панели навигации и панели изображений, как показано в примере. Я не уверен, как это сделать.

Помощь в этом отношении приветствуется.

Изображение 174551

образец кода

<div id="BannerBar"></div>
<div id="navBar"></div>
<div id="TopImageBar"></div>
<div id="imageBar"></div>
<div id="contentWrapper">
    <div id="logowrapper">LOGO</div>
    <div id="NavigationWrapper">Home | About Us | News | Something</div>
    <div id="TopImageWrapper">IMAGE HERE </div>
</div>
<div id="footerBar"></div>
  • 0
    может быть, использовать до и после этого бара или внутри 2 делителей (что проще и поддерживается не так, как bfeore на IE8?
Теги:

3 ответа

1
Лучший ответ

Здесь изменен jsfiddle для вас, с обеих сторон #navbar имеет 2 div #leftNav и #rightNav с черным и красным фоном-цветом JSFIDDLE

второй способ заключается в использовании: до: после чего я не рекомендую, потому что IE8 имеет проблемы с: перед псевдоэлементом

РЕДАКТИРОВАТЬ:

Я думал об IE7, а не о IE8, где он работает, просто нужно объявить <!DOCTYPE>.

Поделиться
  • 0
    Я думаю, что это должно работать в IE 8 также ... Выглядит хорошо для меня jsfiddle.net/qVtt5/1
  • 0
    Это по воле, потому что вы использовали мой путь: до и после должно работать с объявленным <! DOCTYPE>. Но в любом случае я чувствую себя более уверенно на своем пути. На самом деле это зависит от вас, каким образом вы используете.
Показать ещё 4 комментария
1

Сделано: http://jsfiddle.net/GDDA5/1014/

Вы можете обновлять цвета слева и справа.

.TopImageBar
{
    height: 80px;
    background: blue;
    margin-top:90px;
    width:50%; 
    float: left;
    position: absolute;
}

.TopImageBar.Right {
     background: red;
     right: 0%;
}
Поделиться
1

Добавьте это в свой CSS:

#navBar:before {
    content: '';
    position: absolute;
    background: gray;
    height: 100%;
    right: 0;
    width: 50%;
}

#TopImageBar:before {
    background: gray;
    content: '';
    height: 100%;
    position: absolute;
    width: 50%;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню