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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".