Link mit Image

[Manu]

Nabend zusammen,

ich sitze hier gerade an einer Typo3-Seite, wo in einem bestimmten Content-Bereich alle Links (a, a:link, usw.) mit einem Padding und Background-Image versehen sind. Nun muss ich ein Bild verlinken und habe dort natürlich auch das Padding und das Background-Image drin. Gibt es einen einfachen Weg, dieses Background-Image auszuschließen, ohne das gesamte CSS umzukrempeln?

Gruß,
Manu

[Gunnar Bittersmann]

@@Manu:

nuqneH

Gibt es einen einfachen Weg, dieses Background-Image auszuschließen

Ohne den HTML-Code zu kennen, kann ich dir sagen: vielleicht.

Qapla'

[Manu]

Ohne den HTML-Code zu kennen, kann ich dir sagen: vielleicht.

:)

Ok, ich versuche mal zu reproduzieren:

Ausgangslage:
CSS:
a,
a:link {
    background:transparent url(link.gif) no-repeat 0 0;
    padding:0 0 0 20px;
}
HTML:
<a href="#">Ich bin ein Link mit Grafik & Padding</a><br/>
<a href="#"><img src="pic.jpg" alt="Ich bin ein Image, leider auch mit Grafik & Padding" /></a>

Was ich beim Posten noch nicht bemerkt hatte: In Typo3 werden die Bilder-Links mit einer Klasse (imglink) versehen, dadurch konnte ich das Problem lösen. Durch Dein 'Vielleicht' würde es mich aber interessieren, ob es im obigen Fall grundsätzlich eine Lösung gibt.

Gruß,
Manu

[Matthias Apsel]

Om nah hoo pez nyeetz, Manu!

Was ich beim Posten noch nicht bemerkt hatte: In Typo3 werden die Bilder-Links mit einer Klasse (imglink) versehen, dadurch konnte ich das Problem lösen. Durch Dein 'Vielleicht' würde es mich aber interessieren, ob es im obigen Fall grundsätzlich eine Lösung gibt.

Wenn Links mit und ohne img-Element wild durcheinander vorkommen, gibt es keine Lösung, weil dies wieder auf den Elternselektor hinausliefe.

Wenn es jedoch eine klare Struktur gibt, zum Beispiel Links in einer Navigation, ist die Lösung, den Nachfahrenselektor zu verwenden.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Wenn Links mit und ohne img-Element wild durcheinander vorkommen, gibt es keine Lösung, weil dies wieder auf den Elternselektor hinausliefe.

Ergänzung: Außer die, eine Klasse zu vergeben.

Matthias

[Detlef G.]

Hallo Matthias

Wenn Links mit und ohne img-Element wild durcheinander vorkommen, gibt es keine Lösung, weil dies wieder auf den Elternselektor hinausliefe.

Vielleicht doch, die Bilder in den Links könnten mir negativem margin über das Padding geschoben werden.

a img {  
	margin-left: -20px;  
	vertical-align: bottom;  
}  

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Manu

CSS:
a,
a:link {
    background:transparent url(link.gif) no-repeat 0 0;
    padding:0 0 0 20px;
}

Warum doppelt gemoppelt?
Wenn du alle a selektieren willst, dann ist ein extra a:link unnötig.

Auf Wiederlesen
Detlef