Background-Image für jeden einzelnen Navipunkt

[haberkorn]

Gelöst

Hallo!

Ich habe ein kleines Problem bei der Umsetzung einer Homepage.

 

[Cheffchen]

Hallo,

na in dem zb mir Sprites arbeitest

#dropmenu a {background:url(images/menu-sprites.png) no-repeat;}

#dropmenu a.punkt1 {background-position:0 0;}
#dropmenu a.punkt1:hover {background-position: -180px 0;}

#dropmenu a.punkt2 {background-position: 0 -181px ;}
#dropmenu a.punkt2:hover {background-position:-180px -181px;}

hier mal ein beispiel in Aktion: Sprites beispiel - jsFiddle

jeder Menüpunk Link bekommt eine eigene classe <a class="punkt1" href=""> und dein menu-sprites.png ist eine art schachbrett mir einem raset 180x181px, jede reihe ist ein Punkt, Links das normae und rechts das hover bild.
Fertig.

Cheffchen

 

[Tronjer]

Zwei weitere Lösungsansätze wären list-style-image und das Pseudo-Element :before.

 

[bdt600]

Crossposting!