Positioning element under another
- by Cedar Jensen
I am not an expert web-dev so please bear with me here.
I would like to display a banner style header for a page with the top part taken up by an image that is 275x116 and then a horizontal menu bar (styled using ul items) appearing at 70% from the top of the banner.
How would I set this up so that the banner appears underneath my navigation? Currently, a portion of the left side of my menu bar sits underneath the image but I'd like it to be the opposite so the menu bar is above the image, some thing like this:
============= <start of header> ===========
--------
| img |
| |
| Horizontal menu
| |
--------
============= <end of header> ===========
My 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;
}
My 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>
I thought that setting the position to "absolute" for the logo element and adding in a very low z-index would achieve this but that isn't the case here.
Any suggestions?
