I need some help aligning my nav bar in css

Question

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 http://atfamusic.hostei.com/# (works best in firefox idky still gotta fix that) there isn't really much on it so yeah. the code is (for css)

#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; }

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.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

Answer 1

Hi @xripper the following HTML and CSS will fix your nav issues. I removed the tags from the ul li a as they are not necessary, I instead indented the text using css which means the a's will still be accessible to screen readers etc.

<ul id="navigation">
    <li id="nav-bio"><a href="#">Bio</a></li>

    <li id="nav-photos"><a href="#">Photos</a></li>

    <li id="nav-music"><a href="#">Music</a></li>

    <li id="nav-videos"><a href="#">Videos</a></li>

    <li id="nav-externalsites"><a href="#">External Sites</a></li>

    <li id="nav-merch"><a href="#">Merch</a></li>
</ul>

and the following css will fix your sprites on the nav

ul#navigation {
    margin: 0 auto;
    padding: 0;
    width: 900px;
    height: 50px;
    background-image: url(navigation-background.gif);
    }

    ul#navigation li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: inline;
        height: 50px;
        text-align: center;
        float: left;
        line-height: 40px;
        position: relative;
        }

        ul#navigation li a {
            display: block;
            height: 50px;
            text-indent: -999em;
            }

        ul#navigation li a:hover {
            background: url(navigation-background.gif) bottom left no-repeat;
            }

    ul#navigation li#nav-bio {
        width: 81px;
        margin-left: 84px;
        }

        ul#navigation li#nav-bio a:hover {
            background-position: -84px bottom;
            }

    ul#navigation li#nav-photos {
        width: 116px;
        }

        ul#navigation li#nav-photos a:hover {
            background-position: -165px bottom;
            }

    ul#navigation li#nav-music {
        width: 102px;
        }

        ul#navigation li#nav-music a:hover {
            background-position: -281px bottom;
            }

    ul#navigation li#nav-videos {
        width: 108px;
        }

        ul#navigation li#nav-videos a:hover {
            background-position: -383px bottom;
            }

    ul#navigation li#nav-externalsites {
        width: 202px;
        }

        ul#navigation li#nav-externalsites a:hover {
            background-position: -491px bottom;
            }

    ul#navigation li#nav-merch {
        width: 120px;
        }

        ul#navigation li#nav-merch a:hover {
            background-position: -693px bottom;
            }

I would be confident that this will work cross browser but I don't have access to IE at the moment. Let me know if it works for you and if not I'll try helping out again.

Answer 2

`enter code here`plz use this css



For bio
#nav-bio {
    width: 166px;
}
#nav-bio a:hover {
    background-position: 0px 90%;
}

For Photos
#nav-photos a:hover {
    background-position: 734px 90%;
}

For music
#nav-music a:hover {
    background-position: -282px 90%;
}

For Videos
#nav-videos a:hover {
    background-position: -384px 90%;
}
For external(plz change the class name in html code)
#nav-external {
    width: 201px;
}
#nav-external a:hover {
    background-position: -492px 90%;
}

for merch
#nav-merch {
    width: 120px;
}
#nav-merch a:hover {
    background-position: -693px 90%;
}