05.06.2009
Horizontale Zentrierung einer gefloateten Listen-Navigation
Für eine horizontale Listen-Navigation werden die einzelnen Listeneinträge in der Regel gefloatet um sie nebeneinander anzuordnen.
Dies hat zur Folge, dass die Navigation dann entsprechend links- oder rechtsbündig, jedoch nicht zentriert dargestellt wird.
Eine horizontale Zentrierung wäre möglich, indem man die Breite des Menüs berechnet und die Liste mit "margin: 0 auto;" zentriert. Problematisch wird diese Methode, wenn die Einträge unterschiedlich lang sind, oder wenn später weitere Einträge hinzu kommen.
Mit der folgenden, bei Stu Nicholls veröffentlichten Methode lässt sich eine horizontale Zentrierung einfach und universell erreichen. Basis ist folgender HTML-Code, den es anschließend per CSS zu formatieren gilt:
<div class="container">
<ul id="navi">
<li><a href="#">Link kurz</a></li>
<li><a href="#">Link mittel</a></li>
<li><a href="#">Link laaaaaaang</a></li>
</ul>
</div>
Nachfolgend wird auf die Formatierung der verwendeten Elemente eingegangen; im Anschluss wird der CSS-Code komplett dargestellt:
Formatierung des Containers
Der umfassende container wird links gefloatet und erhält eine Breite von 100 Prozent. Damit erstreckt er sich über die gesamte Seitenbreite bzw. über die Breite seines übergeordneten Elements. Ein overflow: hidden; ist erforderlich, damit die später zu positionierende Liste nicht aus ihm herausragt.
Soll die Navi eine Hintergrundfarbe erhalten, kann diese ebenfalls dem "container" zugewiesen werden, da er sich über die Gesamtbreite erstreckt.
Formatierung der Liste
Die Navigationsliste #navi wird mit float: left; ebenfalls links gefloatet, mit margin: 0 auto; zentriert und 50% von ihrem "Normalstandort" nach rechts verschoben (position: relative; left: 50%;). Ihr "Anfang" ist damit genau in der Seitenmitte.
Formatierung der Listeneinträge
Um die Listeneinträge nebeneinander anzuordnen erhalten sie ein float: left;.
Blicken wir nochmal kurz auf die v.g. Listenformatierung zurück: Ihr linker Rand befindet sich genau auf der Seitenmitte bzw. in der Mitte des übergeordneten Elements. An dieser Stelle (rechts von der Mitte) würde folglich auch der erste Listeneintrag stehen. Da er jedoch zentriert sein soll, verschieben wir ihn um die Hälfte seiner Breite mit position: relative; right: 50%; nach links und damit sind unsere Listeneinträge bzw. die gesamte Navigation horizontal zentriert.
Formatierung der Links
Die Linkformatierung selbst hängt von euren idividuellen Vorstellungen ab und kann wie gewohnt für die jeweiligen Linkzustände erfolgen.
Kompletter CSS-Code
Unserer Demoseite liegt somit folgender CSS-Code zugrunde:
.container {
clear: both;
float: left;
width: 100%;
overflow: hidden;
background: #024c68;
font-family: Verdana;
font-size: 1em;
}
#navi {
float: left;
position: relative;
left: 50%;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#navi li {
float: left;
position: relative;
right: 50%;
}
#navi a {
width: auto;
display: block;
padding:0 10px;
line-height: 1.5em;
color: #fff;
background: #ff8500;
border:1px solid #024c68;
text-decoration:none;
}
#navi a:hover {
background: #ffa340;
color: #000;
}
Das war's dann auch schon mit unserer "horizontal zentrierten, links gefloateten Listen-Navigation", die in den gängigen Browsern problemlos funktionieren sollte.
Hinweis:
Einen Nachteil hat dieses Konstrukt aber dennoch: Wenn die Summe der Link-Breiten größer ist als 50% der Gesamtbreite des übergeordneten Elements erscheint zumindest im Internet Explorer eine horizontale Scrollbar im Browserfenster. Dies könnte man abstellen, indem man die Navi-Breite auf 50% begrenzt. Allerdings hat das zur Folge, dass links und rechts der zentrierten Links je 25% an Platz ungenutzt bleibt.