Links mit CSS grafisch Darstellen

[Timo]

Hallo,

ich möchte die Links einer Webseite mit CSS grafisch darstellen. Ich verwende dafür den folgeden Code:

CSS-Datei:

a:link.news  {
 text-decoration: underline;
 font-weight: normal;
 color:#000000;
}
a:visited.news {
 text-decoration: underline;
 font-weight: normal;
 color:#6A7070;
}
a:hover.news {
 text-decoration: underline;
 font-weight: bold;
 background-color:#FFFFFF;
}
a:active {
 text-decoration: underline;
 font-weight: normal;
 background-color:#6A7070;
}

HTML-Datei:

<a href='news_ergebnis.php?&news_id=17' class='news'>mehr...</a>

Nun habe ich folgendes Problem: Die Links werden wie in der CSS-Datei beschrieben angezeigt, leider aber nur die Link, die bereits besucht wurden. Neue Links werden in dem "Standard-Blau" angezeigt. Was muss ich machen, damit auch die noch nicht besuchten Link in einer von mir definierten Farbe angezeigt werden? Ich dachte eigentlich, dass der a:link.news-Teil dafür zuständig ist.

Für Hilfe wäre ich dankbar!

MfG

Timo

[Sönke Tesch]

Nun habe ich folgendes Problem: Die Links werden wie in der CSS-Datei beschrieben angezeigt, leider aber nur die Link, die bereits besucht wurden. Neue Links werden in dem "Standard-Blau" angezeigt.

a:link.news  {

Wohl falsch rum, beachte die Position von Pseudoklasse und Klasse in folgendem Beispiel aus http://w3.org/TR/CSS2/selector.html#link-pseudo-classes:

If the following link:

<a class="external" href="http://out.side/">external link</a>

has been visited, this rule:
  a.external:visited { color: blue }

will cause it to be blue.

HTML-Datei:

<a href='news_ergebnis.php?&news_id=17' class='news'>mehr...</a>

------------------------------^

Das ist ebenfalls nicht richtig (hat aber wohlgemerkt mit dem CSS-Problem nichts zu tun). Das Und-Zeichen & darf in HTML-Dateien niemals alleine stehen, weil es als Einleitung für Sonderzeichen dient. Willst Du ein &, benutze die Umschreibung & :

<a href="news_ergebnis.php?&news_id=17" ...
-----------------------------^^^^^

Gruß,
  soenk.e

[Timo]

Hallo soenk.de,

danke für Deine Antwort. Ich habe jetzt die von Dir genannten Änderungen vorgenommen - trotzdem werden noch nicht besuchte Links in blau angezeigt. Der Code sieht jetzt wie folgt aus:

HTML:

<a class="news" href='news_ergebnis.php?&news_id=17'>mehr...</a>

CSS:

a.news:link  {
 text-decoration: underline;
 font-weight: normal;
 color:#000000;
}
a.news:visited {
 text-decoration: underline;
 font-weight: normal;
 color:#6A7070;
}
a.news:hover {
 text-decoration: underline;
 font-weight: bold;
 background-color:#FFFFFF;
}
a.news:active {
 text-decoration: underline;
 font-weight: normal;
 background-color:#FFFFFF;
}

Vielleicht sollte ich noch dazusagen, dass das ganze dynamisch über PHP aufgebaut wird. Aber trotzdem sollte es doch jetzt funktionieren...

Hast Du vielleicht noch Ideen? Ich verstehe echt nicht, warum die Links in blau angezeigt werden.

MfG

Timo

[Sönke Tesch]

danke für Deine Antwort. Ich habe jetzt die von Dir genannten Änderungen vorgenommen - trotzdem werden noch nicht besuchte Links in blau angezeigt. Der Code sieht jetzt wie folgt aus:

Vielleicht sollte ich noch dazusagen, dass das ganze dynamisch über PHP aufgebaut wird. Aber trotzdem sollte es doch jetzt funktionieren...

In der Tat, mit PHP hat das ganze absolut garnichts zu tun.

Hast Du vielleicht noch Ideen? Ich verstehe echt nicht, warum die Links in blau angezeigt werden.

Nein, ich kann nur noch die relevante Stelle in der CSS2-Doku einbringen ("One pseudo-element may be appended to the _last_ simple selector in a chain, [..]" http://www.w3.org/TR/CSS2/selector.html) und feststellen, daß es möglicherweise auch mit Deinem Browser zusammenhängt.
Zum Testen solltest Du _nur_ die Gecko-Browser (Mozilla, Netscape 6+), den IE 6 oder Opera einsetzen, und zwar im Standardmodus (http://www.hut.fi/~hsivonen/doctype.html).

Bei allen anderen Browsern/Modi lohnt sich eine detailiertere Suche IMHO nicht, weil das Verhalten von Browser zu Browser unterschiedlich ist - hast Du ein Problem ausgemerzt, taucht dafür ein anderer auf..

Gruß,
  soenk.e

[Sönke Tesch]

Nein, ich kann nur noch die relevante Stelle in der CSS2-Doku einbringen ("One pseudo-element may be appended to the _last_ simple selector in a chain, [..]" http://www.w3.org/TR/CSS2/selector.html)

Die Adresse sollte http://www.w3.org/TR/CSS2/selector.html#q2 sein ("Selector Syntax"), und die Behauptung, daß die Pseudoklasse am Ende stehen muß, nehme ich in Bezug auf Selektoren zurück. Ich habe das Wörtchen "chain" falsch gedeutet.
Etwas weiter oben heißt es eindeutigerweise:

"A simple selector is either a type selector or universal selector
   followed immediately by zero or more attribute selectors, ID
   selectors, or pseudo-classes, in any order."

Klassen (a.news) gehören zu den Attributselektoren, insofern sollte es wurscht sein, ob es a.news:link oder a:link.news heißt.

Gruß,
  soenk.e

[MudGuard]

Hi,

insofern sollte es wurscht sein, ob es a.news:link oder a:link.news heißt.

In der CSS-2-Theorie ist es egal.
In CSS 1 war es noch anders, da mußte die Pseudoklasse ans Ende.
Und manche Browser können es bis heute nicht anders...
cu,
Andreas

[x-VieW]

Hi Timo,
Also bei mir wird das Link richtig angezeigt.
Hast du den Namen in der CLASS="news" richtig angegeben???
Gruss
x-VieW

[Detlef Graff]

Hi Timo,

Ich hatte mal ein ähnliches Problem.
Versuche es doch einmal so:

CSS-Datei:

a.news  {
 text-decoration: underline;
 font-weight: normal;
 color:#000000;
}
a:link.news  {}
a:visited.news {
 color:#6A7070;
}
a:hover.news {
 font-weight: bold;
 background-color:#FFFFFF;
}
a:active {
 background-color:#6A7070;
}

Gruss
Detlef