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-image: url(../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-image: url(../pics/schloesser/head_urquhart.jpg);
height: 210px;
}
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-type: none;
}
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
{
display: inline;
}
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-decoration: none;
}
div.topnavi li a
{
background-color: #eee;
color: #000;
padding: 2px 10px 3px 10px;
display: block;
float: left;
font-size: 0.8em;
border: 1px solid #000;
border-left: none;
}
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-left: 1px 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-left: 650px;
padding-top: 10px;
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt