Tipps & Kurse

CSS Layouts

CSS Layouts

Tabellenlose Layouts mit Fusszeilen, vertikale Zentrierung…

Tabellenfreie Layouts bieten enorme Vorteile gegenüber einem Layout mit Tabellen: schlanker Quellcode, Screenreadertauglichkeit, „Suchmaschinenoptimiert“, Redesigns leichter und schneller möglich, optische Konsistenz und die Möglichkeit verschieden Layouts für verschiedene Ausgabemedien zu definieren. Die Nachteile von tabellenlosem Webdesign sind vor allem die schwierigere Umsetzung und Browserinkompatibilitäten.

Dafür gibt es aber eine einfach Abhilfe: hier lesen und studieren!

Nach dem CSS-FLOAT-Einführungsartikel: CSS Float – Crash Kurs – Browser Bugs und CSS Hacks möchte ich nun den CSS-Kurs weiterführen und Möglichkeiten für die Erstellung von tabellenlosen Layouts aufzeigen.

Zweispaltiges tabellenloses Layout mit CSS

Siehe CSS-FLOAT-Artikel:

Suchmaschinenoptimiertes zweispaltiges tabellenloses Layout mit CSS – Inhalt zuerst im Quelltext

Wer auf SEO (Suchmaschinenoptimierung) großen Wert legt, wir bei obigen Vorschlägen ein klein wenig die Nase rümpfen. Der rote Container, der für die Navigation herhalten soll, steht nämlich im Quelltext vor dem gelben Container, der die Inhalte der Website beinhaltet. SEOs hätten Inhalte im Quelltext lieber weiter vorne, da sie der Meinung sind, dass Google & Co Inhalte die im Quelltext weiter vorne liegen stärker berücksichtigt als Inhalte die in der Mitte oder am Ende des Quelltextes stehen.

Hier nun ein Lösungsansatz für ein suchmaschinenoptimiertes tabellenloses Layout:

Quelltext HTML:

<div id="container">
<div id="inhalt">Inhalt - gelber Container</div>
</div>
<div id="navigation">Navigation - roter Container</div>

CSS Quelltext:

#container {
background-color:#0000FF;
width:100%;
float: right;
margin-left: -100px;
}
#navigation {
background-color:#FF0000;
width:100px;
float:left;
}
#inhalt {
background-color:#FFFF00;
margin-left:100px;
}

Ergebnis:

Inhalte und auch eventuelle Formate müssen im gelben Container (#inhalt) und nicht in #container hinterlegt werden!

Suchmaschinenoptimiertes dreispaltiges tabellenloses Layout mit CSS – Inhalt zuerst im Quelltext

Hier nun ein Lösungsansatz für ein suchmaschinenoptimiertes dreispaltiges tabellenloses Layout:

Quelltext HTML:

<div id="inhalt">Inhalt - gelber Container</div>
<div id="navigation">Navigation - roter Container</div>
<div id="sidebar">Sidbar - grüner Container</div>

CSS Quelltext:

#inhalt {
background-color:#FFFF00;
float:left;
width:300px;
margin-left:200px;
display:inline;
}
#navigation {
background-color:#FF0000;
float:left;
width:200px;
margin-left:-500px;
display:inline;
}
#sidebar {
background-color:#00FF00;
float:left;
width:150px;
}

Ergebnis:

Mit Hilfe der CSS-Anweisung „margin-left“ tauschen die Container Inhalt und Navigation die Position. Der Inhaltscontainer bekommt einen linken positiven Rand, der Navigationscontainer einen linken negativen Rand, welcher sich aus der Breite des Inhaltscontainers plus der Breite des Navigationscontainers ergibt. Die CSS-Anweisung „display:inline;“ wird verwendet um den Douple Float Margin-Bug des Internet Explorers zu umschiffen.

Suchmaschinenoptimiertes dreispaltiges tabellenloses CSS-Layout mit drei gleich langen Spalten

Bei CSS-Layouts wird die Höhe der Container durch den Inhalt bestimmt. Möchte man „echte“ Tabellenspalten simulieren, dann bedarf es eines zusätzlichen Aufwandes. Eine Lösung ist die sogenannte Faux-Columns-Methode, bei der man mit Hilfe eines sich vertikal wiederholendem Hintergrundbildes (background-image:url(bild.gif); background-repeat:repeat-y;)  in einem umfassenden Container oder im höchsten Container die Spalten simuliert. Der Nachteil dieser Methode liegt auf der Hand: für Designänderungen muss ein Bild geändert werden und für dynamisch breite Layouts ist die Methode nicht leicht anwendbar.

Hier nun eine Methode, die ohne Hintergrundbilder auskommt:

Quelltext HTML:

<div id="wrapper">
<div id="inhalt">Inhalt - gelber Container Zeile 1<br />
Inhalt - gelber Container Zeile 2</div>
<div id="navigation">Navigation - roter Container</div>
<div id="sidebar">Sidebar - gr&uuml;ner Container</div>
</div>
<div id="fuss">Fu&szlig;zeile - blauer Container</div>

CSS Quelltext:

#inhalt {
background-color:#FFFF00;
float:left;
width:45%;
margin-left:30%;
display:inline;
}
#navigation {
background-color:#FF0000;
float:left;
width:30%;
margin-left:-75%;
display:inline;
}
#sidebar {
background-color:#00FF00;
float:left;
width:25%;
}
#inhalt, #navigation, #sidebar {
padding-bottom:32767px;
margin-bottom:-32767px;
}
#wrapper {
overflow:hidden;
}
#fuss {
background-color:#0000FF;
}

Ergebnis:

Die gleich langen „Spalten“ werden erreicht, indem den Containern, welche die Spalten simulieren sollen, ein riesiger Wert für padding-bottom zugewiesen wird. Damit darunter liegende Element dort angezeigt werden, wo sie sollen, wird der padding-bottom Wert durch einen negativen margin-bottom kompensiert. Die unnützen Scrollleisten entfernen wir, indem dem umfassenden Container ein overflow:hidden spendiert wird. Genau das ist aber zugleich auch der Nachteil dieser Methode. Overflow:hidden bewirkt nämliche unerwünschte Nebenwirkungen. Zum Beispiel werden bei internen Sprungmarken Inhalte unsichtbar. Dafür gibt es zwar Workarounds, aber dies macht diese Methode dann natürlich deutlich komplexer. Alternative: Companion column-Methode von Ingo Chao (ist aber auch relativ komplex).

Suchmaschinenoptimiertes tabellenloses CSS-Layout mit Fußzeile immer am unteren Rand

Möchte man eine Fußzeile, die sich unabhängig von der Höhe der Container, immer am unteren Fensterrand befindet, dann kann man wie folgt vorgehen:

Quelltext HTML:

<div id="wrapper">
<div id="inhalt">Inhalt - gelber Container</div>
<div id="fuss">Fuszeile - gr&uuml;ner Container</div>
</div>

CSS Quelltext:

html, body {
margin:0;
padding:0;
height: 100%;
}
#wrapper {
background-color: #0000FF;
position: relative;
min-height: 100%;
}
#inhalt {
background-color: #FFFF00;
}
#fuss {
background-color: #00FF00;
position: absolute;
bottom:0;
width:100%;
}

Ergebnis:

Für den IE6 der min-height nicht kennt, wird heigth:100% im html selektor eingefügt.

Vertikale Zentrierung ohne Tabelle mittels CSS

Hier noch eine Möglichkeit Inhalte horizontal und auch vertikal ohne Tabellen zu zentrieren:

Quelltext HTML:

<div id="zentriert">Horizontal und vertikal zentrierter Container</div>

CSS Quelltext:

html, body {
height:100%;
margin:0;
padding:0;
}
body {
min-width:400px;
min-height:200px;
position:relative;
}
#zentriert {
background-color:#FFFF00;
width:400px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-100px;
}

Ergebnis:

Der CSS Anweisungen in den Selektoren html und body bedarf es, damit der zentrierte Container nicht außerhalb des Browserfensters verschwindet, wenn das Browserfenster kleiner als der Container wird.