1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

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

Dieses Thema im Forum "Web-Design" wurde erstellt von Chuonrad, 09.02.2005.

  1. Chuonrad

    Chuonrad Thread Starter MacUser Mitglied

    Mitglied seit:
    27.08.2004
    Beiträge:
    377
    Zustimmungen:
    171
    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?
     
  2. Chuonrad

    Chuonrad Thread Starter MacUser Mitglied

    Mitglied seit:
    27.08.2004
    Beiträge:
    377
    Zustimmungen:
    171
    interessant ist, das IE und FF für den PC das so anzeigen, wie gewünscht.

    Hat denn keiner eine Idee?
     
  3. Marzelpan

    Marzelpan MacUser Mitglied

    Mitglied seit:
    31.10.2003
    Beiträge:
    58
    Zustimmungen:
    0
    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:
    [​IMG]

    Oder soll das noch anders aussehen?

    Gruß,
    Marcel
     
  4. Azathoth

    Azathoth MacUser Mitglied

    Mitglied seit:
    20.09.2004
    Beiträge:
    474
    Zustimmungen:
    9
    also die syntax ist vollkommen korrekt. ich habs jetzt ned getestet, aber wenn würd ich das genau so machen?!