Das TYPOlight-CSS-Framework verstehen und verwenden

In Form gebracht
Kommentare

Haben Sie bisher geglaubt, dass Content-Management-Systeme Inhalte nur in der Hauptspalte ausgeben können? Oder mussten Sie Dateien bearbeiten, um Module hinzuzufügen oder deren Reihenfolge zu ändern? Komplizierte Lösungen für die Erstellung von Seitenlayouts gibt es genug. Zeit, TYPOlight kennenzulernen.

TYPOlight geht bei der Umsetzung von Seitenlayouts einen anderen Weg, als Sie ihn vielleicht von Ihrem jetzigen CMS gewohnt sind. Wenn Sie jedoch offen für Neues und grundsätzlich an praktikablen Lösungen interessiert sind, stelle ich Ihnen in diesem Artikel die Philosophie und die Möglichkeiten des TYPOlight-CSS-Frameworks vor. Neben den Grundlagen zeige ich Ihnen auch, wie Sie Grid-Systeme einfach einbinden und – falls es tatsächlich einmal notwendig sein sollte – eigene Seitenvorlagen erstellen. Das Wichtigste vorab: TYPOlight setzt bei Seitenlayouts vollständig auf Stylesheets. Der generierte (X)HTML-Quelltext ist immer gleich und wird ausschließlich mittels CSS formatiert. Sie kennen dieses Prinzip eventuell von der Webseite CSS Zen Garden: Der Code bleibt derselbe, es ändert sich nur das Stylesheet. Dass dieser Ansatz mehr als ausreichend ist, zeigen die über 200 unterschiedlichsten Designs, die dort mittlerweile hochgeladen wurden. Und falls Sie doch mal an die Grenzen des mit CSS Machbaren stoßen, bietet TYPOlight auch umfangreiche Möglichkeiten, die (X)HTML-Ausgabe an Ihre Vorstellungen anzupassen.

Grundsätzlicher Aufbau

Der Ausgangspunkt für die Erstellung bzw. Integration eines Designs in TYPOlight ist das Backend-Modul Seitenlayouts, in dem Sie verschiedene Seitenlayouts mit unterschiedlichen Layoutbereichen anlegen und ihnen beliebige Module zuweisen können (Abb. 1). Auch die Einbindung der Stylesheets, die Sie entweder mit dem gleichnamigen Backend-Modul oder per Hand angelegt haben, lässt sich hier vornehmen.

Abb. 1: Einbindung von Modulen in das Seitenlayout

Aus den Daten des Seitenlayouts erstellt TYPOlight automatisch das Grundgerüst Ihrer Webseite, das standardmäßig aus einer bis drei Spalten sowie einer optionalen Kopf- und Fußzeile besteht. Sollten Ihnen diese fünf Layoutbereiche einmal nicht ausreichen, können Sie TYPOlight einfach um eigene Layoutbereiche erweitern, die dann ebenfalls im Seitenlayout verfügbar sind.

Der generierte Code im Detail

Das CSS-Framework kann mehr, als nur verschiedene Layoutbereiche und die darin enthaltenen Module aneinanderzureihen. Einer der größten Vorteile ist, dass das erstellte Grundgerüst browserübergreifend funktioniert und eventuelle Darstellungsfehler automatisch ausgleicht. Dies geschieht hauptsächlich durch spezielle CSS-Anweisungen, teilweise aber auch durch zusätzliches Markup, ohne dass der Internet Explorer bis einschließlich Version 7 seine Dienste verweigert. Das vereinfachte HTML-Grundgerüst finden Sie in Listing 1.

Listing 1: HTML-Grundgerüst der Seitenvorlage fe_page.tpl

Natürlich werden nur die Layoutbereiche ausgegeben, die Sie in Ihrem jeweiligen Seitenlayout aktiviert haben. Der dazugehörige CSS-Code befindet sich in der Datei /system/typolight.css (Listing 2) bzw. direkt „inline“ im Quelltext der Seite. Er dient dazu, die verschiedenen Layoutbereiche zu positionieren und ihnen die im Seitenlayout festgelegten Abmessungen zuzuweisen.

Listing 2: CSS-Anweisungen für die Standardseitenvorlage

body { margin:0; padding:0; font-size:100.01%; text-align:left; position:relative; }
select,input,textarea { font-size:99%; }
form { margin:0; padding:0; }
img { border:0; }
#left { float:left; }
#right { float:right; }
#main { width:auto; position:relative; }
.inside { position:relative; text-align:left; }
.block { overflow:hidden; }
.clear,#clear { height:0.1px; font-size:0.1px; line-height:0.1px; clear:both; }
.invisible { width:0px; height:0px; left:-1000px; top:-1000px; position:absolute; overflow:hidden; display:inline; }

Die gängigen Internet-Explorer-Darstellungsfehler, die hauptsächlich in der Version 6 und früheren Versionen auftreten, werden im Stylesheet /system/iefixes.css behoben (Listing 3). Die CSS-Klasse block und das zusätzliche „Clearing-Element“ im HTML-Code (

) dienen ebenfalls allein diesem Zweck.

Listing 3: Fehlerbehebung im Internet Explorer

* html .block { overflow:auto; zoom:1; }
* html #container,* html .mod_article { zoom:1; }
* html #left,* html #right { display:inline; }
* html a,* html a:hover { background-color:transparent; }
* html i,* html em { overflow:visible; display:inline-block; }
*:first-child+html #main { position:static; }

Durch die Anweisung zoom:1 wird im Internet Explorer die proprietäre Eigenschaft hasLayout aktiviert und damit unter anderem der „Escaping Floats Bug“ behoben. Um ein möglichst robustes Layout zu erhalten, wird dieser Befehl auf alle Artikel und Inhaltselemente angewendet.Die Anweisung display:inline wirkt dem „Double Float-Margin Bug“ entgegen und verhindert doppelte Abstände der linken und rechten Spalte. Falls Sie noch explizit für den IE6 entwickeln, müssen Sie die Anweisung unter Umständen auch für Listen und Navigationsmenüs ergänzen, in denen Blockelemente definiert wurden.Die folgenden beiden Anweisung für Hyperlinks und kursive Texte dienen der Behebung des „Guillotine Bug“ und des „Italics Bug“ und die letzte Anweisung sorgen dafür, dass der IE7 die Hauptspalte korrekt ausrichtet und gegebenenfalls zoomt. Darüber hinaus gibt es natürlich – oder vielmehr leider – noch etliche andere Bugs wie den „Disappearing List Background Bug“ oder den „List Numbering Bug“, die sich jedoch nur im Kontext des Markups und der dazugehörige CSS-Formatierungen beheben lassen. Eventuell müssen Sie also weitere IE-Bugfixes einbauen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -