Das 'Trinity-Layout' - revolutionär für dreispaltige Layouts

Für die Ungeduldigen:
Demo
Download

Auf einem der größten IT-Kongresse Europas, dem Chaos Communication Congress 2005, hörte ich einen Vortrag von Bert Bos (W3C) über verschiedene zukunftsweisende Web-Technologien. Wie zu erwarten war, gab es einiges Gegrummel, als das Thema 'CSS' angesprochen wurde. Bert Bos stimmte den laut werdenden Kritiken an der defekten Implementierung von CSS zu und - um das Thema positiv zu verlassen - erzählte er eine kleine scherzhafte Anekdote über die wahnsinnig machenden Versuche von Web-Designern, dreispaltige Webseiten-Layouts browserübergreifend zu bauen.

An dieser Stelle dachte ich mir schlicht "So schwer kann das doch nicht sein..." und verbrachte den folgenden Nachmittag damit, ein solches dreispaltiges Layout zu produzieren. Mein erster Ansatz war, ein zweispaltiges Layout zur Grundlage zu nehmen, das ich vor einiger Zeit für einen Kunden erstellt hatte. Es funktionierte mit den berühmt-berüchtigten 'gefälschten' Spalten, die durch Einbau einer Hintergrundgrafik erstellt werden. Diese Technik ist bis heute weit verbreitet und galt lange als die einzige vollständige Lösung, um in allen Browsern das gewünschte Ergebnis für Zweispaltigkeit zu erzielen.

Was mich daran störte war nicht nur, daß diese Technik umständlich zu implementieren ist (Erstellen eines passenden Hintergrundbildes -> Anpassung der Farbe) sondern auch schlicht die Tatsache, daß CSS alleine meiner Meinung nach vollkommen ausreichen musste. Das W3C hätte nie eine unvollkommene Style-Sprache veröffentlicht. Das Problem bestand nur in der Umsetzung in den verschiedenen Browsern - und hier wollte ich mich nicht von einem kleinen Stück Software einschränken lassen. Letztes Argument gegen diesen Ansatz war die Überlegung, daß Benutzer mit eingeschränkter Sehkraft nur bedingt die Schriftgröße der Webseite erhöhen können würden, da sich die Breite der Spalten wegen der Unflexibilität des Hintergrundbildes nicht anpassen könnte.

Die Eingebung, die am Ende zum Erfolg führte, war daß ein body-tag nicht zwangsweise die gleichen Dimensionen wie ein html-tag (das erste tag in einem jeden HTML-Dokument) haben müsste. Zwar hatten fast alle Dokumente die ich bis zu diesem Zeitpunkt erstellt hatte, eine solche Struktur (da sie mir in einigen Fällen Probleme erspart hatte) aber irgendwann muss man mit alten Gewohnheiten ja auch brechen! Außerdem wäre es ja auch mal eine Herausforderung, möglichst wenige, ineinander verschachtelte tags zu benutzen.

Hier ein Stück CSS-Code damit ihr eine Vorstellung davon bekommt, was ich meine:

body,
html{
margin:0;
padding:0;
}

html{
width:100%;
height:100%;
background-color:#CCCCCC;
color:#FFFFFF;
}

body{
margin-left:10em;
margin-left:10em;
background-color:#FFFFFF;
}

Bereits dieses Stückchen Code ergibt ein Dreispalten-Layout, dessen zwei Spalten links & rechts silber eingefärbt sind. Dieses Layout ist aber noch in keinster Weise gebrauchsfähig, da die zentrale Hauptinhaltsspalte bis jetzt nicht 100% der Höhe des Browsers einnimmt und daß die zwei Spalten bis jetzt nicht mit Inhalten gefüllt werden können. Stück für Stück werden wir nun diese Probleme aus der Welt schaffen.

Zuerst einmal müssen wir uns um die unterschiedliche Implementierung des height-Attributes in verschiedenen Browsern kümmern. Dies tun wir mit einer sauberen, schönen Browserweiche. Ihr müsst dafür ein zweites CSS-Dokument anlegen (hier 'ie.css') und den folgenden Code in eurem HTML-Dokument in den header-Bereich kopieren - und zwar unter die Stelle, wo ihr euer normales Stylesheet einbindet.

<!--[if lt IE 7]>

<link href="ie.css" rel="stylesheet" type="text/css" media="screen" />

<![endif]-->

Ist dies getan, müsst ihr in dem normalen Stylesheet (siehe ersten Code-Ausschnitt) im body-tag min-height:100%; einfügen. Im Stylesheet extra für den Internet Explorer (ie.css) fügt ihr folgenden Code ein:

body{
height:100%;
}

Somit erreicht ihr folgenden Effekt: In allen Browsern, die CSS korrekt implementieren, wird eine Minimalhöhe von 100% festgelegt. Im IE, der diesen Befehl nicht versteht, wird eine Höhe von 100% festgelegt, die sich aber bei größerem Inhalt über 100% hinaus erweitert und uns damit genau den Effekt liefert, den wir haben wollen! Danke Micro$oft für diesen Fehler im Fehler um einen Fehler zu reparieren!

Jetzt widmen wir uns dem zweiten Problem: Inhalte in die zwei Spalten links und rechts von der Hauptspalte einfügen können. Dies setzt eine Erkenntniss vorraus, die - einmal gehört - trivial erscheint, aber für dieses Layout und auch für andere Designs von großer Wichtigkeit ist: Browser messen die Positionen von Elementen von der links/oben (0px/0px) Position des html-tags aus. D.h. man kann ein body-tag nutzen, daß nicht 100% breit und 100% hoch ist, und trotzdem in diesem mit dem CSS-Befehl position:absolute; Inhaltscontainer platzieren, die optisch außerhalb vom body-tag liegen. Hier der notwendige CSS-Code, der wieder in eure normale CSS-Datei wandern sollte:

#links{
position:absolute;
top:0px;
left:0px;
width:8em;
padding:1em;
color:#FFFFFF;
background-color:transparent;
}

#rechts{
position:absolute;
top:0px;
right:0px;
width:8em;
padding:1em;
color:#FFFFFF;
background-color:transparent;
}

Die divs 'links' und 'rechts' sind genau so breit wie die Spalten/Abstände, die wir am Anfang des Seitenaufbaus dem body-tag gelassen haben. Da sie absolut positioniert sind, können sie theoretisch irgendwo in eurer HTML-Datei stehen - sollten aber wegen der Sauberkeit & Lesbarkeit am Anfang oder am Ende platziert werden.

In diese zwei div-Container fügt ihr nun x-beliebige Inhalte ein. Diese tauchen dann in den Spalten links und rechts auf. Theoretisch sind wir damit bereits fertig und haben bewiesen, daß ein schönes, semantisch sauberes dreispaltiges Layout möglich ist. Jedoch bestünde es nicht in der realen Welt & im echten Einsatz. Dafür fehlen noch einige Kleinigkeiten: Ein Innenabstand für die große Hauptspalte in der Mitte (erhöht Lesbarkeit & verbessert optischen Eindruck) und die Möglichkeit, innerhalb der Hauptbox weitere Boxen zu positionieren.

Beide Wünsche sind auf einen Schlag zu lösen - und zwar durch den Einbau eines Mittel-Container-Divs. Hier der nötige CSS-Code:

#mitte{
position:relative;
color:#000000;
padding-top:1em;
padding-bottom:1em;
margin-left:1em;
margin-left:1em;
text-align:justify;
}
In der HTML-Datei umfasst der mitte-Container alles zwischen öffnendem und schließendem body-tag außer den beiden Spalten-divs 'links' und 'rechts'. Durch sein position:relative; können wir nun x-beliebige weitere Boxen in ihm positionieren. Das padding für top & bottom sorgt für einen anständigen Abstand auch bei unter 100%. Der margin für linken und rechten Rand tut selbiges. text-align:justify; ist nur da, damit ihr den Rand-Effekt am Text besser ausmachen könnt.

Damit sind wir nun tatsächlich am Ende angelangt. Herzlichen Glückwunsch zu einem echten dreispaltigen Layout ohne grafische Tricks, Hacks, Skripte oder ähnliche unschöne Nebenerscheinungen! Sauberer geht's nicht!

Geschrieben am 16.06.2006