How to put an image between two UL with absolute positioning? - css

Question

In my header I have a logo with an image sprite on both sides of the image. I am trying to center them horizontally to the top of the browser. The header has to be positioned:fixed.
HTML:
<div id="headerbg">
<div id="header">
<ul id="navleft">
<li id="navhome"></li>
<li id="navnew"></li>
<li id="navbrands"></li>
</ul>
<div id="logo"></div>
<ul id="navright">
<li id="navsales"></li>
<li id="navlocation"></li>
<li id="navcontact"></li>
</ul>
</div>
</div>
CSS:
#headerbg
{
background-color: #ffffff;
width:100%;
height:50px;
z-index: 1000;
position: fixed;
top: 0;
left:0;
}
#header
{
width: 800px;
height: 100px;
margin: auto;
}
#logo
{
width:200px;
height:100px;
background:url(images/logo_small.jpg);
display:inline-block;
z-index: 2000;
}
/* NAVIGATION */
#navleft
{
position:relative;
}
#navleft li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navleft li, #navleft a
{
height:50px;
display:block;
}
#navright
{
position:relative;
}
#navright li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navright li, #navright a
{
height:50px;
display:block;
}
I left out CSS for the hover images of the sprite to shorten my post. I appreciate any help I can get. Thanks!

Answer 1

You already know the width of the header and the logo. You then knnow that each ul should have a width: 300px; and just set them all to float:left; or display:inline;
#header ul {
width:300px;
}
#header {
display:inline-block;
*display:inline; /* IE hack */
}
EDIT
You could also apply specific CSS styles for psuedo element e.g.:
#header ul:first-child {
width:300px;
position:relative;
top:0;
left:0;
}
#header ul:last-child {
width:300px;
position:relative;
right:0;
left:0;
}
I have retyped your code to fit your needds (well what I assume is your needs)
see fiddle here http://jsfiddle.net/aLQYS/
And for the future, I will recommend you to use classes instead of Id's. Not only you save the ID tag for something more important such as javascript, but you also have the possibility of reusing your css styles by adding multiple classes to one object e.g.
CSS
.shadow {
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.box {
width:200px;
height:200px;
}
HTML
<div class="shadow box"></div>