Link hinter Grafik *nicht* unterstreichen

[Rudolf Horbas]

Hi,

ich plage mich mit folgendem Problem:

ich lasse Links im Hauptbereich so formatieren:

#content a
{
    border-bottom: dotted 1px #EF7B25;
}

Jetzt will ich aber eine Regel formulieren, nach der Grafiken, hinter denen Links liegen, nicht diese Eigenschaft bekommen:

<a href="http://www.example.com/"><img src="...

Das krieg ich aber nicht hin, die border bleibt bestehen:

#content a img
{
    border-bottom: none;
}

... und das ist ja auch logisch, denn ich spreche so ja das Element img an, und nicht a, das die Eigenschaft der border hat.
Gibt es eine Möglichkeit, "rückwirkend" Eigenschaften zuzuweisen, d.h.:
"Element gefolgt von ..."?

Ich hab jetzt beim w3c gewälzt, aber nichts für meinen Fall gefunden... Kann aber auch sein, dass ich vor Müdigkeit blind bin.

Bin für Hinweise dankbar!

Rudi

[Christoph Schnauß]

hallo,

<a href="http://www.example.com/"><img src="...

<a href="http://www.example.com/">kuck mal!</a><img src="...>

Grüße aus Berlin

Christoph S.

[Rudolf Horbas]

<a href="http://www.example.com/"><img src="...

<a href="http://www.example.com/">kuck mal!</a><img src="...>

Hilft nicht, die Grafik soll ja klickbar sein ...
So einfach isses nicht :-)

Rudi

[Christoph Schnauß]

hallo,

Hilft nicht, die Grafik soll ja klickbar sein ...

Ahso, dann sag das doch gleich. Du kannst ihr natürlich in deiner CSS auch "kein Rand" zuweisen, aber dann bleibt die Festlagung für den link selbst trotzdem bestehen.

Vielleicht solltest du ein etwas ausführlicheres Codebeispiel posten, damit man nachvollziehen kann, was du eigentlich möchtest  -  ich fürchte, es läuft sonst auf ein "geht nicht, setzen, sechs!" hinaus.

Grüße aus Berlin

Christoph S.

[Rudolf Horbas]

Ahso, dann sag das doch gleich.

War vielleicht missverständlich formuliert, aber es stand drin :-)

Du kannst ihr natürlich in deiner CSS auch "kein Rand" zuweisen, aber dann bleibt die Festlagung für den link selbst trotzdem bestehen.

genausoweit bin ich auch gekommen.

Vielleicht solltest du ein etwas ausführlicheres Codebeispiel posten, damit man nachvollziehen kann, was du eigentlich möchtest  -

In Lieschen Müllers Worten einfach nur ein Bild, auf das man klicken kann, und das *nicht* von einer Linie unterstrichen wird.

Für uns Anspruchsvollere:

<a href="link.html"><img src="foo.gif" /></a>

Durch die ursprünglich zu generös gesetzte Regel

#content a
{
    border-bottom: dotted 1px #EF7B25;
}

wird jeder Link orange unterstrichelt, was bei Text hübsch aussieht; bei Bildern ist es fehl am Platz.
Ich krieg's im Moment weg, indem ich 'ne extra Klasse formuliere:

a.blank
{
    border-bottom:    none;
}

und dann schreibe:

<a href="link.html" class="blank"><img src="foo.gif" /></a>

aber irgendwie ist das nicht sehr elegant.

ich fürchte, es läuft sonst auf ein "geht nicht, setzen, sechs!" hinaus.

Hoppla, wer vergibt denn hier Zensuren?

Grüße aus Berlin

Grüße aus den verschneiten München,
Rudi

[Christoph Schnauß]

hi,

Durch die ursprünglich zu generös gesetzte Regel
#content a {border-bottom: dotted 1px #EF7B25;}
wird jeder Link orange unterstrichelt, was bei Text hübsch aussieht; bei Bildern ist es fehl am Platz.

Und was hindert dich daran, dir mehrere Klassen zu definieren?

Grüße aus Berlin

Christoph S.

[Rudolf Horbas]

Und was hindert dich daran, dir mehrere Klassen zu definieren?

1. die Rücksicht auf die Leute, die im Redaktionssystem den Content pflegen. Dann müssten sie nämlich nicht extra eine Klasse zuweisen (die wissen eh nicht, was das ist).

2. Streben nach Eleganz? *öffel*

Ansonsten: nichts.

Aber da ich sicher bin, dass es ohne Klassen geht, will ich's einfach wissen (und machen).
Die Selektoren sind so ausgefeilt, da muss einfach was dabei sein.

[Candid Dauth]

Hallo du da draußen,

Aber da ich sicher bin, dass es ohne Klassen geht, will ich's einfach wissen (und machen).

Mir fällt jetzt spontan nur eine ziemlich abstrakte Lösung ein:
Möglicherweise bekommst du es per margin und padding so geregelt, dass ein Rahmen (solid) des Bildes (und zwar mit der Hintergrundfarbe der Seite) den Rahmen des Links übermalt. Aber ich bezweifle, dass du das so hinbekommen wirst, dass es browserübergreifend funktioniert.

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)

[Rudolf Horbas]

Mir fällt jetzt spontan nur eine ziemlich abstrakte Lösung ein:
Möglicherweise bekommst du es per margin und padding so geregelt, dass ein Rahmen (solid) des Bildes (und zwar mit der Hintergrundfarbe der Seite) den Rahmen des Links übermalt. Aber ich bezweifle, dass du das so hinbekommen wirst, dass es browserübergreifend funktioniert.

Ja, hab ich auch kurz drangedacht, aber verworfen. Ist irgendwie Murx.

Grad hab ich alles auf die Klasse umgestellt, und *freu* sieht alles super aus, da mach ich den Fehler und schau mir die Seite im Marktführer an. Der ignoriert die Anweisung

.blank
{
    border-bottom: none;
}

schlicht und zeigt die Linien an.

Ich glaub ich muss ins Bett ... die Kinder kennen morgen früh wieder keine Gnade, und ich bring das heut nicht mehr hin.

Ich setz mir aber nen bookmark und schau morgen früh nochmal vorbei!

Guts Nächtle,
Rudi

[Orlando]

Hallo Rudolf,

Möglicherweise bekommst du es per margin und padding so geregelt, dass ein Rahmen (solid) des Bildes (und zwar mit der Hintergrundfarbe der Seite) den Rahmen des Links übermalt. Aber ich bezweifle, dass du das so hinbekommen wirst, dass es browserübergreifend funktioniert.

daran habe ich auch gedacht. Mit

a img { border-bottom:1px solid #rgb; position:relative; top:1px }

funktioniert das vermutlich noch besser. Allerdings müsste die Breite der Links den Grafiken angeglichen werden. Eine Klasse ist hier die einzige praktikable Lösung.

... die Kinder kennen morgen früh wieder keine Gnade, und ich bring das heut nicht mehr hin.

display:none; volume:silent im Kindselektor hilft.

Grüße
Roland

[Rudolf Horbas]

... die Kinder kennen morgen früh wieder keine Gnade, und ich bring das heut nicht mehr hin.
display:none; volume:silent im Kindselektor hilft.

*ggg*

Ich hab's bisher immer so versucht:
<!-- Kind 1, Kind 2 -->
aber css ist natürlich viel besser.

Rudi

[Christoph Schnauß]

hallo,

Aber da ich sicher bin, dass es ohne Klassen geht

Diese "Sicherheit" ist für dein Problem ein Trugschluß. Nein, du wirst nicht "ohne" auskommen.

Grüße aus Berlin

Christoph S.

[Rudolf Horbas]

Diese "Sicherheit" ist für dein Problem ein Trugschluß. Nein, du wirst nicht "ohne" auskommen.

Wäre gut, wenn du das irgendwie begründen könntest, anstatt es einfach festzustellen. Bisher hast du in diesem Thread keine Äußerungen getan, die dich als Autorität in css ausweisen. Nicht dass ich das anzweifle, aber hinnehmen kann ich dein Dekret nicht unbegründet.

Die Selektoren bieten eine so ausgefeilte Grammatik [http://www.w3.org/TR/REC-CSS2/selector.html], dass ich schon meine, dass es eine Lösung gibt.
Ich kann das Problem bzw. die Regel ja in natürliche Sprache fassen, und das recht knapp:

"Setze bei a-Elementen die Eigenschaft border auf none,
wenn sie im Kontext eines img-Elements vorkommen."

Ich halte das für keine exotische Anforderung. Kann sein, dass nicht jeder Browser das umsetzen kann, da es css2 ist, aber ich hätte es einfach gern logisch gelöst.

Rudi

[Christoph Schnauß]

hallo,

"Setze bei a-Elementen die Eigenschaft border auf none,
wenn sie im Kontext eines img-Elements vorkommen."
Ich halte das für keine exotische Anforderung.

Nein, das ist es nicht, ganz im Gegenteil ist das bereits eine sehr häufige Praxis. Aber du willst ja um einen _Teil_ deines Verweises einen Rahmen haben, und um einen anderen Teil nicht. Und _diese_ Aufgabe läßt sich am leichtesten mit unterschiedlichen Klassen lösen.

Kann sein, dass nicht jeder Browser das umsetzen kann

Mir ist keiner bekannt, der bei <a> Probleme machen würde.

Grüße aus Berlin

Christoph S.

[Vaclav]

Hallo Christoph,

"Setze bei a-Elementen die Eigenschaft border auf none,
wenn sie im Kontext eines img-Elements vorkommen."
Ich halte das für keine exotische Anforderung.

Nein, das ist es nicht, ganz im Gegenteil ist das bereits eine sehr häufige Praxis.

Das wäre ja mal interessant. Ich versuche Dich zu verstehen, aber komme nicht drauf. Auch hier http://www.w3.org/TR/CSS21/selector.html#q1 finde ich nichts, um ein Element auszuwählen, das ein bestimmtes anderes Element enthält (stelle ich mir etwa so vor: a < img).

Aber du willst ja um einen _Teil_ deines Verweises einen Rahmen haben, und um einen anderen Teil nicht. Und _diese_ Aufgabe läßt sich am leichtesten mit unterschiedlichen Klassen lösen.

Klassen für Teile eines Elements? Wie soll das gehen? Doch höchstens mit Pseudoelementen, oder? (Irgendein Browser wendet :first-letter tatsächlich ggfs. auf Bilder an.)

Kann sein, dass nicht jeder Browser das umsetzen kann

Mir ist keiner bekannt, der bei <a> Probleme machen würde.

Darum geht es wohl nicht. Wo liegt mein Denkfehler?

Grüße aus Berlin

Christoph S.

Viele Grüße
Vaclav

[Christoph Schnauß]

hallo,

Ich versuche Dich zu verstehen, aber komme nicht drauf.

Es ist doch ganz einfach:
  <a href="irgendwas.htm"><img src="irgendwas.png">klick mich</a>

Das von Rudolf angeführte Zitat:

"Setze bei a-Elementen die Eigenschaft border auf none,
wenn sie im Kontext eines img-Elements vorkommen."

verweist auf genau diese "Standard-Konstruktion". Wenn jetzt mit CSS für <a> ein Border festgelegt wird, erscheint der selbstverständlich für _alles_, was sich innerhalb des links befindet. Will er für das Image aber ausdrücklich _keinen_ Rand haben, muß dieses image entweder außerhalb von <a>...</a> stehen oder einer bestimmten Klasse zugeordnet werden  -  oder man nimmt ein <span>...</span> dafür, um es nochmals anders, also ohne Rahmen, zu formatieren.

Auch hier http://www.w3.org/TR/CSS21/selector.html#q1 finde ich nichts

Es ist ja schön, wenn du weißt, wo du beim W3C nachschauen kannst. Aber die Frage, die Rudolf hat, wird an dieser Stelle nicht beantwortet.

(stelle ich mir etwa so vor: a < img).

Vergiß das ganz schnell wieder.

Grüße aus Berlin

Christoph S.

[Vaclav]

Hallo Christopheles.

Hör! merk dir dies
Ich bitte dich, und schone meine Lunge:
Wer recht behalten will und hat nur eine Zunge,
Behälts gewiß.
Und komm, ich hab des Schwätzens Überdruß,
Denn du hast recht, vorzüglich weil ich muß.

(stelle ich mir etwa so vor: a < img).

Vergiß das ganz schnell wieder.

Was spricht dagegen?

Viele Grüße
Vaclav

[Christoph Schnauß]

hi,

(stelle ich mir etwa so vor: a < img).
Vergiß das ganz schnell wieder.
Was spricht dagegen?

Das W3C und SELFHTML

Christoph S.

[Orlando]

Hallo Vaclav,

a < img

Vergiß das ganz schnell wieder.

Was spricht dagegen?

Der Parser müsste zusätzlich rückwärts laufen, was die Performance beeinträchtigt.

Einen Ausweg bietet eventuell die CSS3-Pseudoklasse :contains, allerdings selektiert diese nur Textinhalt, keine weiteren Elemente.

Grüße
Roland

[Vaclav]

Hallo Roland,

danke für die Antwort.

Einen Ausweg bietet eventuell die CSS3-Pseudoklasse :contains, allerdings selektiert diese nur Textinhalt, keine weiteren Elemente.

Ich hänge die ganze Zeit an der Frage fest, welchen Unterschied es für die "Laufrichtung" des Parsers macht, ob ein Element jetzt ein Element oder einen Textknoten enthält.http://www.w3.org/TR/CSS21/intro.html#processing-model bietet mir keine Erklärung.

Falls ich es mal nachlesen will: Was muß ich wissen um es zu kapieren? DOM?

Viele Grüße
Vaclav

[Orlando]

Hallo Vaclav,

Ich hänge die ganze Zeit an der Frage fest, welchen Unterschied es für die "Laufrichtung" des Parsers macht, ob ein Element jetzt ein Element oder einen Textknoten enthält.http://www.w3.org/TR/CSS21/intro.html#processing-model bietet mir keine Erklärung.

das kann ich auch nicht unbedingt nachvollziehen, dafür habe ich viel zu wenig Ahnung von der Arbeitsweise eines CSS-Parsers. Schließlich muss er in beiden Fällen Eigenschaften eines „bereits abgearbeiteten“ Elements neu berechnen.

Wenn du dir allerdings ein Dokument mit vielen Elementen vorstellst, dessen Stylesheet irgendwo einen echten „parent“ selector enthält, der alles über den Haufen wirft, dürften Performanceprobleme die Folge sein, zumal dieser Umstand auch dynamisch auftreten kann (:hover, DOM usw.).

Ich habe ein bisschen gesucht, aber nur

http://archivist.incutio.com/viewlist/css-discuss/42942

gefunden.

Grüße
Roland

[Vaclav]

Hallo Christoph.

[Goethe]

Das war möglicherweise nicht gerechtfertigt. In dem Fall täte es mir leid.

Vaclav

[Rudolf Horbas]

Aber du willst ja um einen _Teil_ deines Verweises einen Rahmen haben, und um einen anderen Teil nicht.

Nein, ich wäre schon zufrieden, wenn

<a href="link.html"><img src="foo.gif" /></a>

keine Unterstreichung hätte. Was andres hab ich nie gefordert.

Ich hab das jetzt tatsächlich mit einer Extra-Klasse gelöst, allerdings zickte der IE immer noch, bis ich der Klasse ein ! important spendiert habe:

a.blank
{
    border-bottom: none ! important;
}

Rudi

[Christoph Schnauß]

hi,

ich wäre schon zufrieden, wenn
<a href="link.html"><img src="foo.gif" /></a>
keine Unterstreichung hätte.

a:link { text-decoration:none; }

Grüße aus Berlin

Christoph S.