Мне нужно что-то сделать, как показано ниже.
До сих пор мне удалось сделать это как http://jsfiddle.net/GDDA5/1006/, но я не могу добавить другой цвет на каждой стороне панели навигации и панели изображений, как показано в примере. Я не уверен, как это сделать.
Помощь в этом отношении приветствуется.
образец кода
<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>
Здесь изменен jsfiddle для вас, с обеих сторон #navbar
имеет 2 div #leftNav
и #rightNav
с черным и красным фоном-цветом JSFIDDLE
второй способ заключается в использовании: до: после чего я не рекомендую, потому что IE8 имеет проблемы с: перед псевдоэлементом
РЕДАКТИРОВАТЬ:
Я думал об IE7, а не о IE8, где он работает, просто нужно объявить <!DOCTYPE>
.
Сделано: 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%;
}
Добавьте это в свой 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%;
}