Hello all,

I have been having some trouble with my css code. I am trying to change my navigation bar so that it uses a sprite, and that actually worked fine, as I copied most of the code from an online tutorial. However, I am struggling with getting the resulting navigation bar to go where I want it to, and fit within the classes I set earlier.

Here is my code so far. I am using a list "navlist" to contain four navigation bar links (logo, goals, issues, and getinvolved)

CSS Code:

Code:
#navlist{
position:relative;
align:center;
margin:auto;
width:850px;
}
 
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, navlist a{height:106px;display:block;}
 
#logo {left:0px; top:40px; }
 
#goals{left:100px;width:166px;}
#goals{background:url('images/navbarsprite.png') 0 0;}
#goals a:hover{background: url('images/navbarsprite.png') 0 -106px;}
 
#issues{left:266px;width:166px;}
#issues{background:url('images/navbarsprite.png') -166px 0;}
#issues a:hover{background: url('images/navbarsprite.png') -166px -106px;}
 
#getinvolved{left:432px;width:200px;}
#getinvolved{background:url('images/navbarsprite.png') -332px 0;}
#getinvolved a:hover{background: url('images/navbarsprite.png') -332px -106px;}
HTML Code:

HTML Code:
<ul id="navlist">
  <li id="logo"><a href="index.html" id="logo"><img src="images/paclogosmall.png" border="0"></a></li>
  <li id="goals"><a href="goals.html"></a></li>
  <li id="issues"><a href="issues.html"></a></li>
  <li id="getinvolved"><a href="getinvolved.html"></a></li>
</ul>
Strangely, the browser did not reserve any space for my whole navigation bar. I think because of various relative positioning, it covers up some content and is partially cut off on the top of the page. Also, there are no links on the images. I'm lost as to why either of these problems exist.

Thanks so much for any thoughts. I appreciate you working with my terrible code.

Sincerely,
yortzec