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 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>
Die Listenelemente platzieren wir dann wie gehabt nebeneinander, also das schon Bekannte:
/* 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.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt