alternative zu :before

[dallasstar]

Auf einer Homepage möchte ich im Menü als Hover Effekt vor dem link eine grafik einfügen. wie macht man das am besten? eigentlich wollte ich es über :before machen, aber das funktioniert ja im IE nicht
danke

[ingo]

mit ner hintergrundgrafik klappts zuverlässig:

a {padding-left: grössevondeinembildplusnbüschnmehr}
a:hover {background: url(deinbild) no-repeat 0 0;}

[dallasstar]

aber dann wird die grafik doch als hintergrund angezeigt und nicht davor, oder

OK funktioniert aber beim hover verschwindet jetzt der text

[Nele]

Zeig doch mal ein Beispiel.

[ingo]

schau mal hier (der js-link)
das ist das dazugehörige css:

div#content a.js {background: url(../02/bg_linkjs.gif) no-repeat left; padding-left: 19px; color:#4F2F18}

[dallasstar]

js-link???

[ingo]

wo js vorsteht, ist auch js drin

"King-asshole.de Suchplugin"

[dallasstar]

ja aber da verschwindet bei hover ja nur die unterstreichung, und es kommt nix davor

[ingo]

klar, weil ich ja keinen bildwechsel notiert hab. ging mir nur um´s grundsätzliche.
du kannst natürlich aus

a {background: url(deinbild.gif) no-repeat left;...}

a:hover {background: url(deinbild_hover.gif) no-repeat left;...}

machen.
weisst, was ich mein?

[321]

Du kannst für a als BG-Grafik eine Salami und für a:hover als BG-Grafik eine Salamischeibe notieren.

[dallasstar]

ehrlcih gesagt nein.

beim normalen link brauch ich ja gar kein bild. soll ich beim hover den text als grafik machen?

[321]

Dann lass bei a ohne hover die BG-Grafik weg und notiere sie nur bei a:hover

[ingo]

dann machs mal so:

a {background: url(salami.gif) no-repeat -200px 0}
a:hover {background: url(salami.gif) no-repeat 0 0}

damit zerrst du die grafik für den "normalen" link soweit aus dem element (dem link), dass sie nicht zu sehen ist.
bei hover weist du der hintergrundgrafik die normale position zu (0 = links)

[Spongebob]

mit ner hintergrundgrafik klappts zuverlässig:

a {padding-left: grössevondeinembildplusnbüschnmehr}
a:hover {background: url(deinbild) no-repeat 0 0;}

Vergiss diese Code schnell. a-Tags vertragen kein Padding, wenn dann mach zuvor ein Blockelement daraus dann ist es korrekt.

[ingo]

nee, is klaa