Grafik vor Text Link

velli · #1 (**permalink**) 27.01.2009, 22:15

Hallo

Ich möchte via CSS eine Grafik vor jeden Text-Link setzen, aber nicht vor Links die auf Bildern liegen.

mache das bis jetzt so:

Code:

.linkpfeil {
padding-left:12px;
background-image:url(../images/linkpfeil.gif);
 background-repeat: no-repeat;
 background-position: left;
}

setze diese class jetzt in jeden "href" tag. würde es aber lieber automatiseren und auf den a:link setzen, aber dann is der Linkpfeil eben auch vor Grafiken, wenn auf denen ein Link gesetzt is.

jemand ne idee?

emti · #2 (**permalink**) 27.01.2009, 22:49

Dieses hier hat jetzt nichts mit Deinem Wunschgedanken zu tun, jedoch möchte ich Dir den Tip nicht vorenthalten.
Eines ist mir sofort aufgefallen. Du kannst einige Zeichen sparen, durch Kurzschreibweise:

Code:

.linkpfeil {
  background: url(../images/linkpfeil.gif) no-repeat left top;
}

Timo · #3 (**permalink**) 27.01.2009, 22:56

Das könnte dir helfen: Übersicht: Image-Replacement-Techniken ? Artikel von Jens Meiert

regloh · #4 (**permalink**) 28.01.2009, 20:54

Zitat:

Das könnte dir helfen: Übersicht: Image-Replacement-Techniken ? Artikel von Jens Meiert

Das hat damit doch nichts zu tun. Der TE möchte den Text beibehalten und VOR den Link eine kleine Grafik setzen.

Wenn du nur Textlinks mit der Grafik versehen möchtest, dann setze doch die Klasse nur in Textlinks. Wenn du das aufgrund von CMS oder ähnliches nicht beeinflussen kannst, dann weiß ich auch grad keine Lösung.

Ein

Code:

a img {...}

ist ja nicht möglich, da man damit ja das img-Element anspricht. Verwandtschaftsselektoren sind auch keine möglichkeit, da du damit immer nur das Element in einem anderen ansprechen kannst. Den Fall "Berücksichtige nur a-Elemente, die kein img-Element enthalten" kann man mit CSS meines Wissens nicht angeben.

toscho · #5 (**permalink**) 28.01.2009, 22:36

Idee:

Code:

a {
    padding-left:  20px;
    background:    url("/linkbild.png") 
                   left center 
                   no-repeat 
                   transparent;
}
a img {
    position:      relative;
    left:          -20px;
    margin-right:  -20px;
}

Zwar haben hier auch verlinkte Bilder das Linkbild, aber wenn sie nicht transparent sind, sieht es niemand.

Solche Kunststückchen muß man aber sehr gut in vielen Browsern testen. Besonders auf Zeilenumbrüche und Floatboxen achten!

Gruß
Thomas

velli · #6 (**permalink**) 09.02.2009, 23:59

hoppla

hab garkeine benachrichtigung bekommen über eure einträge... (?)

vielen dank schonmal

die möglichkeit von toscho scheint mir ganz gut.
da sich aber in der programierung ergeben hat das nicht alle links eine grafik vorneweg haben sollen, bleib ich wohl doch bei meiner methode der grafik manuell mittels class zu setzen.

aber danke für den denkanstoss, kenn ich sicher woander gebrauchen

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Link in eine Grafik	kiron	(X)HTML	1	16.07.2009 20:09
link als Grafik formatiert, lösungsansatz gesucht	lila_3	CSS	3	15.07.2009 12:19
100% Höhe Problem im FF und im IE	mimii	CSS	7	08.02.2008 16:55
Ständig wechselnde Bilder, Werbung	Vybsi	(X)HTML	17	24.01.2008 23:00
Aufklappmenü (horizontal)	débutant	CSS	20	03.04.2007 09:37