Angesichts solcher Kommentare zur aktuellen Lage in Japan, erschien mir eine Definition dieses Begriffs nötig.

Im Großen und Ganzen bin ich ganz zufrieden mit dem Ergebnis. Wenn hier und da noch ein paar Macken auftreten, die werden sicher bald behoben sein. Falls ihr irgendwo noch über rumliegende Farbeimer stolpert, würde ich mich über einen kurzen Hinweis freuen.

Und wie findest Du, lieber Leser, das neue Outfit?

Vom float zur Tabelle

Eines muss man der alten Technik, Websites mit Tabellen zu gestalten, lassen: das Layouten war recht einfach. Der Bildschirm wurde in ein Raster unterteilt und baukastenartig konnte man alle Elemente pixelgenau dort anordnen, wo man wollte. Mehrspaltige Layouts wurden einfach in Tabellenspalten überführt. Das diese Methode zu recht überholt ist, sollte kein Geheimnis mehr sein, auch wenn man sie noch viel zu oft antrifft.

Eine aktuell sehr Verbreitete Methode ist die sog. Faux Columns Technik, in der man mehrere Spalten durch eine, sich in y-Richtung widerholende Hintergrundgrafik simuliert. Der Nachteil daran liegt auf der Hand: eine feste Breite für alle Spalten. Auch mein erstes Blogtemplate baute darauf auf.

Die Lösung: entweder man arbeitet nur mit floatenden Elementen, was in meinem Fall sicher auch gegangen wäre, aber den Nachteil hat, dass die Höhen der Spalten sich ausschließlich nach dem Inhalt richten. Oder man bedient sich der Möglichkeit mittels CSS beliebige HTML-Elemente wie Tabellen darstellen zu lassen mit dem Vorteil, dass alle Spalten mitwachsen. Und das ganze sieht dann so aus:

HTML:
<div id="wrapper">
    <div id="row"><!-- siehe Nachtrag -->
       <div class="col" id="sidebar"></div>
       <div class="col" id="content"></div>
       <div class="col" id="right"></div>
    </div>
</div>

Und die entsprechende CSS-Anweisung:

CSS:
 
div#wrapper {
   display:table;
   margin: 0 auto;
   /** Breitenangabe hier überflüssig, 
   *    siehe Nachtrag
   *    width:66em;
   */
}
 
div#row {
    display:table-row;
}
 
div.col {
   display:table-cell;
   vertical-align:top;
}
/**
*   hier folgen die Breitenangaben für 
*   #sidebar, #content, #right 
*/

Wir haben also drei Tabellenspalten nebeneinander deren Höhe sich nach der mit dem meisten Inhalt richtet. Wie bei einer HTML-Tabelle. Die vertical-align-Angabe stellt sicher, dass wir in allen Browsern den Inhalt am oberen Zellenrand ausrichten.

Formatierung im Detail

Um der Inhaltsspalte auch bei kurzen Beiträgen die volle Bildschirmhöhe zuzuweisen, reicht eine einfache Höhenangabe von 100%, die durch die Tabellenformatierung jetzt Browserübergreifend als Mindesthöhe interpretiert wird. Die Elternelemente müssen diese Angabe natürlich ebenfalls bekommen:

CSS:
 
html,
body,
#wrapper,
#content {
    height:100%;
}

Die Gesamtbreite habe ich so gewählt, dass bei einer 16er Schriftgröße und einer 1024er Bildschirmbreite noch alles drauf passt. Die Breiten der Spalten sind Pi-mal-Daumen so eingestellt, dass das Gesamtbild stimmt.

Und der IE?

Der kennt bis einschließlich Version 7 kein display:table(-cell). Eine Lösung hält das Buch von I.Chao und C.Rudel Fortgeschrittene CSS-Techniken bereit. In der ie.css stehen folgende Anweisungen:

CSS:
 
#sidebar,
#content,
#right,
#row
{
	display:inline;
	zoom:1;
}

Das ist der ganze Trick. Für mich völlig unklar, aber es funktioniert einwandfrei. Es stehen noch weitere Anweisungen in der Extrawurst für den IE, hauptsächlich Höhen- und Breitenangaben für diverse Elemente. Aber das kennt man ja.

media=”handheld”

Bleiben noch die mobilen Geräte. Mein Test beschränkt sich auf die Ansicht mit einem Blackberry Smartphone. Dieses stellt das Spaltenlayout korrekt dar, allerdings ist die Bildschirmaufteilung nicht gerade günstig für die kleinen Bildschirme. Daher ist der Skiplink ganz am Anfang auch sichtbar. In Zukunft werde ich vieleicht noch ein Extrastylesheet für Mobile Geräte einbinden. Mal schauen.

Neues WordPress-Theme

Das Design hier wird langsam zum richtigen WordPress-Theme, da ich mehr und mehr einen Einblick in die Template-Tags von WordPress gewinne. Wem das Theme also gefällt, der darf es gern nutzen. Kurzer Kommentar hier, oder Anfrage per E-Mail reicht.
Wer noch Fehler in der Darstellung findet, oder einfach nur mal seine Meinung zum Design los werden will, ich würde mich über einen kurzen Hinweis freuen.

Nachtrag 25.08.
In meinem Layout hatte ich es schon lange gefixt, hier fehlt es natürlich noch: die table-row. Fehlt die, so kann es im Firefox zu Darstellungsfehlern kommen.

Außerdem habe ich die Breitenangabe für den #wrapper entfernt und statt dessen nur noch die Spalten mit einer Breitenangabe versehen. Da display:table bewirkt, dass die Objektbreite sich an dem Inhalt ausrichtet, war diese Angabe überflüssig.

WordPress ist schon toll. Zwar hat es mich einige Nerven gekostet, dem Programm mein Design aufzuziehen, aber nun passt das und ich muss sagen, das Templatesystem von WP ist recht eingängig, wenn man erstmal einen Zugang gefunden hat. Dabei hat mir dieses Tutorial sehr geholfen. Wenn ich irgendetwas übersehen haben sollte und es zu Fehlern in der Anzeige des Blogs kommt, dann würde ich mich über einen kurzen Hinweis per Kommentar oder E-Mail sehr freuen. Allgemein sind Kommentare gern gesehen.

So und nun viel Spaß hier.