Icon vor einem Link einfügen

[Tim]

Hallo.

Ich bin kein Experte auf dem Gebiet der Webseitenerstellung, daher übersehe ich evtl etwas ganz einfaches. Ich möchte für bestimmte Links in einem Fließtext ein kleines Icon vor dem Linktext haben. (Wie es auch zB hier mit den kleinen Ordnern und den Landesflaggen passiert.)

Nun kann ich einfach vor jeden Link, den das betrifft (das sollen die externen Links sein) ein kleines Symbol mit "img" setzen. Eleganter wäre natürlich, den entsprechenden Links eine Klasse zu geben und das über css zu lösen. Ich hatte ganz stumpf an ein Hintergrundbild gedacht, dass ich mit

  
margin-left: 14px;  
background-image: url("icon2.gif");  
min-width: 12px;  
min-height: 12px;  
background-position: -12px -6px;  
background-repeat: no-repeat;  

dann vor den Link schiebe. Das ganze funktioniert aber nur, solange für background-position ein positiver Wert angegeben ist, sonst ist der kleine Knubbel nicht sichtbar.

Ein Test mit einem größeren Bild ergab, dass nur hinter dem eigentlichen Text Teile vom Hintergrundbild angezeigt werden.

Gibt es da eine andere Möglichkeit, ist mein "klassischer" Ansatz das Bild manuell einzufügen evtl einfach überlegen oder kann mir jemand helfen?

Danke im Voraus,
Tim

[LX]

versuche es mit Padding, das ist a) einfacher und funktioniert b) auch im IE.

Gruß, LX

[Tim]

Vielen Dank. Ich hatte da sowieso einen Verständnisfehler. Nun klappt es wie gedacht.

Besten Dank,
Tim

[Lloyyd]

list-style-image?

[Cybaer]

Hi,

Eleganter wäre natürlich, den entsprechenden Links eine Klasse zu geben und das über css zu lösen. Ich hatte ganz stumpf an ein Hintergrundbild gedacht,

... wobei einige Browser(versionen) Zicken machen (auch bei deinem Entwurf).

Browserübergreifende Lösung: http://Coding.binon.net/Linksign

Kann man auf IE<7 auch verzichten, dann folge dem Link im Abschnitt "Externe Tips". Ggf. ist es sogar unnötig, extra für deinen Zweck eine Klasse zu vergeben.

Gruß, Cybaer