Positioning element under another
Posted
by Cedar Jensen
on Stack Overflow
See other posts from Stack Overflow
or by Cedar Jensen
Published on 2010-03-16T21:55:20Z
Indexed on
2010/03/16
22:01 UTC
Read the original article
Hit count: 304
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?
© Stack Overflow or respective owner
