Zentriertes Layout mit horizontaler Navigation
Nach obenStrukturplanung
Das Layout soll zentriert werden ein waagerechtes Menü bekommen und dabei in 4 Bereiche gegliedert werden: Seitenkopf (Header), Navigation, Inhalt und Footer.
Theoretisch bräuchte man also für das Grundgerüst nur eine Überschrift (h1-tag), Listennavigation, Inhaltsbereich (div) und einen Abstatz für den Seitenfuß (Footer). Da es etwas umständlich wäre jedes Element einzeln zu zentrieren werden die vier Elemete noch einmal zu einem Bereich zusammengefasst. Der Vorteil ist, dass man nur ein Element ausrichten muss und dass man zusätzliche Gestaltungsmöglichkeiten zum Beispiel für Hintergründe oder sonstige Spielereinen bekommt.
So sieht das Grundgerüst der Seite aus:
<div id="box">
<h1 id="header">Überschrift</h1>
<ul id="navigation">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
<div id="inhalt">...</div>
<p id="footer">...</p>
</div>
Nach obenAnordnen und Formatieren der Grundelemente:
Alle Abstände werden mit Hilfe des Universal Selektors (*) entfernt, indem padding und margin auf Null gesetzt werden.
*{
padding: 0;
margin: 0;
}
So wird die Seite zentriert.
#header, #inhalt und #footer bekommen feste Höhen, auf eine feste Breite wird verzichtet, da Blockelemente von Natur aus sich über die volle Zeilenbreite erstrecken - lediglich #box benötigt eine feste Breite für die Zentrierung.
Nachdem die horizontale Listennavigation formatiert wurde, werden für #inhalt die Innenabstände festgelegt und der Text wieder linksbündig dargestellt, da es es für die Zentrierung notwendig ist, den Text für den body mittig auszurichten. Wichtig ist die Mindesthöhe für den Inhalt, der mit 600px festgelegt wird (Achtung, nicht kompatibel zu Safari).
#inhalt{
padding: 10px 20px;
text-align: left;
clear: left;
min-height: 600px;
}
Nach obenSeitendesign
Die Seitenelemente sind nun alle an ihrem Platz, mit der richtigen Größe; es fehlt nur noch das eigentliche Design - das ist schnell mit ein paar Angaben für Hintergrundfarben für Body, Seitenkopf, Inhaltsbereich, Rahmen, etc. erledigt. Ich habe mich für einen weißen Rahmen für #box entschieden und mal eine Orange-Schwarz-Kombinatin ausprobiert - das kann aber jeder nach seinem Geschmack schnell dem Grundgerüst hinzufügen. So sieht das fertige Stylesheet aus:
*{
padding:0; /* Abstände entfernen */
margin:0;
}
body{
font:12px "Trebuchet MS", verdana, arial, sans-serif;
/* Für Zentrierung in älteren Browsern wichtig: */
text-align: center;
background: #B5CCDF;
}
/* Allgemeine Formatierungen */
h2{
margin: 1em 0;
font-size: 16px;
text-transform: uppercase;
border-left: 5px solid orange;
padding-left: 8px;
line-height: 18px; /* Höhe des linken Rands */
}
/* Hauptcontainer */
#box{
width: 650px;
margin: 0 auto; /* Zentrierung */
text-align: center;
background: #ddd;
border: 5px solid white;
border-bottom: none;
}
/* Header */
#header{
background: orange;
height: 120px;
color:black;
line-height: 70px; /* vertikale Ausrichtung */
padding-left: 30px;
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#header span{
display: block;
color: white;
font-size: 12px;
text-transform: none;
margin-top: -45px; /* nach oben verschieben */
font-weight: normal;
}
/* Navigation */
#navigation{
list-style: none;
width: 650px;
float: left;
height: 30px;
background: orange;
}
#navigation li{
float: left;
}
#navigation li a{
display: block;
height: 30px;
width: 130px; /* Breite 650px:5 = 130px */
text-decoration: none;
line-height: 30px;
float: left;
background: black;
color: white;
}
#navigation li a:hover{
background: white;
color: black;
}
/* Inhalt */
#inhalt{
padding: 10px 20px; /* Innenabstand */
text-align: left; /* wichtig */
clear: left; /* wichtig */
min-height: 600px;
}
/* Footer */
#footer{
height: 30px;
line-height: 30px;
background: black;
color: white;
text-align: center;
}
#footer span a{
float: right;
margin: -30px 10px 0 0;
color: orange;
}
#footer span a:hover{
color: white;
}
Nach obenKorrekturen für den IE
Wie schon bei diesem Artikel beschrieben, ist es ganz nützlich, wenn man seine Seite zum Beispiel auch für den IE 5 ansehnlich gestalten möchte, den IE durch den XML-Prolog in den Quirksmodus zu versetzen, da man sich so nicht mit den Bugs aller IE Versionen herumschlagen muss. So ist das IE spezifische CSS schnell in einem Conditional Comment zusammengetragen, da man nur die Rahmenbreite für Box zur Breite der Division hinzuaddieren muss (Boxmodelbug)
Schließlich ist es noch notwendig für #inhalt eine Höhe anzugeben, da der IE zwar min-height nicht kennt, height aber als Mindesthöhe versteht.
<!--[if IE]>
<style>
#box{
width: 660px;
}
#inhalt{
height: 600px;
}
</style>
<![endif]-->
Nach obenDemonstration des Layouts
Hier kann man sich das Endergebnis ansehen.
Greg
Bei der Zentrierung ist empfohlen nicht die Kurzschreibweise margin: 0 auto; sondern margin-left: auto; und margin-right: auto; vorzuziehen, damit es wirklich einwandfrei auf allen Browsern funktioniert.
fphilipe
Von dieser Empfehlung habe ich noch nie gehört. Margin auto wird sowieso nur von den neusten Browsern unterstützt (IE nicht) und die können doch die Kurzschreibweise ;)
Twisting
Auf css-discuss.incutio.com steht, dass der IE 5/MAC seine Probleme mit Shorthand hat - deshalb geb ich mal Greg Recht...
btw.: könnte man noch im Artikel zum horizontalen Zentrieren erwähnen.
felix
aber validator.w3.org hast du damit nicht mal aufgerufen, oder?