Artikel
Ein Standard-Design
Vorbetrachtungen
Zuerst müssen wir uns im Klaren sein, welche Bereiche unser 3-Spalten-Layout enthalten soll:
- Eine Kopf- und eine Fußzeile,
- eine Navigationsspalte,
- eine Hauptspalte für den eigentlichen Seiteninhalt,
- eine Spalte für Zusatzinformationen.
Screenreader sollen außerdem zuerst den Inhalt vorlesen, dann die Navigationspunkte und zuletzt die Zusatzinformationen.
Abbildung 1: Visueller Aufbau
Abbildung 2: Struktureller Aufbau
Für das Design streben wir Spalten an, die bis zur Fußzeile reichen. Dass dies keine Selbstverständlichkeit ist wird sich später noch zeigen.
Die Dokumentstruktur
Der Einfachheit halber werden die hier folgenden Beispiele nur Auszüge aus dem <body>-Element sein. Für die gesamte (X)HTML-Datei kann der Quelltext der Beispielseite herangezogen werden.
Wie man am strukturellen Aufbau erkennen kann haben wir fünf Bereiche: Die Kopfzeile mit der Seitenidentität (also Logo und Tagline), die drei Spalten und den Fußbereich mit rechtlichen Hinweisen.
Die Umsetzung könnte folgendermaßen im Quelltext aussehen:
<div id="identitaet">...</div>
<div id="inhalt">...</div>
<div id="navigation">...</div>
<div id="extra">...</div>
<div id="rechtliches">...</div>
Dieser Quelltext wäre eine optimale Lösung:
- Die Elemente sind ihrem Zweck nach benannt.
- Es gibt keine Elemente, die ausschließlich für das Design eingefügt wurden.
Allerdings ist die Erstellung eines Dreispalters mit diesem Quelltext äußerst schwierig umzusetzen. Eine möglichst einfache und browserübergreifende Lösung benötigt noch ein weiteres Element. Zudem werden die Bereiche von einem weiteren <div>-Element eingefasst (<div id="wrap">), mit dem sich das Layout ebenfalls verändern lässt.
<div id="wrap">
<div id="identitaet">...</div>
<div id="hauptbereich">
<div id="inhalt">...</div>
<div id="navigation">...</div>
</div>
<div id="extra">...</div>
<div id="rechtliches">...</div>
</div>
Float as float can.
Diese Struktur erlaubt es uns, die gesamte Seite mittels „Floats" (Schwebende Elemente) zu positionieren, was die nachvollziehbarste Lösung scheint. Nun müssen wir uns noch über die Breite der Spalten klar werden. Die Inhaltsspalte soll die Hälfte des wrap-Elements einnehmen, die beiden anderen Spalten jeweils 25%.
Das Prinzip der Floats ist schnell erklärt: Die Elemente werden aus dem Dokumentenfluss herausgenommen und an eine Seite verschoben. Andere Texte/Elemente laufen dann daran vorbei. Die Bilder in Zeitungen werden auf eine ähnliche Weise gesetzt.
Zuerst legen wir eine allgemeine Regel im CSS fest. Wieder ist es der Vereinfachung geschuldet, dass die Stilangaben im Beispieldokument nicht ausgelagert sondern im Dokument vorhanden sind.
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, sans-serif;
}
Nun müssen wir das CSS für die verschiedenen Bereiche schreiben.
Kopf- (#identitaet) und Fußzeile (#rechtliches)
#identitaet {
background-color: #369A3D;
color: #fff;
padding: 1.2em;
}
#rechtliches {
background-color: #707883;
}
Das reicht uns hier bereits. In einem „echten" Layout würde man wahrscheinlich noch Hintergrundbilder oder andere Gestaltungselemente einfügen. Dies benötigen wir aber in diesem Beispiel nicht.
Die Spalten
Zuerst kümmern wir uns um die Spalte für Zusatzinformationen (#extra) und den Hauptbereich (#hauptbereich). Den Hauptbereich wollen wir mit 75% Breite an den linken Seitenrand schieben, die Extraspalte an den rechten:
#hauptbereich {
float: left;
width: 75%;
}
#extras {
float: right;
width: 25%;
background-color: #D39815;
}
Mit der Inhalts- und der Navigationsspalte verfahren wir ähnlich. Lediglich die Breite der beiden Spalten müssen wir anpassen, da sich diese auf das übergeordnete Element (in diesem Fall also auf den Hauptbereich mit 75%iger Breite) beziehen:
#inhalt {
float: right;
width: 66.67%;
background-color: #002455;
color: #fff;
}
#navigation {
float: left;
width: 33.33%;
background-color: #B0001E;
}
Wenn man sich das Layout nun anschaut fallen zwei Probleme auf:
- Die Fußleiste ist seltsam verschoben.
- Die Spalten sind teilweise viel zu kurz und gehen nicht bis zur Fußleiste.
Die Fußzeile ganz nach unten zu versetzen ist kein Problem: #rechtliches wird folgende Anweisung hinzugefügt: clear: both;. Dadurch wird die Fußzeile nach unten, unter alle Spalten geschoben.
Das zweite Problem kann auf zwei Arten gelöst werden: Entweder man benutzt Hintergrundbilder um Spalten zu simulieren (sog. Faux Columns) oder man wendet einen Trick an, den Alex Robinson bei seiner Suche nach dem einzig wahren Layout gefunden hat. Dieser benutzt einen sehr großen Innenabstand (padding) und einen ebenso großen negativen Außenabstand (margin), die Spalten entsprechend zu erweitern:
#inhalt, #navigation, #extra, #hauptbereich {
padding-bottom: 32767px; /* Beschraenkung durch Safari, der keinen groeszeren Wert zulaesst. */
margin-bottom: -32767px;
}
Nun sind die Spalten aber einfach nur sehr lang. Wir müssen sie also unten kappen, und hier kommt das wrap-Element ins Spiel. Durch folgende Anweisung erreichen wir das gewünschte Ergebnis fast:
#wrap {
overflow: hidden;
}
Was nun noch fehlt ist die Fußzeile: Sie scheint hinter die Spalten gerutscht zu sein. Folgende Anweisungen rßcken das wieder gerade:
#wrap {
overflow: hidden;
position: relative;
}
#rechtliches {
background-color: #707883;
position: relative;
z-index: 1;
}
Jetzt haben wir ein fast perfektes Layout, das in den meisten Browsern funktionieren sollte. Lediglich Opera in der Version 8 macht Probleme. Falls man diesen Browser unterstützen will (oder muss) hilft folgender CSS-Hack. Opera 9 enthält diesen Fehler im übrigen nicht mehr, es liegt also im Ermessen des Autors ob er diesen Hack überhaupt benötigt:
@media all and (min-width: 0px) {
#inhalt, #navigation, #extra, #hauptbereich {
padding-bottom:0;
margin-bottom: 0;
}
#inhalt:after, #navigation:after, #extra:after, #hauptbereich:after {
padding-top:32767px;
margin-bottom: -32767px;
content: 'Opera 8 Fix';
display:block;
background: inherit;
height: 0;
}
}
Fluid, fix oder elastisch?
Es mag nun die Frage aufkommen, ob das Layout fluide, fix oder elastisch ist. Fluid bedeutet, dass sich die einzelnen Spalten an die Fensterbreite anpassen. Fix ist ein Layout, wenn die Breite in Pixeln angegeben wurde. Ein elastisches Layout passt sich an der Schriftgröße an. Und das schöne ist: Dieses Layout kann alle drei Layoutarten erfüllen, die Frage ist nur in welcher Einheit die Breite des wrap-Elements angegeben wird:
Fixes Layout:
#wrap {
overflow: hidden;
position: relative;
width: 760px;
margin: auto; /* Zentrierung des Layouts */
}
Fluides Layout:
#wrap {
overflow: hidden;
position: relative;
width: 80%;
margin: auto; /* Zentrierung des Layouts */
}
Elastisches Layout:
#wrap {
overflow: hidden;
position: relative;
width: 45em;
margin: auto; /* Zentrierung des Layouts */
}
Weiterführende Links
Zum Autor
Eric Eggert ist momentan Zivi in Kaiserslautern. Mit Webstandards beschäftigt er sich schon seit einigen Jahren. Nach seinem Informatikstudium soll diese Beschäftigung zu seinem Beruf werden. Er betreibt ein Weblog, in dem er unter anderem über Webentwicklung schreibt.
- Info:
- Ein Standard-Design ist Beitrag Nr. 32
- Autor:
- Eric Eggert am 20. Dezember 2005 um 22:00
- Kategorie:
- Adventskalender 2005
Kommentare
Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.
Kommentar-Feed für diesen Beitrag
Entschuldige, das Kommentarformular ist zurzeit geschlossen.
Vielen Dank für den Artikel.
Eine generelle Frage hab ich noch, die ich mir schon oft gestellt habe: Wenn ich zwei DIVs habe bei denen der eine links der andere rechts von diesem stehen soll (wie auch beim obigen Layout), dann hat der erste natürlich float:left. Muss der rechte dann zwingend auch float:right haben? Oder reicht es wenn man das an dem linken die entsprechenden Angaben mitgibt?
PS. pading muss wohl padding heißen
Kommentar by tobias - 20. Dezember 2005 um 09:28
Ein *einfaches* Drei-Spalten-Layout – von wegen einfach.
Da haben sich schon manche Webautoren die Haare gerauft und die Zähne ausgebissen.
Das Einfache, was schwer zu machen ist (oder war?):
Positionierung mit float, und der Inhalt steht im Quelltext *vor* der linken und rechten Spalte (die Suchmaschinen honorieren das).
Gleich lange Spalten – eine neue raffinierte Lösung.
Ein Standard Design, welches mit wenig Aufwand fix, variabel oder elastisch gestaltet werden kann.
Im Web tut sich was mit dem CSS-Layout…….
Mit YAML muss man sich beschäftigen.
Hier ein zusätzlicher Link zum Thema:
http://www.positioniseverything.net/articles/onetruelayout/
Selbst Eric Meyer staunt, welch neue Lösungen gefunden werden.
Ein großes *Dankeschön an Eric Eggert* für sein brandaktuelles Step-by-Step-Tutorial!
Kommentar by makcie - 20. Dezember 2005 um 11:10
@ tobias: Das zweite Div muss nicht zwangsläufig right als float Wert besitzen, left geht natürlich auch. Wobei du ihn dann mit margin-left richtig positionieren kannst.
Um noch einen Link beizusteuern, besucht doch mal TJKDesign.
Klasse Artikel im übrigen Eric!
Kommentar by Heiko - 20. Dezember 2005 um 11:39
War css float überhaupt für Layout Anordnungen in diesem Sinne gedacht?
Irgendwie ist es wenig Intuitiv das Seitendesign über eine Eigenschaft zu bestimmen die für Textumfluß gedacht ist.
Der >>Quelltext der Beispielseite
Kommentar by Richard - 20. Dezember 2005 um 11:54
Sehr nützliches zum 3-Spalten-Layout: YAML
Kommentar by Uwe - 20. Dezember 2005 um 17:11
at irgendwie nicht geklappt, hier der link:
http://www.highresolution.info/webdesign/yaml/
Kommentar by Uwe - 20. Dezember 2005 um 17:13
Hallo, super Artikel.
Bin mir nicht ganz sicher, aber hätte man nicht auch die drei Spalten direkt nebeneinander floaten lassen können und auf den div#hauptbereich verzichten?
Kommentar by Rico - 20. Dezember 2005 um 17:36
Hallo, zuerst einen Dank für das Lob.
@Rico: Ja, das könnte man durchaus machen, dann ist es jedoch nicht möglich den Inhalt im Quelltext vor der Navigation zu notieren, oder ist mir da was entgangen?
Kommentar by Eric Eggert - 20. Dezember 2005 um 19:08
@Uwe: Dein Link stand schon längst unter "weiterführende Links".
@mackie: Das onetruelayout finde ich seltsam. Der Artikel ist lang und für Anfänger absolut unverständlich. Das Endergebnis ist ein Layoutkomplex, den ich niemals produktiv einsetzen würde. Zu oft steht in dem Artikel, daß eine Unterlösung in einem oder mehren Browsern nicht funktioniert. YAML ist da unproblematischer.
Für alle diese Ansätze und Fertiglayouts gilt: lernt davon! Man muss nicht zwingend YAML einsetzen oder das hier vorgestellte Layout, möglicherweise kann man es nicht einsetzen, weil eigene Layoutdetails sich damit beissen. Aber man kann davon lernen.
Sollte man diese Layouts nicht als Lerngrundlage nehmen, versteht man nicht, was man da tut. Das kann mal gutgehen, aber irgendwann kommt man zu dem Punkt, an dem man wissen muss, was man tut.
Kommentar by Jens Grochtdreis - 21. Dezember 2005 um 11:44
Anmerkung:
Im IE beim Schriftgrad "Kleiner" und "Sehr klein" schiebt sich die Navigation an den unteren Rand der linken Spalte. Der Mozilla hingegen zeigt ein geschmeidiges und nutzbares Design.
Der W3C – Validator möchte noch ein weiteres Attribut im SCRIPT-Tag sehen.
Vielen Dank für dieses erstklassige Tutorial!
Kommentar by tim - 23. Dezember 2005 um 01:51
Ein sehr gelungener Ansatz, und eine wirklich gute Idee, mit padding und negativem margin die Spalten-HGs zu erzeugen. Leider funktioniert das Layout bei mir aber nicht im Safari, obwohl bei der Spaltenlänge extra auf Safari geachtet wird. (32767px)
Das Problem im Safari ist, dass die Bereiche "inhalt" und "navigation" verschwinden, wenn der Bereich "extra" nicht die längste Spalte ist … oder anders ausgedrückt: nur die Spalte "extra" wird beim "clear" des Footers ("rechtliches") beachtet.
Hat irgendjemand diesen Fehler auch? Ich nutze Safari 2.02 (416.13) unter Mac OS X 10.4.3
Gibt es vielleicht schon eine Lösung? Dann ist dieser Dreispalter tatsächlich der coolste, den ich bislang gesehen habe!
Kommentar by Christopher - 18. Januar 2006 um 18:11
Fix für Safari-Problem (siehe Post Nr. 11)
Ein zusätzliches DIV schafft Abhilfe. Einfach die beiden DIVs "Inhalt" und "Navigation" innerhalb von dem DIV "hauptbereich" durch ein zusätzliches DIV "safari_overflow_fix" clearen …
XHTML:
Inhalt
Navigation
CSS:
#safari-overflow-fix {
clear:both;
position:relative;
height:0;
}
So funktioniert es auch im Safari.
Kommentar by Christopher - 19. Januar 2006 um 12:03
Was muss man tun, um hier Code zu posten?
Versuche es noch einmal, vielleicht funktioniert es ja:
XHTML
<div id="hauptbereich">
<div id="inhalt"> Inhalt </div>
<div id="navigation"> Navigation </div>
<div id="safari_overflow_fix"></div>
</div>
Kommentar by Christopher - 19. Januar 2006 um 12:19
Vielen Dank für diesen Artikel. Der Trick mit den langen Spalten funktioniert aber nur solange, wie man kein Sprungziel innerhalb der gleichen Seite ansteuert.
Kommentar by Ralph - 6. Februar 2006 um 01:11
Super Anleitung.
Als ich den Beitrag noch im wirklichen Adventskalender gelesen habe, gabs noch einen Link zu einem weiteren Tutorial. Ich glaube der war von einer amerikanischen Webdesignerin geschrieben.
Könnt ihr den Link zu diesem Tutorial bitte nochmal veröffentlichen.
Vielen Dank!
Kommentar by ingo - 27. Juni 2006 um 22:10
Hallo,
was muss ich ändern, wenn ich für #navigation und für #extras einen festen pixelwert (z.B. 200px) nehmen will und die mittlere spalte #inhalt automatisch angleichen möchte?
mfg Matthias
Kommentar by ML - 12. Dezember 2006 um 21:41
hallöchen, ich hab das selbe problem wie ralph (comment 14.) sobald ein anker gesetzt ist innerhalb der selben seite wird generell oben der kopfbereich weggeschnitten und unterhalb des footers ist plötzlich diese höhe hinzugefügt …. ein scrollen nach oben ist nichtmehr möglich … hat jemand auch dieses problem und eventuell sogar ne lösung ? bitte,bitte helft mir … ;o)
ich wäre vielmalstens und ewig erfreut
Kommentar by uschzmet - 14. Dezember 2006 um 16:35
Hallo!
Habe auch das Problem der abgeschnittenen Seite, sobald Anker gesetzt sind, und ich wüsste noch gerne, wie man die ganze Page auf die Breite der Kopf-/Fußzeile setzt, damit sich die Container nicht untereinander schieben, sobald man das Browserfenster enger schiebt.
Kommentar by Sebastian - 15. März 2007 um 20:08
Hallo uschzmet und Sebastian. Das Problem mit den „abgeschnittenen“ Seiten wurde leider erst nach dem Artikel öffentlich. Es gibt dazu auch einen Artikel, der das verhalten erklärt. Leider scheint es aber keine wirkliche Lösung für dieses Browserproblem zu geben. Opera 9.1 und Safari machen es richtig, der Firefox und IE schwächeln.
Es wäre ja auch zu schän gewesen um wahr zu sein
Kommentar by Eric Eggert - 16. März 2007 um 08:52
Hm, ok, hab mich innerlich eh schon fast von den Ankern verabschiedet
Hab dann nur noch das Problem, dass beim IE7 die 3 Container im Mittelbereich untereinander geschoben werden, sobald man das Browserfenster zusammenschiebt. Wobei "zusammenschieben" noch untertrieben ist: Der IE7 stellt sie nur nebeneinander dar, sofern das Fenster maximiert ist, d.h. über den ganzen Bildschirm geht. Klickt man das Browserfenster nur einen Pixel kleiner als 100%, schieben sich die Container sofort untereinander. Alle anderen Browser reagieren "normal"; man kann das Fenster dort enger als die Webseite ist ziehen, und sie bleiben schön nebeneinander.
Kommentar by Sebastian - 16. März 2007 um 09:39
Weiß niemand eine Lösung zu dem Problem mit dem IE7?
Kommentar by Sebastian - 5. April 2007 um 17:07
Sebastian: Leider kann man das so ohne den konkreten Anwendungsfall schlecht sagen.
Kommentar by Eric Eggert - 5. April 2007 um 20:07
Sorry, ich hatte den Hauptbereich um Navigation, Inhalt und Extra gelegt, statt nur um Navigation und Inhalt. Klappte bisher trotzdem alles wunderbar, nur beim IE7 rutschten die Spalten untereinander, sofern er nicht auf 100% Bilmschirmgröße maximiert war. Zieht man den Hauptbereich nur um Navigation und Inhalt, bleiben auch dort die Spalten nun stabil. Warum das so ist, hab ich zwar (noch) nicht verstanden, aber das macht erstmal nix
Perfekt wäre das Layout, wenn es irgendwann noch eine Lösung für Sprungmarken geben würde…
Kommentar by Sebastian - 6. April 2007 um 10:16
Beim Firefox funktioniert alles sehr gut, nur beim IE7 schneidet er mitten drin einfach alles ab. Weiß evtl. jemand woran das liegen könnte?
http:www.finalcraft.com/seite/
Kommentar by Dirk - 6. August 2008 um 10:48