Problem z kodowaniem nawigacji !

[szakal1pl]

Witam! Stworzyłem w Photoshopie taką oto nawigację
  nav.gif (Rozmiar: 15.37 KB / Pobrań: 7) i mam problem z style.css ;/ Nie ogarniam tych współrzędnych... Mógłby ktoś pomóc i poprawić tą końcówke kodu ? Dzięki i pozdrawiam.

Kod:

* { margin: 0px; padding: 0px; }

#nav {
      background: url(nav.gif);
      height: 56px;
      width: 732px;
      margin: 0 auto;
}

#nav span {
     display: none;
}


#nav li {
    list-style-type: none;
    float: left;
}

#nav a {
    height: 56px;
    display: block;
}


#list1 { width: 118px; }
#list2 { width: 109px ; }
#list3 { width: 141px; }
#list4 { width: 126px; }

#list1 a:hover {
      background: url(nav.gif) -115px -56px no-repeat;
}

tak oto wygląda mój css

[Pedro84]

Po co to robisz na grafice skoro tekst powinien być zrobiony w HTMLu ostylowany w CSS?

[Kartofelek]

Kolego. Masz 4 linki, dla każdego chcesz oddzielny hover.
Dlatego musisz opisać każdy odzielnie czyli

Kod:

#list1 {width:118px; background-position:0 0;}
#list1:hover {background-position:0 -56px;}
#list2 {width:109px; background-position:-118px 0;}
#list2:hover {background-position:-118px -56px;}
#list3 {width:141px; background-position:-227px 0;}
#list3:hover {background-position:-227px -56px;}
itd

Jak widzisz każdy link ma odpowiednio przesunięte tło (przesunięcie = -szerokość wcześniejszych elementów).

Napisałem kiedyś skrypt do Photoshopa CS5, który tobi to automatycznie, a przynajmniej pomaga:
http://doman.art.pl/2011-02-27/show

[szakal1pl]