Tim Tepaße: Linkunterstreichungs-Farbe ändern

Beitrag lesen

Hallo Karl,

ich möchte via CSS bestimmen, dass alle normalen Links (ohne zusätzlichen
Klassenangaben class="") auf meiner Seite in einer anderen Farbe
unterstrichen werden als der Linktext.

Hmm? Nur damit ich Dich richtig verstehe, Du hast also zwei Sorten
von Links auf Deiner Seite, einmal mit, einmal ohne Angabe einer
Klasse? So ungefähr?

(1) <a href="blub">blub</a>
  (2) <a href="blarg" class="blink">blark</a>

So verstehe ich jedenfalls Deinen Text.

Dies lässt sich so bewältigen:
A:link { COLOR: #09296C; text-decoration: none; border-bottom-width:1px;
border-bottom-style:solid; border-bottom-color:#3860a5; }

Ist zwar keine schöne Lösung aber es funktioniert. Irgendwie.

Nun habe ich aber das Problem, dass alle verlinkten Bilder innhalb meiner
Seite ebenfalls eine Unterstreichung erhalten, (..)

Nein, um korrekt zu sein, die im a-Element enthaltenden Bilder haben
einen unteren Rahmen, allerdings nicht ihren eigenen Rahmen, sondern
den Rahmen vom a-Element. Es klingt pingelig, ist aber wichtig, um zu
verstehen, weswegen Du bei Deinen jetzt kommenden Problemlösungsversuchen
scheiterst.

IMG { border: 0 }
Das hat allerdings keine Auswirkung. (..)

Wie gesagt...

Gibt es irgendeine Möglichkeit a) die Unterstreichung der Bilder zu
verhindern, während alle anderen Links global andersfarbig unterstrichen
werden oder b) die globale andersfarbige Unterstreichung von Textlinks auf
einem anderen Wege zu regeln, ohne dass die Bilder betroffen sind?

Ich versuche mich jetzt mal auf den aktuellen Stand zu bringen. Du
hast jetzt drei Sorten von Links:

(1) <a href="blub">blub</a>
  (2) <a href="blark" class="blink">blark</a>
  (3) <a href="blobb"><img src="blobb" alt="blobb"></a>

Für (1) willst Du eine abweichende Farbe für die Unterstreichung, für (2)
willst Du irgendwas eigenes, weswegen ich das mal ignoriere und für (3)
sollen bitte keine Unterstreichungen.

Ich sehe hier mehrere Lösungen.

Erstens: Du bleibst bei der komischen bzw. phantasievollen Unterstreichung
durch den Mißbrauch (Najaa) des Rahmens. Dann mußt Du die Bilder irgendwie
von dieser Regel ausnehmen. Durch die Angabe einer Klasse. Link (1) bleibt
wie er ist, Link (2) erhält eine Klasse:

<a href="blobb" class="ohneRahmen"><img src="blobb" alt="blobb"></a>

Und dazu folgende CSS-Regeln:

a:link {text-decoration:none; border-bottom:1px solid red;}
  a.ohneRahmen:link {border:none;}
  /* Und natürlich auch die anderen Pseudoelemente */

Das bewirkt durch die Kaskadierung, daß Links mit Bildern drin sonstige
Eigenschaften des normalen Links erben, aber die Rahmeneigenschaften
überschrieben werden, hier nämlich mit nichts. Hat aber den Nachteil,
daß Du jeden Link mit einem Bildinhalt eine Klasse verpassen mußt.

Zweitens: Du gehst zurück auf die Unterstreichung via text-decoration.
Diese wird nämlich ausgesetzt, wenn im a-Element kein Textinhalt
sondern anderes, wie zum Beispiel ein Bild enthalten ist. Dummerweise
willst Du wahrscheinlich die Differenz zwischen der Farbe der
Unterstreichung und der des Linkstextes beibehalten. Da gibt es diesen
häßlichen Hack, nämlich ein nichtssagendes Element in das a-Element
einzumogeln...

<a href="blub"><span>blub</span></a>

... und diese CSS-Regeln zu erstellen:

a:link {color:red; text-decoration:underline;}
  a:link span {color:blue;}
  /* Und natürlich auch für die anderen Pseudoelemente */

Die Eigenschaft text-decoration vererbt sich nämlich nicht auf das
span-Element, sondern bleibt durchgehend rot, wie im Standard beschrieben.

http://www.w3.org/TR/REC-CSS2/text.html#lining-striking-props

Und so kann das span eine andere Textfarbe annehmen. Hat aber den Nachteil,
daß es semantisch nicht so schön ist und natürlich durch den Stress durch
das Einfügen eines spans in jeden beliebigen freilaufenden Link.

Zweieinhalbstens: Es zu lassen. Nicht die Seite, sondern diesen Unterschied
zwischen Unterstreichung und Linktext. Wäre meine Lösung.

Zweidreiviertelstens: Ca. 10 Jahre zu warten. Nämlich auf CSS 4. In CSS 3
gibt es nämlich keine Selektoren für elterliche Beziehungen, als um
Elemente X anzusprechen, die Elemente Y als Kinder haben. Ich finde das
schade, da wir für den Dokumentenbaum schon aufs Kind fixierte Beziehungen
und auf Geschwister fixierte Beziehungen haben. Aber da das entsprechende
Modul schon eine Candidate Recommondation ist, besteht da nur noch sehr
wenig Hoffnung.

http://www.w3.org/TR/css3-selectors/

  • Tim
--
tft-bm: Link, text-decoration