Я не опытный веб-разработчик, поэтому, пожалуйста, потерпите меня здесь.
Я хотел бы отобразить заголовок стиля баннера для страницы, верхняя часть которой занята изображением 275x116, а затем горизонтальная строка меню (стилизованная с использованием элементов ul), отображающаяся на 70% от верхней части баннера.
Как бы я настроил это так, чтобы баннер отображался под моей навигацией? В настоящее время часть левой части моей строки меню находится под изображением, но я бы хотел, чтобы она была противоположной, поэтому строка меню находится над изображением, что-то вроде этого:
============= <start of header> ===========
--------
| img |
| |
| Horizontal menu
| |
--------
============= <end of header> ===========
Мой css:
#header
{
background-color: green;
border: 0;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 120px;
}
#logo
{
background: green url(images/logo.png) no-repeat scroll 0 0;
margin: 0px 0px;
border: 1px solid white;
left: 20px;
top: 20px;
width: 275px;
height: 116px;
position: absolute;
z-index: -1000;
}
.container {
border:1px solid grey;
margin-left:auto;
margin-right:auto;
width:960px;
}
Мой HTML:
<body>
<div id="header">
<div id="logo">
</div>
<div class="container" id="primaryNavbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Movies</a></li>
</ul>
<div class="clear"> </div>
</div> <!-- end of container -->
</div> <!-- end of header -->
</body>
Я думал, что установив положение «абсолютное» для элемента логотипа и добавив очень низкий z-индекс, можно добиться этого, но это не так.
Есть предложения?