Спрайты изображений для навигации - PullRequest
Новая
       6

Спрайты изображений для навигации

0 голосов
/ 04 марта 2012

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

Я нуб, когда дело доходит до 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; }

/ Конец CSS /

1 Ответ

0 голосов
/ 04 марта 2012

Есть несколько проблем с вашим кодом 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.

...