Navigation horizontal zentrieren

Es gibt mehrere Möglichkeiten, seine horizontale Navigation unbekannter Breite, zu zentrieren. Hier folgt nun eine kurze Anleitung, die zeigen soll, wie einfach es ist, seine Navigation zu zentrieren.

Als Beispiel soll hier eine einfache Liste dienen, mit gerade mal vier Einträgen.

HTML-Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
   <title>Navigation zentrieren</title>
   <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>

<body>
   <ul id="navi">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Anbieterkennzeichnung</a></li>
    <li><a href="#">Block</a></li>
   </ul>

</body>
</html>	

1. Globale Style-Angeben

* {       
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}

Der Universalselektor dient wieder zum globalen Rücksetzen der Außen- und Innenabstände. Da die Navigation aus einer unsortierten Liste besteht, werden mit list-style:none; alle Schmuckpunkte aus der Liste verbannt. Weiterhin werden auch keine Textunterstreichungen benötigt, was mit text-decoration:none; erreicht wird.

2. Style-Angaben für die Liste

#navi {
 text-align:center;
}

ul#navi li {
 display:inline-block;
 background:#333;
 color:#fff;
 margin-left:-3px; 
 margin-bottom:1px; 
}

Mit der Anweisung #navi { text-align:center; } wird eine wichtige Voraussetzung geschaffen, um eine horizontale Navigation zu zentrieren. Damit diese Regel auch zur Anwendung kommt, müssen alle LI-Elemente zum Inline-Element degradiert werden. Wobei sich display:inline-block: nach außen wie ein Inline und nach innen, wie ein Block-Element verhält. Das hat den Vorteil, dass hier auch Höhen- und Breitenangaben gemacht werden können, um bspw. auch Hintergrundgrafiken verwenden zu können.

Die Regel margin-left:-3px; korrigiert die Abstände von ca. 4 Pixel, die durch display:inline-block; verursacht werden. Zur Information sei noch erwähnt, dass der Abstand unter Linux (Ubuntu 11.04) ca. 5 Pixel beträgt. Der Abstand nach unten, der mit margin-bottom:1px; festgelegt wurde, ist optional und dient nur dazu, dass bei einem eventuellen Umbrechen der Navigationspunkte der Abstand von einem Pixel gewährleistet bleibt.

3. Style-Angaben fur alle A-Elemente

Nun folgen noch die obligatorischen Styles aller Links, die aber nicht weiter erläutert werden.

#navi a {
 display:block;
 padding:10px;
 color:#fff;
}

#navi a:hover {
 background:#a33;
}

Das war's auch schon und die horizontale Navigation ist nun zentriert.

Hier nun das Ergebnis

Gut es funktioniert, aber nicht im IE kleiner 8

Jupp, stimmt. Das liegt einfach daran, dass diese Browser display:inline-block; nicht kennen. Null Problemo, würde Alf jetzt sagen. Dann lassen wir einfach das block weg. Denn display-inline; verstehen ja fast alle Browser. Mit Conditional Comments bekommen nur die IE's kleiner 8 die folgenden Styles zu sehen.

4. Styles für den IE kleiner 8

<!--[if lt IE 8]>
<style type="text/css">
li {
 display:inline;
 margin-left:1px;
}

#navi a {
 position:relative; /* Für IE kleiner 7 (darf der 7er auch sehen -egal-)*/
}
</style>
<![endif]-->

Nun klappt's auch im IE kleiner 8.

Ich wünsche euch viel Spaß beim Nachbauen und Weiterentickeln.

erstellt am 25.02.2012

nach oben