Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/indent.html
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de/Style/Examples/007/indent.html
Übersetzer: A.Friedrich
Bookmark: AddThis Social Bookmark Button

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Web Style Sheets
CSS Tips & Tricks

(Diese Seite verwendet CSS Style Sheets)

Eingerückte Absätze

Eiffel tower

Verkleinertes Modell des Eiffel Turms in Parc Mini-France

Hier nun etwas Einfaches: wir rücken die erste Zeile eines Absatzes ein. Viele Leute finden einen Text einfacher zu lesen wenn die erste Zeile eingerückt wurde als Leerzeilen zwischen den Absätzen, gerade in langen Texten. Und es ermöglicht die Leerzeilen für wichtigere Absatztrennungen aufzusparen.

Der Trick dabei ist nur diese Absätze einzurücken welche bereits einem Absatz folgen. Der erste Absatz muss natürlich nicht eingerückt werden - das würde keinen Sinn machen. Ebensowenig würde es Sinn machen die Einrückung nach Überschriften oder anderen Elementen der Seite vorzunehmen. Im Fliesstext zeigt sich die Stärke dieser Technik. Die Regeln dafür sind sehr einfach:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

Das wird dafür sorgen dass die erste Zeile von genau den Absätzen eingerückt wird welche einem anderen Absatz folgen. Es verhindert auch dass störende Leerräume zwischen den Absätzen auftreten. In der Praxis kann es dennoch vorkommen dass gewisse Aussnahmen bedacht werden müssen.

In dieser Seite z.B., existieren P Elemente welche als Textunterschrift für ein Bild verwendet wurden (siehe das obige Beipiel). Diese wurden zentriert und wir möchten nicht dass hier irgendetwas eingerückt wird. Eine einfache Regel 'p.caption {text-indent: 0}' trägt dafür Sorge. Sie werden feststellen dass diese Regel in unserem Beispiel hier unabdingbar war.

Wir können nun verschiedene Abstände zwischen den Absätzen festlegen um die Wichtigkeit des jeweiligen Umbruches zu verdeutlichen. Lassen Sie uns drei verschiedene Abstände einrichten: stb (nicht so wichtiger Absatzumbruch), mtb (wichtigerer Absatzumbruch) und ltb (sehr wichtiger Absatzumbruch). Wir haben dem folgenden Absatz die Klasse stb zugewiesen um den Unterschied zu verdeutlichen.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
last updated $Date: 2007/01/15 13:04:18 $ GMT

IMPRESSUM