Image sprites for navigation

Question

Я пытаюсь использовать это изображение для навигации, но это мой первый опыт работы со спрайтами, и я не могу заставить его работать. Главное изображение появляется, но состояния наведения не работают, и курсор не указывает на то, что они являются даже ссылками. Я знаю, что есть другие способы сделать это, не используя спрайт изображения, но ради устранения неполадок просто притворись, что они не существуют.

Я новичок, когда дело доходит до html и css, что тоже не помогает. Если кто-нибудь может рассказать мне, насколько я глуп, я бы очень признателен!

(Это не позволит мне разместить изображение)

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

/End CSS/

Answer 1

Есть несколько проблем с кодом CSS:

• #mainNavigation a должен быть #main-navigation a

• #main-navigation li назначается display:inline и позже display:block. Вам нужны последний в этом случае для A элементов, чтобы быть столь же высоко, как LI элементов ..

• height:45 должен быть height:45px

• Я думаю, вам нужно взять эту строку: text-indent: -9999em;

• Лучше использовать только background-position в тех правилах #id a:hover и поставить background: url(...) no-repeat в правиле для #main-navigation a:hover.