rollover ved hjelp av CSS [løst]

[IRRupt]

Trenger litt hjelp her. Vil gjerne benytte meg av background position når jeg skal lage min rollover som de gjør i denne artikkelenn

 

Mitt problem er at min meny består av 6 "knapper" hvor den siste knappenhar en helt annen form en resten, slik at jeg må ha et eget background bilde. Hvordan definenerer jeg dette? Har prøvd med å definere hver ul som en egen classe, for deretter å definere et annet background bilde på den siste, men jeg får det ikke til.

 

Noen tips?

Endret 16. september 2004 av IRRupt

[Lemkin]

Ikke definer hver ul som en klasse.

Legg alle linkene i en <ul></ul> og for hver link har du det slik:

<li><a href="#" class="home">home</a></li>
osvosv

 

Om du har teksten i bildet må du bruke <span> som du gir egenskapen usynlig i css

[PoleCat]

Det enkleste i dette tilfellet, vil være å lage fellesverdier for a-elementet som da vil tilhøre de 5 første knappene, og deretter lage en klasse til den siste knappen.

Antageligvis må du bruke !important for å overstyre det som er standard for a-elementer på denne klassen, uten at jeg skal si noe sikkert.

 

<li><a href="#" class="siste">Tekst</a></li>

 

.siste {
 egenskap: verdi !important;
}

[IRRupt]

Da fikk jeg løst det

 

 

<li><a href="#"  id="test"><span class="hidden">Test</span></a></li>

 

#test {

height:Xpx;

width:Xpx;

background-image: url(tilbilde.jpg);

display:block;

}

#test:hover {

background-position:-Xx;

}

 

Takker for tipsene!