CSS Kochbuch

KAPITEL 6 Links und Navigation ( S. 231)

6.0 Einführung
Ohne Links wäre das Web sinnlos. Links ermöglichen es, Informationen über mehrere Websites hinweg zu verfolgen, unabhängig davon, wo auf der Welt die Server für diese Sites stehen. 1996 erstellte Jakob Nielsen, ein Experte für die Benutzerfreundlichkeit des Webs, eine Liste der 10 gröbsten Fehler bei der Gestaltung von Webseiten, die inzwischen immer wieder auf den neuesten Stand gebracht wurde (siehe http://www.useit.com/alertbox/ 9605.html).

Einer dieser Fehler war seiner Meinung nach die Verwendung von nichtstandardkonformen Farben für Links. Nielsen empfahl, Links auf Seiten, die der Benutzer noch nicht besucht hatte, prinzipiell blau darzustellen, lila oder rot standen für bereits besuchte Links. Diese Überlegungen zielten auf eine größtmögliche Konsistenz ab, während ästhetische Gesichtspunkte weniger eine Rolle spielten. Durch die Verwendung von CSS schließen sich Konsistenz und Ästhetik aber nicht mehr gegenseitig aus. Mittlerweile können Links, die schließlich einen wesentlichen Teil des Webs ausmachen, konsistent und gleichzeitig visuell ansprechend dargestellt werden. In diesem Kapitel besprechen wir die Möglichkeiten, Weblinks zu verschönern.

Sie werden lernen, die Unterstreichungen von Links zu entfernen, das Aussehen des Cursors zu verändern, Rollover-Effekte auch ohne JavaScript zu erzielen, ein horizontales Karteireiter- Menü (Tabs) zu erstellen und vieles mehr.

6.1 Die typischen Link-Unterstreichungen entfernen (und andere Dekorationen hinzufügen)
Problem
Standardmäßig sind die Links in Webdokumenten unterstrichen. Diese Unterstreichungen sollen entfernt werden, wie in Abbildung 6-1 gezeigt.

Lösung
Verwenden Sie die Eigenschaft text-decoration zusammen mit dem Pseudoklassen- Selektor für besuchte und unbesuchte Links:

a:link, a:visited { text-decoration: none,

}

Diskussion
Mit Hilfe der Pseudoklassen :link und :visited können Sie die Links in einem Webdokument mit Stildefinitionen versehen. Mit der Pseudoklasse :link werden Links ausgewählt, die noch nicht besucht wurden, während :visited für bereits besuchte Links steht. Der Eigenschaft text-decoration können fünf verschiedene Werte zugewiesen werden (siehe Tabelle 6-1).

Oft wird die Eigenschaft text-decoration eingesetzt, um die Präsentation einer Webseite zu verbessern. Anstatt alle Links in einem Dokument zu unterstreichen, setzen Designer text-decoration gern auf den Wert none und verändern zusätzlich die Hintergrund- oder Textfarbe des Links oder sogar beides:

a:link, a:visited {

text-decoration: none,

background-color: red,

color: white,

}

Um auch Besuchern gerecht zu werden, die vielleicht farbenblind sind und daher einen Link nicht unbedingt an der Farbe erkennen können, stellen manche Designer den Linktext zusätzlich fett gedruckt dar:

a:link, a:visited {

font-weight: bold,

text-decoration: none,

color: red,

}

Auch der Wert line-through kann nützlich sein, um anzuzeigen, dass ein Link bereits besucht wurde, er wird dann wie ein abgehakter Tagesordnungspunkt dargestellt.