我需要一些幫助對齊我的導航欄在css

Question

我對網頁設計相當陌生，但很好地理解它。只是，當涉及數學時，我完全迷失了O.O.幾乎我在導航欄上做的是，我創建了一個精靈，現在使用精靈的兩個不同的一半來創建鏈接效果。哦，還有超鏈接涉及btw也是我用跨度標籤堵塞所以是的。所以，如果有人可以請幫助我，這裏是我的樂隊頁面http://atfamusic.hostei.com/#（在Firefox中最好的工作還是要解決這個問題），沒有太多關於它的東西，所以是的。代碼是（對於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; } 

所以是啊，請幫忙。哦，如果有人可以找出爲什麼標題不對齊在互聯網瀏覽器，這將是偉大的！ :)

P.S.如果願意做額外的中心導航欄以及\ m /那真棒。對不起，如果我吸了，是一個新手：P

Answer 1

`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%; 
} 

Answer 2

您好@xripper下面的HTML和CSS將解決您的導航問題。我移除了UL李一的標籤，因爲他們是沒有必要的，我不是縮進使用CSS，這意味着一個的將仍然是屏幕閱讀器等

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

下面CSS將解決你的精靈訪問的文本在導航

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

我相信，這將工作跨瀏覽器，但我目前無法訪問IE瀏覽器。讓我知道它是否適合你，如果沒有，我會盡力幫助。