<a>-tag mit "hintergrundbild" möglich?

Chuonrad · 09.02.2005

Hallo Community,

ich möchte einen <a>-tag mit einem Hintergrundbild, hier einem kleinen Pfeil versehen. Das ganze wie CSS, also nicht mit einem <img> vor dem link.

Mein Versuch sieht derzeit so aus:

p a:link {
background-image: url(bilder/arrow.gif);
background-repeat: no-repeat;
padding-left: 12px;
}

also, es sollen nur die <a> behandelt werden, die innerhalb eines <p> stehen.

mit einem rand versehen, der den text um 12px versetzt, damit er nicht über dem Bild steht.

mein editor (Hyperedit) zeigt das korrekt an. Safari ignoriert es völlig, IE rückt nur ein (lässt das bild aber weg). beim FireFox gehts richtig.

Hat jemand eine andere Lösung oder einen anderen Ansatz?

Chuonrad · 17.02.2005

interessant ist, das IE und FF für den PC das so anzeigen, wie gewünscht.

Hat denn keiner eine Idee?

Marzelpan · 17.02.2005

Hi,

hier funktioniert das mit deinem CSS-Code:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Testseite</title>
	<style type="text/css">
		p a:link {
			background-image: url(pdf.gif);
			background-repeat: no-repeat;
			padding-left: 25px;
		}
	</style>
</head>
<body>
<p>
Test test test <a href="bla.html">Clickme</a> test test test
</p>
</body>
</html>

Das sieht dann im Safari 1.2.4 (v125.12) so aus:

Oder soll das noch anders aussehen?

Gruß,
Marcel

Azathoth · 18.02.2005

also die syntax ist vollkommen korrekt. ich habs jetzt ned getestet, aber wenn würd ich das genau so machen?!

<a>-tag mit "hintergrundbild" möglich?

Chuonrad

Aktives Mitglied

Chuonrad

Aktives Mitglied

Marzelpan

Mitglied

Azathoth

Aktives Mitglied