HTML / CSS - Praxistutorial 1 - Hauptmenü
1. Die Abschnitte
- Überblick
- Basisdefinitionen
- Aufbau
- Hauptmenü
- Untermenü
- Inhalt
- Zusatzinfos
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