Hintergrundbild für Links positionieren

[Maquita]

Hallo,

ich stehe gerade total auf dem Schlauch und auch Google hat mich nicht wirklich weitergebracht: ich würde gerne hinter JEDEMLink (genau genommen hinter jedem internen Link) ein kleines Bildchen anzeigen beim Mouseover. Nun hab ich das hier für den hover Zustand der Links:

a:hover, a:active {
	color:#e22128;
	background:url(style/images/LinkArrow.png) no-repeat right center;
	}

Das hat nun aber zur Folge, dass der Pfeil hinten noch im Text hängt. Ich hab schon versucht dem Bildchen einfach links noch etwas Transparenz hinzuzufügen, so dass der Abstand dann eigentlich stimmen müsste, tut er aber nicht. Ich bräuchte also einen Abstand zwischen Linktext und Bild, kann ich das nicht mit background-position hinkriegen?

Nicole

[hero-master]

Hi Maquita
du denkst zu kompliziert, typisch Frau will man meinen
Gib dem Link einfach ein padding-right mit.
Das mit der Transparenz kann gar nicht gehen, da es ja ein Hintergrundbild ist und der Text weiß ja nicht wo hier die Transaprenz beginnt und wo die Grafik. Und das Hintergrundbild weiß ja auch nicht wo Text steht, somit positioniert er sich rechts in der Mitte, ob da nun Text steht oder nicht, ist ihm ziemlich latte

[Maquita]

Ha! Das war ja einfach! Vielen Dank!

Ich denk eigentlich immer zu kompliziert...wobei ich padding-right immer noch nicht verstehe. Das Bild ist doch rechts positioniert, wenn ich dann Abstand von rechts angebe müsste es doch eher noch weiter in den Text rücken, denn der steht ja LINKS vom Pfeil.

[wildmieze]

nee, das Hintergrundbild wird (normalerweise) vom padding nicht beeinflusst.
Stell Dir Dein Bild als Tablett vor, und Deinen Text als Kaffeetasse. Padding ist, wenn Du die Tasse vom rechten Rand ein Stück nach innen schiebst. Das Tablett bleibt trotzdem liegen^^

Edit: naja, nach Boxmodell wird das Tablett eigentlich nach rechts größer, aber das sieht so komisch aus aufm Frühstückstisch

[hero-master]

Das Bild ist doch rechts positioniert, wenn ich dann Abstand von rechts angebe müsste es doch eher noch weiter in den Text rücken, denn der steht ja LINKS vom Pfeil.

Ein Hintergrundbild reagiert nicht auf padding, sondern nur auf background-position.

Mit background-position positionierst du Hintergrundbilder im CSS
Mit padding positionierst du Inhalte im HTML-Markup

Hier kannst du das mal testen: http://www.w3schools.com/css/css_padding.asp

Da wir gerade bei schönen Metaphern sind:
Dein Hintergrundbild ist die Tapete an der Wand. Nun willst du ein Poster (den Link) an die Wand hängen, sagen wir mit Tesa.
Das Poster kannst du jederzeit abkleben und Stück weit rechts oder links hinhängen. Die Tapete interessiert das nicht die Bohne, die bleibt gleich.