Hauptmenü

Untermenü

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
{
  height26px;
  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
{
  displayinline;
}

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-left40px;
  height26px;
  border-left200px 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-size0.9em;
  font-weightbold;
  padding5px 15px 5px 15px;
  displayblock;
  floatleft;
  border1px 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