Forum PHP.pl > [HTML][CSS]Problem ze sprite'm...

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Problem ze sprite'm...

czernin

16.09.2012, 17:52:49

Witajcie!

Mam problem ze sprite. Kod css:

Kod

#container li {
background: url(sprite.png) no-repeat top left;
}

.a{ background-position: 0 0; width: 200px; height: 75px; }
.a:hover{ background-position: 0 -76px; width: 200px; height: 75px; }
.b{ background-position: 0 -152px; width: 200px; height: 75px; }
.b:hover{ background-position: 0 -228px; width: 200px; height: 75px; }
.c{ background-position: 0 -304px; width: 200px; height: 75px; }
.c:hover{ background-position: 0 -380px; width: 200px; height: 75px; }
.d{ background-position: 0 -456px; width: 200px; height: 75px; }
.d:hover{ background-position: 0 -532px; width: 200px; height: 75px; }

Kod html:

[HTML] pobierz, plaintext 
<html>
<head>
<title>Test menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="/" class="a"></a>
<a href="gry.php" class="b"></a>
<a href="dodaj.php" class="c"></a>
<a href="kontakt.php" class="d"></a>
</body>
</html>
[HTML] pobierz, plaintext

I to nie chce działać... Chodzi o to, żeby był efekt jak pod linkiem podanym niżej (po najechaniu na obrazek zostaje on zmieniony)

Kod

http://gry.xaa.pl/menu/efekt.php

Obrazek sprite:

Kod

http://gry.xaa.pl/menu/sprite.png

Dlaczego to nie chce działać? Może mi to ktoś wytłumaczyć?

untorched

16.09.2012, 20:15:44

http://www.w3schools.com/css/css_image_sprites.asp

Damonsson

16.09.2012, 22:28:17

Zapomniałeś, że musi być elementem blokowym.

Dodaj:

[CSS] pobierz, plaintext 
#container li {
    background: url(sprite.png) no-repeat top left;
    float: left;
}
[CSS] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.