CSS reloaded

Teil 3: [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets

In grids.css sind kleinere Strukturen zuhause, insbesondere Klassen mit denen Sie ein Block-Element in bis zu fünf Spalten unterteilen können. Dazu legen Sie zuerst eine neue Zeile an:

<div class="line">

In div.line packen Sie dann für jede Spalte ein weiteres div. Gemeinsames Merkmal aller Spalten ist die Klasse unit. Die Breite einer Spalte steuern Sie über eine zusätzliche Klasse, deren Name Sie nach dem Muster

sizeXofY

zusammensetzen. X und Y bilden dabei einen Bruch, sodass Sie beispielsweise mit

size1of2

eine Spalte mit einer Breite von 50 Prozent anlegen. Welche Maße verfügbar sind, lesen Sie in der Datei grids_docs.html. Die letzte Spalte kennzeichnen Sie mit der Klasse lastUnit, die dafür sorgt, dass automatisch der gesamte übrige Raum belegt wird.

Unabhängige Formatierungen

Bis hierhin enthält Blocks lediglich den Code, den Sie benötigen, um das Raster einer Seite solide aufzubauen. Ähnlich essenziell ist die content.css, in der die Objekte definiert werden, mit denen Sie Inhalte layouten - Überschriften, Absätze, Listen, Tabellen und so weiter. Der Schwerpunkt liegt dabei auf der Definition von Abständen, Ausrichtungen und Spezialitäten wie der Größe und Farbe von Text, dem list-style-type von Listen und dem Verhalten von Links.Die content.css zeigt zwar einerseits, dass Sullivan den Einsatz verschachtelter Definitionen vermeidet. Aber sie enthält auch die Ausnahmen von der Regel, beispielsweise .data table und .important a. Um diese Sonderfälle abzudecken, muss man die zweite Regel nur ein wenig erweitern: "Trenne Inhalt und Container. Ausnahmen innerhalb der in der Bibliothek definierten Inhalte und Container sind aber erlaubt."

© Archiv

Rund 200 verschiedene Boxen lassen sich schon jetzt aus den von Sullivan entwickelten Grundformen generieren.

Module und Skins

Ein Großteil der Blocks-Magie steckt in den Dateien mod.css und mod_skins.css. Deren Funktion erschließt sich am besten, wenn Sie die Datei module.html mit den Entwickler-Tools Ihres Browsers inspizieren, also zum Beispiel mit Firefox und Firebug. Sullivan definiert zunächst einen Container in HTML:

<div class="mod"><b class="top"><b class="tl"></b><b class="tr"></b></b><div class="inner"><div class="hd"><h3>mod</h3></div><div class="bd"><p>Mod ist der Basis-Container ...</p></div></div><b class="bottom"><b class="bl"></b><b class="br"></b></b></div>

Diesen Code können Sie überall dort einsetzen, wo Sie einen Kasten auf einer Webseite benötigen. Dass das HTML weit über ein <div></div> hinausgeht, hat seinen Grund darin, dass der Container genügend Material bieten muss, das sich per CSS stylen lässt.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.