Flexibles Wordpresstheme

Ich hatte ja schon mal drüber geschrieben, dass Layouts, die sich an der Schriftgröße des Browsers orientieren Vorteile gegenüber ihren fixierten Brüdern haben und dass, wo man kann, diese Möglichkeit der Umsetzung eines Designs bevorzugt werden sollte. Auch mein Blogdesign bietet sich dafür geradezu an, da ich auf grafische Finessen weitgehend verzichte. Und so wird es gemacht:

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:

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

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:

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:

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

Kommentare

Es wurden noch keine Kommentarte zu diesem Artikel geschrieben.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>