+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Problem z kodowaniem nawigacji ! (/thread-problem-z-kodowaniem-nawigacji)
Problem z kodowaniem nawigacji ! - szakal1pl - 16-09-2011
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;
}RE: Problem z kodowaniem nawigacji ! - Pedro84 - 16-09-2011
Po co to robisz na grafice skoro tekst powinien być zrobiony w HTMLu ostylowany w CSS?
RE: Problem z kodowaniem nawigacji ! - Kartofelek - 16-09-2011
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;}
itdJak 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
RE: Problem z kodowaniem nawigacji ! - szakal1pl - 16-09-2011