Linkunterstreichungs-Farbe ändern

[Karl Urban]

Hallo,

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. 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; }

Die Unterstreichung des Links ist also eigentlich gar keine richtige Unterstreichung sondern ein unterer Rahmen. Nun habe ich aber das Problem, dass alle verlinkten Bilder innhalb meiner Seite ebenfalls eine Unterstreichung erhalten, was sich nicht so gut macht. :-)

Ich habe versucht, durch Neuzuweisungen der Rahmen aller Bilder diesen Effekt rückgängig zu machen:

IMG { border: 0 }

Das hat allerdings keine Auswirkung. Selbst wenn ich border hier auf 1 setze, bleibt unter dem normalen Rahmen eine Unterstreichung aus der Linkklasse.

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 danke im Voraus für jede Hilfe.

Viele Grüße
Karl Urban

[rainer groth]

Hallo Karl,

leider hast Du etwas missverstanden.

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.

Das ist AFAIK NICHT moeglich.

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; }

Gebe doch einmal 'text-decoration' den Wert 'underlined' (die Standart-Einstellung mancher Browser) :-)

Mit Deiner CSS-Definition legst Du fuer einen (1 !) Link-Zustand fest, dass er nicht unterstrichen werden soll.

Dann legst Du fest, dass dieses Link-Element einen unteren Rahmen in einer bestimmten Farbe bekommen soll.

Nun habe ich aber das Problem, dass alle verlinkten Bilder innhalb meiner Seite ebenfalls eine Unterstreichung erhalten, was sich nicht so gut macht. :-)

Dies ist Dein Missverstaendnis: sie erhalten KEINE Unterstreichung, sondern einen unteren Rahmen !

Ich habe versucht, durch Neuzuweisungen der Rahmen aller Bilder diesen Effekt rückgängig zu machen:

Dies kann nicht zum Erfolg fuehren, weil es sich nicht um 'img'-Rahmen, sondern um 'a'-Rahmen handelt (in denen zufaelligerweise 'img' sind).

gruesse
rainer groth

[rainer groth]

Hallo Karl,

kleine Korrektur:

Gebe doch einmal 'text-decoration' den Wert 'underlined' (die Standart-Einstellung mancher Browser) :-)

Gebe doch einmal 'text-decoration' den Wert 'underline' (die Standart-Einstellung mancher Browser) :-)

gruesse
rainer groth

[Christoph Schnauß]

hi,

Gebe doch einmal 'text-decoration' den Wert 'underline' (die Standart-Einstellung mancher Browser) :-)

Wenn dies eine "Standard-Einstellung" ist (übrigens in allen Browsern), braucht man sie nicht extra anzugeben. Im übrigen findet sich in http://selfhtml.teamone.de/css/eigenschaften/schrift.htm#text_decoration auch eine kurze Auflistung der Optionen, die für "text-decoration" zulässig sind.

Grüße aus Berlin

Christoph S.

[rainer groth]

Hallo Christoph,

Gebe doch einmal 'text-decoration' den Wert 'underline' (die Standart-Einstellung mancher Browser) :-)
Wenn dies eine "Standard-Einstellung" ist (übrigens in allen Browsern), braucht man sie nicht extra anzugeben.»»

Verdeutlicht aber in Kombination mit 'border'-Definitionen den entscheidenden Punkt.

Frage: ist mir im NN 4.x etwas mit unterstrichenen textlinks entgangen ? Ich habe naemlich bislang keine gesehen...

gruesse
rainer groth

[Christoph Schnauß]

guten Morgen,

Frage: ist mir im NN 4.x etwas mit unterstrichenen textlinks entgangen ?

Keine Ahnug. Ich benutze doch keine Museumsstücke "scnr"

Grüße aus Berlin

Christoph S.

[rainer groth]

Hallo Christoph,

Keine Ahnug. Ich benutze doch keine Museumsstücke "scnr"

SCNR: Gut fuer Dich, dass Du keine Versicherungskonzerne/Banken zu Deinen Kunden zaehlst :-)

gruesse
rainer groth

[nag]

hi

Frage: ist mir im NN 4.x etwas mit unterstrichenen textlinks entgangen ? Ich habe naemlich bislang keine gesehen...

ist dies eine rethorische frage, oder ist sie ironisch gemeint?
wenn ja - dann ist dieses posting hier zu ende.
mfg NAG

wenn nein - NN 4.78 kennt unterstrichene textlinks.
mfg NAG

[Christoph Schnauß]

morgens,

ich möchte via CSS bestimmen, dass alle normalen Links ... in einer anderen Farbe unterstrichen werden als der Linktext

Ähm, kannst du mal differenzieren, was der Unterschied zwischen "normalen links" und "Linktext" ist?

A:link { COLOR: #09296C; text-decoration: none; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#3860a5; }

Abgesehen davon, daß ich grundsätzlich kleine Buchstaben empfehlen würde: was hat hier "border" zu suchen? Laß das einfach weg.
Allerdings: du hast mit "text-decoration:none" vorgegeben, daß es gar keine "Unterstreichungen" geben soll. Im Nachhinein hast du dann "border" eingefügt. Mir ist eine solche Konstruktion noch nie begegnet, daher bin ich nicht sicher, ob sie überhaupt etwas taugt. Auf jeden Fall wirst du die "Unterstreichung" nur mit "text-decoration" festlegen können.

Die Unterstreichung des Links ist also eigentlich gar keine richtige Unterstreichung sondern ein unterer Rahmen.

Richtig. Und was hast du (optisch) davon? Machen das alle benutzten Breowser so mit?

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

Was sind jetzt "verlinkte Bilder", wie hast du deine Bilder verlinkt, wenn nicht mit <a> (Codeschipsel bitte)?

Ich habe versucht, durch Neuzuweisungen der Rahmen aller Bilder diesen Effekt rückgängig zu machen:
IMG { border: 0 }

Was nicht funktionieren kann, wenn für <a> eine andere Formatierung bereits existiert. Du möchtest einen Rahmen auf Null zurücksetzen, der für das angegebene Element gar nicht relevant ist, da er für <a> definiert wurde und nicht für <img>.

Gibt es irgendeine Möglichkeit

Unter Umständen ja. Dazu müßten wir aber deine CSS-Angaben sehen, im Detail. Die wörtliche Beschreibung ist schwer in "Code" zu übersetzen.

Grüße aus Berlin

Christoph S.

[Tim Tepaße]

Hallo Christoph,

Mir ist eine solche Konstruktion noch nie begegnet, daher bin ich nicht
sicher, ob sie überhaupt etwas taugt.

Mir schon öfters, immer für den von Karl gewünschten Effekt. Aber auch
bei anderen Elementen. Für sowas wie <abbr> bzw. <acronym> heißt es
in den Browserstylesheets sogar, daß die gepunktete Unterstreichung
mittels Rahmen zu erreichen ist.

• Tim

[wahsaga]

hi,

ich möchte via CSS bestimmen, dass alle normalen Links ... in einer anderen Farbe unterstrichen werden als der Linktext
Ähm, kannst du mal differenzieren, was der Unterschied zwischen "normalen links" und "Linktext" ist?

A:link { COLOR: #09296C; text-decoration: none; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#3860a5; }
Abgesehen davon, daß ich grundsätzlich kleine Buchstaben empfehlen würde: was hat hier "border" zu suchen?

es soll das bewirken, was im satz darüber (zugegebener maßen nicht allzu verständlich) als anforderung geäussert wurde:
das die betroffenen links beim hovern eine art simulierte unterstreichung mittels eines bottom-borders erhalten, die in einer anderen farbe als der textfarbe erfolgen soll.
und sowas ist nur mit einem rahmen möglich, mit text-decoration jedoch nicht.

gruss,
wahsaga

[Tim Tepaße]

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

[Karl Urban]

a:link {text-decoration:none; border-bottom:1px solid red;}
  a.ohneRahmen:link {border:none;}

Hallo Tim,

ich glaube ich werde es so versuchen. Ist zwar umständlich, aber ich habe glücklicherweise nicht so viele verlinkte Bilder auf meiner Seite bzw. viele von denen erhalten sowieso eine Klasse.

Vielen Dank euch allen für die Mühe! ;-)
Karl

[Karl Urban]

Hallo,

ich hab noch nen kleinen Nachtrag. Ich habe gerade durch einen Zufall entdeckt, dass ich mein Problem auch beheben kann, in dem ich allen verlinkten Bildern eine Ausrichtung zuweise:

<img src="url" align="left|right">

Danach verschwindet der untere Rahmen, den ich als Unterstreichung bei Textlinks missbrauchen will. Also erklären kann ich mir das nicht - aber es funktioniert. ;-)

Grüße
Karl

[MudGuard]

Hi,

Danach verschwindet der untere Rahmen, den ich als Unterstreichung bei Textlinks missbrauchen will. Also erklären kann ich mir das nicht - aber es funktioniert. ;-)

In wie vielen verschiedenen Browsern hast Du das denn getestet?
In allen?

cu,
Andreas

[Karl Urban]

In wie vielen verschiedenen Browsern hast Du das denn getestet?
In allen?

IE 6.x, Netscape 4.7 & 7.0, Opera 7.2, Mozilla 1.3