Note that there are some explanatory texts on larger screens.

plurals
  1. POI need some help aligning my nav bar in css
    text
    copied!<p>I'm fairly new to web design but understand it quite well. Just, when there's math involved, I get lost completely O.O. Pretty much what I did for the navigation bar is that I created a sprite and am now using the two different halves of the sprite to be able to create the effect of the link being hovered over. Oh and there's hyperlinks involved btw also which i blocked out with the span tag so yeah. So if somebody could please help me out here's my bands page <a href="http://atfamusic.hostei.com/#" rel="nofollow">http://atfamusic.hostei.com/#</a> (works best in firefox idky still gotta fix that) there isn't really much on it so yeah. the code is (for css)</p> <pre><code>#navigation { margin:0; padding:0; width:900px; height:50px; background-image:url(navigation-background.gif); } #navigation li { margin:0; padding:0; list-style-type:none; display:inline; height:44px; text-align:center; float:left; line-height:40px; } #navigation a { display:block; height:44px; } #navigation a:hover { background-image:url(navigation-background.gif); } #nav-bio {width:81px; } #nav-bio a:hover { background-position:85px bottom; } #nav-photos { width:116px; } #nav-photos a:hover { background-position:-166px bottom ; } #nav-music { width:102px; } #nav-music a:hover { background-position:-197px bottom ; } #nav-videos { width:108px; } #nav-videos a:hover { background-position:-278px bottom; } #nav-external sites { width:202px; } #nav-external sites a:hover { background-position:-556px bottom; } #nav-merch { width:120px; } #nav-merch a:hover { background-position:-1112px bottom; } #navigation span { display:none; } </code></pre> <p>So yeah plz help. Oh, and if anyone could figure out why the header isn't aligning in internet explorer that'd be great!!! :)</p> <p>P.S. If willing to do extra center the navigation bar as well \m/ that'd be awesome. sorry if I suck and am a newbie :P</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload