HTML / CSS - Praxistutorial 1 - Hauptmenü

1. Die Abschnitte

2. Die Links

Als erstes legen wir mal unsere Links an. Da es die anderen Seiten natürlich nicht gibt, hauen wir einfach mal einen Lattenzaun beim href rein, da bleiben wir bei einem versehentlichen Klick auf unserer Seite. Öffnet also wieder die urquhart.htm und schreibt bitte Folgendes in das div-Element navi.


<a href="#">Home</a>
<a href="#">Geschichte</a>
<a href="#">Landschaft</a>
<a href="#">Schlösser</a>
<a href="#">Wiskey</a>
<a href="#">Tiere</a>
<a href="#">Menschen</a>

3. Die Formatierung

Sieht ziemlich bescheiden aus, hellblaue, unterstrichene Schrift auf dunkelblauem Hintergrund. Denn das ist die vorgegebene Formatierung von Links. Als erstes möchten wir die Unterstriche bei den Links entfernen, weil es irgendwie mies aussieht. Dazu reicht eine einzige Anweisung in der styles.css aus.


a
{
  text-decoration: none;
}

Als nächstes wählen wir die Vorder- und Hintergrundfarbe aus. Dabei orientieren wir uns an der schottische Nationalfahne mit weißem Andreaskreuz auf dunkelblauem Hintergrund. Um jetzt nicht eine spezielle Klasse für unsere Links definieren zu müssen, greifen wir auf einen Trick zurück, den ich unter dem Punkt Einschränkung erklärt habe. Da alle Links im Bereich .navi identisch aussehen sollen, schreiben wir in unsere styles.css folgenden Code:


.navi a
{
  color: #fff;
  background-color: #002274;
}

Mit dieser Notation definieren wir, dass nur alle Links innerhalb des Elementes .navi entsprechend formatiert werden. Leider sieht das Ergebnis nicht berauschend aus. Daher nehmen wir ein paar Ergänzungen vor, so dass unsere Anweisung so aussieht.


.navi a
{
  color: #fff;
  background-color: #002274;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 10px 5px 10px;
}

4. Der RollOver-Effekt

Dafür greifen wir auf die Pseudoklasse :hover zurück und drehen einfach die Farben um.


.navi a:hover
{
  color: #002274;
  background-color: #fff;
}

Leider sieht das nicht so aus, wie wir es haben möchten. BDenn in allen Browsern haben wir einen Treppeneffekt. Um nun den beliebten RollOver-Effekt hinzubekommen, müssen wir aus dem Inline-Element a ein Block-Element machen. Und damit die Buttons nebeneinander stehen? Genau, den Textfluss ändern. Fügt der .navi a also das hier ein.


/* float macht automatisch aus einem Inline- ein Block-Element*/
float: left;

Da der weiße Hintergrund beim Überfahren mit der Maus etwas blöde aussieht, packen wir einen Rahmen um die Links, aber nicht beim :hover sondern?


border: 1px solid #002274;

Leider haben wir jetzt wieder ein Treppchen in der Menüleiste und die linke Navigation steht auch völlig falsh. Warum? Nun, mit dem Zuweisen der border-Eigenschaft haben wir in der Höhe auf einmal 2 Pixel mehr. Das müssen wir ausgleichen, indem wir dem .navi-Selektor eine Höhe von 26 Pixeln geben.

5. Aktiver Link

Zu guter Letzt wollen wir noch den aktiven Link (in diesem Fall "Schlösser") auszeichnen. Normalerweise wird der aktive Link über die Pseudoklasse :active definiert. Leider funktioniert das erst, wenn man auf der jeweiligen Seite noch mal auf den entsprechenden Link klickt. Damit der Effekt von vornherein eintritt, kommen wir um die Definition einer Klasse nicht herum. Dupliziert einfach .navi a:hover und macht ein


.navi .aktiv
{
  color: #002274;
  background-color: #fff;
}

daraus. Weist die Klasse dann dem entsprechenden Link zu.


<a href="#" class="aktiv">Schlösser</a>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt