Zentrieren ohne zusätzliches Markup
Wer ein zentriertes Layout für eine Webseite erstellt, greift oft auf einen »Wrapper-Div« zurück. Dabei genügen ein wenig CSS und das body-Element, um das gleiche Ergebnis zu erzielen. Wie das geht erläutert Sascha Postner in diesem Mini-Tipp.
Wer ein zentriertes Webseitenlayout entwickeln möchte, verwendet oft den typischen »Wrapper-Div« (<div id="wrapper"></div>). Dieser wird meist einmal um den gesamten Inhalt der Seite gelegt und per CSS mit automatischen Abständen zu den Rändern in der Mitte des Bildschirms platziert (margin: 0 auto;). Dieses zusätzliche und in der Regel überflüssige Markup lässt sich in den allermeisten Fällen vermeiden.
Glücklicherweise kann der gewünschte optische Zentrierungseffekt auch ohne zusätzliches Markup erzielt werden. Und zwar dank eines sowieso in fast jedem HTML-Dokument enthaltenen Elementes. Die Rede ist hier von <body></body> (einem Element, das in HTML5 nicht zwingend erforderlich ist). In den meisten CSS-Dateien fristet der passende Selektor oft ein Schattendasein als Lieferant für eine Hintergrundfarbe. Dabei könnte er so viel mehr. Als umschließendes Element kann body eben auch einfach zum Zentrieren genutzt werden.
- body {
- width: 500px;
- margin: 20px auto;
- padding: 20px;
- border: 1px solid black;
- background: #f9ddb5;
- }
Wenn man sich das Codebeispiel im Browser anschaut, fällt sofort auf, dass die Hintergrundfarbe seltsamerweise nicht nur im jetzt verkleinerten Bereich des body-Elements angezeigt wird, sondern das ganze Browserfenster füllt. Um dies zu umgehen, lässt sich gleich der nächsthöhere Container (<html></html>) ausnutzen.
- html {
- background: #a70d0f;
- }
- body {
- width: 500px;
- margin: 20px auto;
- padding: 20px;
- border: 1px solid black;
- background: #f9ddb5;
- }
Nachdem nun die Farben wie erwartet dargestellt werden, fehlt es nur noch an einigen wenigen Ergänzungen, und das ganze Konstrukt ist einsetzbar. Soll die body-Fläche auch bei wenig Inhalt bis zum Seitenende verlaufen, ist es nötig, dem html-Element eine Höhe von 100% zu geben. Für body nutzt man indes besser das CSS-Attribut min-height, da sonst bei längeren Inhalten ein Überlauf entsteht. Dies wird zwar vom Internet Explorer 6 nicht interpretiert, will man diesen noch unterstützen, lassen sich aber über Conditional Comments und eine feste Höhe andere Lösungen finden.
- html {
- background: #a70d0f;
- }
- body {
- width: 500px;
- margin: 20px auto;
- padding: 20px;
- border: 1px solid black;
- background: #f9ddb5;
- min-height: 100%;
- }
Mit ein wenig CSS und ohne zusätzliches Markup ist nun das Layout zentriert. Das Beispiel des DIV-Wrappers zeigt, dass wir mit etwas Nachdenken durchaus öfter auf das ein oder andere HTML-Element verzichten könnten.
Gemälde: Franz Marc, Füchse, 1913. Kunstmuseum, Düsseldorf.
Kommentare
Felix de Ruiter
am 04.12.2010 - 10:35
Ganz toll, also wer da nicht von selbst drauf kommt, dem ist eh nicht mehr zu helfen! :-D
Ich meine allerdings, dass ein umschließendes
div-Element auch semantisch eingesetzt werden kann. Dann nämlich, wenn man es als "Seitenbereich" nutzt und Zugänglichkeitshilfsmittel wie Sprunganker oder Brotkrumennavigation auslagert. Dann sollte man meiner Ansicht nach aber auch eine andere ID vergeben als "Umschlag" (wrapper). Ich bin da für "Wurzel" (root), damit ersichtlich ist, dass es sich um das Stamm-Element der Seite handelt.Francesco
am 04.12.2010 - 10:41
Das
body-Element ist bereits seit den Anfängen von HTML optional. Erstmals offiziell niedergeschrieben wurde das in HTML 2.Fabian
am 04.12.2010 - 10:51
Ich persönlich benutze diese Methode seit einiger Zeit und empfehle sie auch gerne weiter.
Zu beachten ist jedoch, dass es Probleme mit den meisten "Lightbox-Scripten" geben wird. Diese speisen eigentlich immer ihre Maske (der transparente Layer, der bei Großansicht über der gesamten Seite liegt, um den Focus auf das eigentlich groß gemachte Element zu schieben) in den Body. Was bedeutet, dieses Overlay eben eben genau so groß wie die definierte breite des Body-Elements. Dies lässt sich zum Beispiel wie folgt lösen: Dem Body "position:relative;" geben und dem Overlay die explizite (in JavaScript ermittelte) Höhe und Breite sowie eine absolute Position. Dann ab damit in den Body. Eine andere Möglichkeit ist hier, das HTML-Element zu benutzen. Funktioniert eigentlich wunderbar, nur spielt da der Internet Explorer (ich glaube bis Version 7) nicht sehr gut mit. Mag mich aber auch gerade irren...
Fabian
am 04.12.2010 - 10:55
Oh, ein eben = ist. Und Breite natürlich groß! ;)
Markus Tacker
am 04.12.2010 - 11:33
Nett, ich stimme aber Felix zu. Außerdem hat man in den allermeisten Fällen Element die Über die ganze Bildschirmbreite gehen
Gunnar Bittersmann
am 04.12.2010 - 15:15
Dass viele "Designer" der Meinung sind,
<html>und<body>sollten möglichst neutralisiert und das Layout dann mittels<div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich. [at, 2008] Also gut, dass ihr es im Adventskalender noch mal ansprecht.Leider haben sich einige Fehler eingeschlichen:
<body></body>(einem Element, das in HTML5 nicht zwingend erforderlich ist) ist falsch. Content model deshtml-Elements ist: Ahtmlelement followed by abodyelement. [HTML5] Dasbody-Element ist immer vorhanden, auch wenn kein<body>-Tag vorhanden ist. Abodyelement's start tag may be omitted […]¹ [HTML5]Es gibt kein
CSS-Attribut
min-height. Gemeint ist CSS-Eigenschaft.Conditional comments sind ein äußerst zweifelhaftes Mittel für Anpassungen für IEs. Besser ist es, die Angaben direkt in dem einen Styleshhet für alle Browser anzugeben: per
* htmlfür IE6 (ob das noch erforderlich ist?), per*+html² für IE7._____
¹ Der vollständige Satz mit dem ganzen Enweder-oder-es-sei-denn-dass zeigt die unnötige Verkomplizierung, die HTML5 mit sich bringt. Besser beraten ist man IMHO, XML-konformen Code zu schreiben.
² oder
*:first-child+html, da irgendein alter Opera auch auf*+htmlansprichtNicolai Schwarz (Webkraut)
am 04.12.2010 - 17:09
@Felix: Einige von uns haben vor Jahren mal mit einem Wrapper-div angefangen und nutzen es seitdem »stillschweigend«. Da kann so ein Mini-Tipp nicht schaden.
@Gunnar: Ob nun Conditional Comments oder Hacks der bessere Weg sind, darüber lässt sich zumindest streiten. Ein Fehler ist das jedenfalls nicht automatisch.
Freizeitler
am 04.12.2010 - 17:17
Super Ansatz – ist fast völlig in Vergessenheit geraten! Werde in Zukunft öfters mal wieder darüber nachdenken einen Container zu sparen...
Probiert das mal aus:
Min-height für IE6
nik
am 04.12.2010 - 18:29
Die im Hinweis genannte Lightbox-Problematik ist natürlich ein echtes Manko. Sonst wäre das eine echt tolle Lösung. Vor allem das Verhalten, wenn der Browser kleiner als der Viewport gestellt wird, gefällt.
SebIT
am 04.12.2010 - 21:17
Schöner Ansatz. Aber eine Kleinigkeit habe ich dann doch zu bemängeln:
Meiner Rechnung nach sind 100% + 40px Padding + 40px Margin eben nicht 100% an Höhe sondern mehr. Das führt dazu das bei Browserfenstern die größer sind als nötig ein unnützer Scrollbalken auftritt.
Andreas
am 05.12.2010 - 00:16
Daumen hoch! Ich persönlich hab auch immer, aus Ermangelung von Alternativen, eingesetzt. Werde das gleich mal ausprobieren.
Dieter
am 06.12.2010 - 08:12
Cool, den Ansatz kannte ich noch nicht.
Prinzipiell eine genial einfache Lösung mit weniger Markup. Leider braucht man für flexible Layouts, damit sie robust sind, regelmäßig Wrapper zum Kapseln (s.a. YAML). Wenn der Internet Explorer 6 (IE) endlich irrelevant geworden ist, dann sieht es besser aus und kann man wohl das Markup endlich verschlanken.
Leider scheint man sich also derzeit mit dieser Lösung Folgeprobleme mit altem/veraltetem IE und Lightbox-Skripten zuzuziehen.
Marco Kunz
am 08.12.2010 - 14:38
Diesen Ansatz habe ich am Anfang meiner Zeit als Webdesigner benutzt und bin auf viele Probleme gestoßen, da ich noch nicht viel über CSS, Vererbung und dergleichen wusste.
Seitdem arbeite ich auch mit dem allseits beliebten "Wrappercontainer" um alles unter einen Hut zu bringen.
Sich diesen zu sparen und eben den Weg über das body- und html-Tag zu gehen halte ich für eine spitzen Idee. Solange man die bereits erwähnte Lightbox nicht benutzt bzw. benötigt, ist das mit Sicherheit semantischer und simpler für das HTML-CSS-Zugtier von heute. Ich werde diesen Tip definitiv zu Herzen nehmen.
Die Frage ist natürlich ob man Rücksicht auf den (guten) alten IE nehmen will oder nicht. Ich persönlich tendiere ja dazu alles was älter als der IE7 ist gewissermaßen auszublenden (im Geiste) und wäre somit auf der sicheren Seite. *ins Fäustchen lach*
ChrisB
am 10.12.2010 - 21:31
Im HTML-Code, ja.
Beim Erstellen des DOM erzeugt der Browser trotzdem eins.
suit
am 13.12.2010 - 11:15
@Freizeitler
Der "min-height für IE6"-Artikel ist süss. Ohne Hack soll das funktionieren? Für mich sieht das nach Hack aus, hier wird bewusst ein Fehler des CSS-Interpreters ausgenutzt :p
Sascha Postner (Autor)
am 14.12.2010 - 10:30
Liebe Kommentatoren,
danke für Eure kritischen, konstruktiven und lobenden Worte. Da war eine Menge guten Inputs dabei und es ist immer schön zu sehen, wenn eine kleine Diskussion zum Thema entsteht.
Viele Grüße Sascha
Die Kommentare sind geschlossen.