Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 2 - Obermenü

1. Die Abschnitte

2. Eine erste Besonderheit

Bei vielen Internetauftritten sind bestimmte Navigationspunkte optisch von anderen abgehoben. Meistens handelt es sich dabei um Dinge wie "Home", "Kontakt", "Sitemap", und so weiter. Das wollen wir jetzt auch machen und zwar mit unserem schönen Schmuckphoto als Hintergrundbild.

3. Der Aufbau

Erstellt innerhalb unseres rahmen-Elements nun eine weiteres <div>, weist dem die Klasse topnavi zu und baut darin eine einfache Link-Liste ein.


<div class="topnavi">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
</div>

4. Formatierung des topnavi-Elements

Nun werden wir das ganze mit CSS formatieren. Legt in der rahmen.css eine Klasse topnavi an. Als erstes wollen wir unser Hintergrundbild einbauen. Das geschieht mit folgender Anweisung.


div.topnavi
{
  background-imageurl(../pics/schloesser/head_urquhart.jpg);
}

Wie aber kommt es zu dieser seltsamen Pfadangabe? Sollte zum Beispiel das Bild direkt über das <img>-Tag eingebunden werden, müsste die Angabe des Pfades so aussehen: "../../pics/schloesser/head_urquhart.jpg". Bei CSS-Anweisungen wird das aber relativ zur jeweiligen (!) Datei gemacht. Wir binden die rahmen.css zwar über @import in die styles.css ein, aber entscheidend ist der relative Pfad zur rahmen.css.

Nun besonders schön sieht das nicht aus. Und warum? Weil sich die Höhe des Selektors topnavi aus dem Inhalt ergibt. Daher müssen wir ihm eine feste Höhe von 210 Pixeln zuweisen. Eine Breitenangabe ist nicht nötig, da ein <div>-Tag ja zu den Block-Elementen gehört, die bekanntlich die gesamte zur Verfügung stehende Breite ausnutzen.


div.topnavi
{
  background-imageurl(../pics/schloesser/head_urquhart.jpg);
  height210px;
}

5. Formatierung der Liste

Sofort fällt auf, dass unsere Listenelemente mit Ausnahme aller IE-Versionen diese typischen Aufzählungszeichen haben. Das können wir mit der folgenden Anweisung korrigieren (html.css).


ul
{
  list-style-typenone;
}

Als nächstes wollen wir aber die Links bitteschön nebeneinander setzen und nicht untereinander. Also, wozu gehören die einzelnen Aufzählungen? Ja, zu den Block-Elementen. Und die stehen bekanntlich immer untereinander. Also verwandeln wir die in der html.css in ein Inline-Element.


div.topnavi li
{
  displayinline;
}

6. Formatierung der Links

Bevor wir jetzt anfangen, unsere Liste zu positionieren, müssen wir erst mal die Links formatieren. Nehmt in der links.css jetzt mal folgende Formatierungen vor.


a
{
  text-decorationnone;
}

div.topnavi li a
{
  background-color#eee;
  color#000;
  padding2px 10px 3px 10px;
  displayblock;
  floatleft;
  font-size0.8em;
  border1px solid #000;
  border-leftnone;
}

div.topnavi li a:hover
{
  background-color#DDE8F3;
}

Erläuterung

Da es mittlerweile vielfach Usus ist, Links nicht mehr mit einem Unterstrich zu versehen, klemmen wir das mit dem "allgemeinen" a-Selektor ab. Warum aber steuern wir unsere Links mit div.topnavi li a an? Ein .topnavi a täte es doch auch? Täte es, wenn man nicht damit rechnen muss, dass zum Beispiel irgendein "Kreativer" da noch einen völlig anderen Link irgendwo unterbringen will. Mein Tipp: macht euch wirklich die Mühe, die Selektoren entsprechend ihrer Verschachtelungstiefe aufzubauen. Anstelle des li könnte man auch ul schreiben, da Letzteres aber zwingend ein li erwartet, mache ich das so. Ansonsten sind eigentlich nur noch zwei Anweisungen von Bedeutung.

Beim padding gilt bei den Innenabständen die Reihenfolge oben, rechts, unten und links. Dann geben wir den Links einen schwarzen Rahmen mit einem Pixel Dicke und nehmen den an der linken Seite wieder weg. Aber warum? Ganz einfach, ohne diese Eigenschaft hätten wir einen zwei Pixel dicken Strich zwischen den Links und das sieht nicht so toll aus.

Aber leider fehlt der jetzt beim "Home"-Link. Daher kommen wir leider nicht umhin, für diesen Sonderfall eine spezielle Klasse zu definieren.


/* links.css */
div.topnavi li a.home
{
  border-left1px solid #000;
}
...
<!-- urquhuart.htm -->
<li><a href="#" class="home">Home</a></li>

Ein Hinweis

Es geht auch einfacher, aber dazu komme ich erst sehr viel später.

7. Positionierung

Da unsere Liste bisher links oben anklatscht, wollen wir die jetzt weiter nach rechts unten verschieben. Dabei gibt es zwei Möglichkeiten, über die Angabe einer Position, oder durch Änderung des Abstandes. Ich persönlich bevorzuge die zweite Möglichkeit. Allerdings müsst ihr da ein wenig aufpassen. Sobald ihr ein margin-top vergebt, rutscht in den meisten Browsern alles inklusive eures Hintergrundbildes um den entsprechenden Wert nach unten.

Ich denke mal, dass das an den idiotischen Collapsing margins liegt. Denn die einzigen Browser, die das nicht machen, sind der IE6 und 7. Standards können auch mal ein Kreuz sein, besonders wenn man sich daran hält.


div.topnavi ul
{
  margin-left650px;
  padding-top10px;
}

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