[GoonSquad]

Drogie Mireczki, pierwszy raz mam do czynienia z obrazkami sprites i potrzebuję pomocy. Otóż wszystko idzie ok, oprócz tego, że po najechaniu na obrazek, obrazek hovera zjezdza z gory wypychając tak jakby ten wcześniejszy na dół. Co mogę zrobić żeby zamiast tego było jak dawniej (po najechaniu obrazek po prostu zmieniał się w obrazek hovera (bez żadnego jeżdżenia z góry).

Mam taki kod na razie:

obrazek a{ display:block; width:101px; height:75px; background: url(images/sprite.png) 0 -204px; background-repeat: no-repeat; float: right;

-webkit-transition: background 0.7s ease; text-indent: -9000px;}

obrazek a:hover { background-position: 0 -79px; background-repeat: no-repeat; float: right; }

#css #html #webdev #webdesign

[vegat]

@GoonSquad: overflow: hidden;

[GoonSquad]

@vegat: Dzięki wielkie:) dodać do obrazka czy hoveru? to takie "najeżdżanie" to standard jeśli chodzi o sprity?

[vegat]

@GoonSquad: do obrazka. Overflow hidden zawsze warto stosować, jeśli masz pewność, że dany element nie ma zmieniać swojego rozmiaru mimo kombinowania z treścią w środku. Przydatne przy robieniu graficznych i właśnie przy spriteach. Domyślnie overflow jest na auto, co oznacza, że tekst czy inne elementy wyjadą poza element mimo ustalenia jego rozmiaru.
====================================================================================================================================================

[GoonSquad]

@vegat: niestety nic nie dało to overflow:( wielkość obrazka się nie zmienia nawet na chwilę, po prostu jak się najedzie na niego to obrazek hovera zaczyna zjezdzać równocześnie wypychając z "obszaru obrazka" ten stary:(

[vegat]

http://jsfiddle.net/tALpC/ przykład pionowy. http://jsfiddle.net/tALpC/1/ przykład poziomy. Działa, więc coś masz pewnie gdzieś indziej popsute.

[GoonSquad]

@vegat: ja mam tak jak w przykładzie pionowym (tyle że mam dwa pełne obrazki, jeden zastępuje drugi). Ale ja właśnie nie chcę żeby to tak jeździło, tylko żeby po najechaniu się zmieniało w miejscu:P da się to jakoś zrobić?

[vegat]

To wywal transition: http://jsfiddle.net/tALpC/2/

[GoonSquad]

@vegat: dziękuję bardzo:) a da się zrobić tak żeby tak jak kiedyś transition działało, że stopniowo się ten kolor zmienia?

[Wykopowicz_Ryan]

@GoonSquad:

Po pierwsze wywal duplikaty atrybutów (powtarzasz je przy hover oraz przy stanie domyślnym).

Po drugie napisz co chcesz osiągnąć dzięki text-indent.

Po trzecie napisz po co Ci display:block skoro ustawiłeś wysokość, szerokość oraz wyrównanie do prawej.

Po czwarte możesz zapisać background-url oraz repeat razem - background: url() 0px 0px no-repeat.

Po piąte może najpierw naucz się CSS 2 a następnie zabierz się za trójkę, póki co jest przerost formy nad