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.
Siehe CSS-FLOAT-Artikel:
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:
<div id="container"> <div id="inhalt">Inhalt - gelber Container</div> </div> <div id="navigation">Navigation - roter Container</div>
#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;
}Inhalte und auch eventuelle Formate müssen im gelben Container (#inhalt) und nicht in #container hinterlegt werden!
Hier nun ein Lösungsansatz für ein suchmaschinenoptimiertes dreispaltiges tabellenloses Layout:
<div id="inhalt">Inhalt - gelber Container</div> <div id="navigation">Navigation - roter Container</div> <div id="sidebar">Sidbar - grüner Container</div>
#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;
}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.
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:
<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üner Container</div> </div> <div id="fuss">Fußzeile - blauer Container</div>
#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;
}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).
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:
<div id="wrapper"> <div id="inhalt">Inhalt - gelber Container</div> <div id="fuss">Fuszeile - grüner Container</div> </div>
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%;
}Für den IE6 der min-height nicht kennt, wird heigth:100% im html selektor eingefügt.
Hier noch eine Möglichkeit Inhalte horizontal und auch vertikal ohne Tabellen zu zentrieren:
<div id="zentriert">Horizontal und vertikal zentrierter Container</div>
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;
}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.