ナビゲーション用の画像スプライト

Question

この画像をナビゲーションに使用しようとしていますが、これはスプライトで初めての作業で、動作させることができません。メイン画像が表示されますが、ホバー状態は機能せず、カーソルは偶数リンクであることを示しません。イメージスプライトを使わずにこれを行う他の方法があることは知っていますが、トラブルシューティングのために、存在しないふりをするだけです。

いずれも助けにならないhtmlやcssについては、私はnoobです。もし誰かが私がどれほど愚かなのか教えていただけたら、私はそれを大いに感謝します！

<nav> 
    <ul id="main-navigation"> 
     <li id="home"><a href="http://www.andrewblike.com/home.shtml" title="Home">Home</a></li> 
     <li id="videos"><a href="http://www.andrewblike.com/video.shtml" title="Videos">Videos</a></li> 
     <li id="recentWork"><a href="http://www.vimeo.com/andrewblike" title="Recent Work">Recent Work</a></li> 
     <li id="bio"><a href="http://www.andrewblike.com/bio.shtml" title="Film Maker's Bio">Bio</a></li> 
     <li id="castingCall"><a href="http://www.andrewblike.com/casting.shtml" title="Casting Call">Casting Call</a></li> 
     <li id="contact"><a href="http://www.andrewblike.com/contact.shtml" title="Contact Me">Contact Me</a></li> 
    </ul> 
</nav> 

/CSS（それは私のイメージを掲載させません）/

nav { 
width: 100%; 
} 

#main-navigation { 
background: url('images/nav_sprite2.jpg') no-repeat; 
width: 612px; 
height: 44px; 
margin-left:auto; 
margin-right:auto; 
} 

#main-navigation li, #mainNavigation a { 
height: 45; 
display: block; 
} 

#main-navigation li { 
float: left; 
list-style: none; 
display: inline; 
text-indent: -9999em; 
} 

#home { width: 53px; } 
#videos { width: 64px; } 
#bio { width: 29px; } 
#recentWork { width: 127px; } 
#castingCall { width: 125px; } 
#contact { width: 116px; } 

#home a:hover { background:url('images/nav_sprite2.jpg') 0px -45px no-repeat; } 
#videos a:hover { background:url('images/nav_sprite2.jpg') -53px -45px no-repeat; } 
#bio a:hover { background:url('images/nav_sprite2.jpg') -157px -45px no-repeat; } 
#recentWork a:hover { background:url('images/nav_sprite2.jpg') -204px -45px no-repeat; } 
#castingCall a:hover { background:url('images/nav_sprite2.jpg') -351px -45px no-repeat; } 
#contact a:hover { background:url('images/nav_sprite2.jpg') -496px -45px no-repeat; } 

/エンドCSS/

Answer 1

いくつかの問題があります。あなたのCSSコード：

• #mainNavigation aは#main-navigation a

• #main-navigation liがdisplay:inline以降display:blockが割り当てられなければなりません。あなたはheight:45px

• である必要があり、私はあなたがこの行を取り出す必要があると思う

• height:45 ... LI要素と同じくらい高いことがA要素のため、この場合には後者が必要になります。text-indent: -9999em;

• #id a:hoverのルールにはbackground-positionを使用し、のルールにはbackground: url(...) no-repeatを入れてください。