Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Ein Standard-Design

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Ein Standard-Design

Heute geht es um die Erstellung eines einfachen 3-Spalten-Layouts mittels XHTML und CSS.

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

Systematische Darstellung des Seitenlayouts: Oben Kopfzeile, unten Fußzeile. Links die Navigation, rechts Zusatzinformationen. Dazwischen die Inhalte.

Abbildung 2: Struktureller Aufbau

Systematische Darstellung der Struktur des Seitenlayouts: Zuerst Kopfzeile, dann Inhalte. Danach die Navigation, zuletzt die Zusatzinformationen.

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:

  1. Die Fußleiste ist seltsam verschoben.
  2. 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

Kommentare

tobias
am 20.12.2005 - 09:28

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

Permanenter Link

makcie
am 20.12.2005 - 11:10

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!

Permanenter Link

Heiko
am 20.12.2005 - 11:39

@ 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!

Permanenter Link

Richard
am 20.12.2005 - 11:54

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

Permanenter Link

Uwe
am 20.12.2005 - 17:11

Sehr nützliches zum 3-Spalten-Layout: YAML

Permanenter Link

Uwe
am 20.12.2005 - 17:13

at irgendwie nicht geklappt, hier der link:
http://www.highresolution.info/webdesign/yaml/

Permanenter Link

Rico
am 20.12.2005 - 17:36

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?

Permanenter Link
Eric Eggert

Eric Eggert (Autor)
am 20.12.2005 - 19:08

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?

Permanenter Link

Jens Grochtdreis
am 21.12.2005 - 11:44

@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.

Permanenter Link

tim
am 23.12.2005 - 01:51

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!

Permanenter Link

Christopher
am 18.01.2006 - 18:11

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!

Permanenter Link

Christopher
am 19.01.2006 - 12:03

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.

Permanenter Link

Christopher
am 19.01.2006 - 12:19

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>

Permanenter Link

Ralph
am 06.02.2006 - 01:11

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.

Permanenter Link

ingo
am 27.06.2006 - 22:10

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!

Permanenter Link

ML
am 12.12.2006 - 21:41

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

Permanenter Link

uschzmet
am 14.12.2006 - 16:35

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

Permanenter Link

Sebastian
am 15.03.2007 - 20:08

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.

Permanenter Link

Eric Eggert
am 16.03.2007 - 08:52

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 :)

Permanenter Link

Sebastian
am 16.03.2007 - 09:39

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.

Permanenter Link

Sebastian
am 05.04.2007 - 17:07

Weiß niemand eine Lösung zu dem Problem mit dem IE7? :(

Permanenter Link

Eric Eggert
am 05.04.2007 - 20:07

Sebastian: Leider kann man das so ohne den konkreten Anwendungsfall schlecht sagen.

Permanenter Link

Sebastian
am 06.04.2007 - 10:16

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...

Permanenter Link

Dirk
am 06.08.2008 - 10:48

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/

Permanenter Link

Die Kommentare sind geschlossen.