HTML / CSS - Praxistutorial 2 - Hauptmenü
1. Die Abschnitte
2. Jetzt wird es kompliziert
Euch ist sicher aufgefallen, dass unser Hintergrundbild einen optisch abgehobenen Bereich hat. Den nutzen wir nun aus, um
unser Hauptmenü ein wenig zu verschönern. Erstellt in der urquhart.htm unterhalb von
<div class="topnavi"> ein weiteres <div>-Element und weist dem die Klasse
mainnavi zu. In der rahmen.css legen wir die Hintergrundfarbe und leider auch eine notwenige
Höhe fest, da wir hier wieder ordentlich floaten werden.
div.mainnavi
{
height: 26px;
background-color: #002274;
}
3. Die Liste
Danach baut ihr in eurem HTML-Dokument die Hauptnavigation als Liste ein innerhalb von <div class="mainnavi">
ein.
<ul>
<li><a href="#">Geschichte</a></li>
<li><a href="#">Landschaft</a></li>
<li><a href="#" class="aktiv">Schlösser</a></li>
<li><a href="#">Wiskey</a></li>
<li><a href="#">Tiere</a></li>
<li><a href="#">Menschen</a></li>
</ul>
Jetzt fällt aber etwas auf. Bei den modernen Browsern haben wir einen 26-Pixel hohen blauen Balken, bei Internet Explorer 6 ist
der aber wesentlich höher. Nun, das ist einer von vielen Bugs in diesem Browser. Denn der zieht alles auf eine komplette Höhe, was nicht
bei drei auf den Bäumen ist. Ihr werdet noch andere kennen lernen. Geht nun genau so vor wie bei topnavi und verwandelte
die Listenpunkte in Inline-Elemente.
/* html.css */
div.mainnavi li
{
display: inline;
}
4. Die Ausrichtung
Jetzt möchten wir einen hellen blauen Balken unterhalb der optischen Erhebung unseres Hintergrundbildes einbauen. Dazu müssen
wir in der html.css folgende Anweisung einbauen.
div.mainnavi ul
{
margin-left: 40px;
height: 26px;
border-left: 200px solid #5671b1;
}
Erläuterung
margin-left richtet die Navigation linksbündig zum aufgehellten Bereich des Hintergrundbildes aus. Die Höhe
muss angegeben werden, da wir die einzelnen Listenelemente aus dem normalen Fluss genommen haben, und der linke Rahmen
ist eine optische Anpassung an unser Bild.
5. Die Links
Da übernehmen wir die Optik aus unserem ersten Tutorial, nur vergrößern wir ein wenig den Innenabstand nach links und rechts.
Allerdings verschachteln wir den Selektor anhand seiner Tiefe und arbeiten mit einer relativen Schriftgröße (links.css).
div.mainnavi li a
{
color: #fff;
background-color: #002274;
font-size: 0.9em;
font-weight: bold;
padding: 5px 15px 5px 15px;
display: block;
float: left;
border: 1px solid #002274;
}
div.mainnavi li a:hover
{
color: #002274;
background-color: #fff;
}
div.mainnavi li a.aktiv
{
color: #002274;
background-color: #fff;
}
Auch ich lerne nie aus
Lange Zeit wusste ich selber nicht, dass ein float auch automatisch ein display: block nach sich zieht.
Das bedeutet für unsere obige Formatierung, dass wir beim div.mainnavi li a die Anweisung
display: block; getrost weg lassen können.