Linkformatierung

Kommen wir nun zu unseren Links.
Da nicht auszuschließen ist, dass wir später auch andere Links außerhalb des Menues verwenden, stellen wir in der CSS zunächst einen Bezug zwischen dem Navi-Div und dem Link her (wie wir es auch bereits bei "ul" gemacht haben). Wir geben damit an, dass sich die nachfolgenden Linkformatierungen nur auf Links innerhalb der Navi beziehen.

#navi a
{
display: block;
padding: 5px;
width: 170px;
text-decoration: none;
background-color: #FFCC00;
border-bottom: 2px solid #eee;
font-weight: bold;
}

Speichert eure "style.css" ab und seht euch das Ergebnis in der "index.html" wieder an. Das sieht doch jetzt schon viel besser aus.

Was bedeuten nun die einzelnen Angaben?

Der "a-Tag" ist ein Inline-Element (erinnert euch bitte an dieses Kapitel ). Er wäre damit vergleichbar einem einzelnen Wort in einem längeren Text. Durch display: block; haben wir ihn jedoch zum Blockelement umfunktioniert. Vorteil: er nimmt jetzt die gesamte Breite der Navi ein und damit werden alle Links - unabhängig von ihrer Textlänge - in einem gleich großen Block dargestellt. Falls ihr daran Zweifel habt, dann entfernt noch einmal das display: block; und seht nach, was passiert. Fügt es dann aber anschließend bitte wieder ein.
Ein weiterer Vorteil von display: block; besteht darin, dass später der Hover-Effekt über den ganzen Link-Kasten geht und nicht nur im engen Bereich der Linkbeschriftung.

"Padding" ist euch bereits bekannt. Es ist der Innenabstand vom Text zu den Rändern.

Kommen wir zu width: 170px;
Wer bisher gut aufgepasst hat wird sich fragen: Wozu denn das? Schließlich haben wir obendrüber bereits "a" zum Blockelement deklariert. Und von Blockelementen wissen wir, dass sie die gesamte, ihnen zur Verfügung stehende Breite (in diesem Fall sind das die 180px Breite des Navi-Div's) automatisch einnehmen.
Also könnten wir die Width-Angabe doch auch weglassen. Stimmt - zumindest für alle "intelligenten" Browser. Löscht die width-Angabe aus der CSS und ihr werdet im Firefox und IE 7 keinerlei Unterschied erkennen.
Wer sich die Seite dagegen im IE 6 betrachtet, wird über das Aussehen der Links mit den großen Zwischenräumen doch etwas erstaunt sein. Also erweisen wir erneut dem Internet-Explorer 6 die "Ehre" und setzen allein ihm zu Liebe einen width-Wert. Wir könnten auch darauf verzichten, indem wir die li-Tags neben- statt untereinander schreiben, aber das würde nach meinem Geschmack zu unübersichtlich. Alternativ könnten für li auch noch ein display: inline setzen.
Ihr habt erkannt: CSS ist einfach (gebe es den IE 6 nicht).

Warum nehmen wir nun eine Breite von 170px, wenn unsere Navi 180px breit ist?
Dafür müssen wir wieder unser Boxmodell bemühen: Die Gesamtbreite ergibt sich aus dem eigentlichen Breitenwert zuzüglich Padding- und Borderwerten.
Hier haben wir durch 5px Padding (jeweils links und rechts) bereits 10px an Breite in Anspruch genommen, so dass für die Restbreite zur Navi eben nur noch 170px verbleiben (die Rahmenbreiten sind außerhalb der Links).

Ihr wisst sicher, dass Links von Natur aus unterstrichen sind, damit man sie als solche erkennt. Nachdem wir unser Menue jedoch betitelt haben, sollten die Links auch ohne Unterstrich als solche erkennbar sein.
Wir entfernen ihn deshalb mit text-decoration: none; Die beiden anderen Angaben sollten euch bereits aus früheren Kapiteln bekannt sein.

Kommen wir zu weiteren Feinheiten, die es bei den Links zu beachten gilt:
Ein Link kann folgende Zustände einnehmen:

a: link
Das ist der Normalzustand oder die Grunddarstellung.

a: visited
So sieht der Link aus, nachdem man ihn geklickt hat. Man soll also erkennen, dass man die entsprechende verlinkte Seite bereits besucht hat.

a: hover
In diesem Zustand befindet sich der Link, wenn man "mit der Maus drüberfährt"

a: active
Das ist der Linkzustand gerade in dem Moment, wo man mit der Maus draufklickt.

Ich persönliche erachte "active" nicht als so wichtig und werde es deshalb vernachlässigen.
Sämtlichen vier Linkzuständen können wir per CSS nun unterschiedliche Formatierungen zuweisen.

Wichtig:
Achtet unbedingt darauf dass ihr in der CSS Datei immer die Reihenfolge link, visited, hover, active einhaltet. Sonst funktionieren die Formatierungen nicht im Sinne des Erfinders.
Ihr könnt euch die Reihenfolge mit der Eselsbrücke Love Hate für die entsprechenden Anfangsbuchstaben der Linkzustände merken.

Die unter #navi a hinterlegten Angaben gelten für sämtliche Linkzustände. Wir müssen sie nun dafür nicht mehr wiederholen, sondern beschränken uns lediglich noch auf abweichende Angaben.
Schreiten wir also zur Tat und bringen für unsere Linkdarstellungen noch etwas Farbe ins Spiel.
Für die Normaldarstellung des Links verwenden wir z.B.

#navi a:link
{
color: #0000CD;
}

Bereits besuchte Links sollen so aussehen:

#navi a:visited
{
color: #F00;
background-color: #C1CDCD;
}

Für den Hover-Link schlage ich vor, mal die Farben des Normalzustandes "umzudrehen":

#navi a:hover
{
color: #FFCC00;
background-color: #0000CD;
}

Die einzelnen Werte muss ich jetzt sicher nicht mehr erläutern, ihr kennt euch da schon bestens aus. Euch gefallen die Farben nicht? Dann ändert sie doch einfach!

Noch etwas Format für die "Menue-Überschrift" und wir sind schon fast am Ende.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: