Professionelle Textgestaltung

Listen und Floats

Sie müssen nicht immer 18 Pixel an einer Stelle hinzufügen, sondern lediglich insgesamt ein Vielfaches von 18 Pixeln. Sie können durchaus etwa 12 Pixel oben und 6 Pixel unten hinzufügen. Insgesamt muss die Summe jeweils 18 beziehungsweise ein ganzzahliges Vielfaches von 18 ergeben, um das Raster nicht zu stören.

Listen

Listen sind etwas komplexer als Absätze. Um die Lesbarkeit einer Liste zu verbessern, fügt man vor und/oder nach jedem Listeneintrag oder verschachteltem Listeneintrag einen Abstand hinzu.

In der Praxis können Sie entweder einen recht großen Abstand einer ganzen Grundlinienzeile verwenden oder ganz darauf verzichten, denn nur in diesen zwei Extremfällen können Sie gewährleisten, dass die Listeneinträge exakt auf dem Grundlinienraster zu liegen kommen.

Wenn Sie ein Grundlinienraster wie in unserem Beispiel von 18 Pixeln einsetzen, belassen Sie es lieber bei gar keinem Abstand vor einem Listeneintrag und fügen Sie lieber einen 18 Pixel großen Abstand danach. Konkret also:

Im Falle von verschachtelten Listen sind Sie gut beraten, den halben Wert vor und nach jedem Eintrag einzusetzen (in unserem Beispiel also line-height von 9 Pixeln). Das führt dazu, dass sich der verschachtelte Eintrag genau in die Mitte einer Zeile des Grundlinienrasters verschiebt, dafür kommen aber die nachfolgenden Inhalte genau auf dem Grundlinienraster zum Liegen.

Floats

Bilder und andere Seitenelemente, die sich im Text befinden, müssen eine Höhe besitzen, die durch die Höhe des Grundlinienrasters teilbar ist (in unserem Fall das Mehrfache von 18). Dann können Sie nämlich oben und unten einen margin-Abstand einfügen, der sich zum Mehrfachen des Grundlinienrasters addiert. Dadurch wird der Text korrekterweise direkt unter dem betreffenden Bild umgebrochen.

.left {
float: left;
margin: 0 18px 18px 0;
}
.right {
float: right;
margin: 0 0 18px 18px;
}

Andere float-Elemente sind problematischer, da es schwieriger ist, ihre Größe anhand ihrer Inhalte vorherzusehen. Solange Texte und Bilder sowie Abstände in einem Kasten die 18-Pixel-Regel befolgen, sollten sie sich integrieren lassen. Sie dürfen aber nicht vergessen, dass Ränder natürlich ebenfalls mitzählen:

.kasten {
border: 1px solid #ddd;
padding: 8px 8px;
margin-bottom: 18px;
}

Da in diesem Beispiel der obere und untere Rand des Kasten insgesamt auf eine Höhe von 2 Pixeln kommen, wurde die padding-Eigenschaft auf jeweils 8 Pixel gesetzt (8 + 8 + 1 + 1 = 18).

Damit im Inneren des Kastens nicht unnötig viel Platz hinter dem letzten Objekt entsteht, müssen Sie explizit Gegenmaßnahmen treffen. Konkret geht es hier darum, dem letzten Objekt in dem Kasten den unteren Abstand zu streichen. Am einfachsten gelingt es mittels:

.kasten :last-child {
margin-bottom: 0;
}

Internet Explorer 6 versteht diese Anweisung nicht, aber das ist nicht weiter schlimm. Da das Raster intakt ist, können Sie den extra Abstand in IE6 getrost ignorieren. Beim CSS-Formatieren von Text in einem Kasten wie diesem sollten Sie darauf achten, dass Sie dasselbe Grundlinienraster verwenden sollten - auch dann, wenn Sie die Textgröße verändern.

Alle halbwegs aktuellen Webbrowser skalieren Pixel-basierte Layouts proportional mit dem Text, dagegen aber nicht die Werte der margin-Eigenschaft und auch nicht die Bilder.

Wenn Sie ein Raster als die Grundlage eines Webseiten-Layouts verwenden, können Sie für Ihren Text auch relative Einheiten verwenden. Die Berechnungen der Zeichengröße und des Zeilenabstands werden wesentlich komplizierter, aber das Prinzip bleibt gleich.

Bildergalerie

Textgestaltung mit CSS
Galerie
Professionelle Textgestaltung

Grid-basierte Layouts vermitteln Ordnung und Übersichtlichkeit, auch wenn sie nur unvollständig umgesetzt sind (am Beispiel von www.focus.de).

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…