Kapitel 7.1: Grundlagen der visuellen Formattierung
Block-(Level-)Elemente
Die Blockbox hat eine äussere Ecke (Outer edge), einen äussern Rand (margin), einen sichtbaren Rand(border), einen Innenabstand (padding), eine innere Ecke (inner edge)mit einer Breiten- und Höhenangabe des Content-Bereichs (width/height). Alle dem Content-Bereich äussern Elemente können mit "top", "right", "bottem", und "left" (im Uhrzeigersinn bei zusammenfassenden Angaben) angesprochen werden.
Je nach Browser wird eine bestimmte Darstellungs des Elementes ausgewählt und mit CSS-Eigenschaften können die einzelnen Teile vielfältig definiert werden.
Horizontale Formattierung von Blockelementen
Beispiel: <p style="width:200px;padding:10px;margin:20px;">Wideness</p>
Die effektive Breite des Elementes besteht aus: margin + border-width + padding + content.
Dies ergibt eine Gesamtbreite von 260px. Alle Teile des Blocks werden horizontal und vertikal zur definierten "width" und/oder "height"-Angabe für den sichtbaren Content-Bereich hinzuaddiert (Padding,Margin,Border). Die Box ist also je nach dem grösser, als der sichtbare Content-Bereich.
Generell gesagt übernimmt das verschachtelte (Kind-)Element die Breite des übergeordneten Elements.
Die horizontalen Eigenschaften bestehen aus: margin-left + border-left + padding-left +width + padding-right + border-right + margin-right (7) Die Gesamt-Summe ist immer die Breite des umgebenden Elementes. (Elternelement)
Auf einen auto-Wert können nur drei dieser sieben Elemente gesetzt werden: Margin-left, margin-right und width. Alle andern brauchen positive oder Null-Angabe. Nur margin kann dabei eine negative Wert-Angabe haben.
Benutzung von "auto"-Werten
Auch bei auto summiert sich die Breite zur Breite des umgebenden Elementes.
Beispiel: p{margin-left:auto;margin-right:100px; width:100px;} //auto left-margin wird 200px breit, wenn die Gesamtbreite des übergeorneten Elementes 400px ist.
Werden jedoch alle Elemente definiert und sind breiter, als das Elternelement, so wird der margin-right automatisch auf auto gesetzt.
Beispiel: p{margin-left:100px;margin-right:100px;width:100px;}//margin-left wird 200px bei 400px Gesamtlänge des übergeordneten Elements. (Overconstrained). Dies gilt nur für Textflüsse ltr, nicht aber rtl.
Wird der rechte und linke Rand margin auf auto gesetzt, so wird die width-Angabe automatisch an die Breite des übergeordneten Elements addiert.
Beispiel: p{width:100px;margin-left:auto;margin-right:auto;}//Width wird von den Rändern zentriert.
Das ist auch die richtige Angabe für das Zentrieren eines Elementen und nicht bloss eines Element-Inhalts (text-align).
(Nur Browser ab Versionsdatum nach Februar 1999 stellen Zentrierung – teilweise – richtig dar).
Beispiel: p{margin-right:100px;width:auto}//Margin-left wird auf null gesetzt.
Werden alle Eigenschaften auf auto gesetzt, so gibt es keine Ränder und die Breite wird vom Content bestimmt.
Beispiel: div{padding:30px;background:silver;}
p{margin:20px;padding:0;background:withe;}//Offset ist implizit im übergeordneten Element (padding,margin) enthalten. Elemente kollabieren nicht zusammen.
Negative Margins
(Werden vom Browser nicht unbedingt richtig dargestellt)
Beispiel: div{with:400px;border:3px solig black}
p.wide{margin-left:10px;width:auto;margin-right:-50px}
Ergibt: 10px+0+0+440+0+0-50px=400px //width wird auf 440 px gesetzt. Das innere Element ragt aus dem äusseren Element rechts hinaus.
Beispiel: div{width:400px;border:3px solid black}
p.wide{margin-left:10px;width:500px;margin-right:auto}
Ergibt: 10px + 3px +0 + 500px + 0 + 3px -116px = 400px //Border-right wird negativ.
Bei negativem left-margin geht der innere Block über den linken Rand des äusseren Elementes und verschwindet ev. am Bildschirmrand.
Prozentangaben
Hier verhält es sich genau gleich wie mit Zahlenangaben und das Element geht auf 100% Breite des übergeordneten Elementes.
Reine Prozentangaben funktionieren nur, wenn auf Borders verzichtet wird. (Borders können nicht prozentual gesetzt werden).
Replaced Elements als Block
Beispiel: <img src="smile.png" style="display:block;width:auto;margin:0>
Das Bild wird in seiner Originalgrösse dargestellt (width:auto) Breite und Höhe des Elements werden automatisch proportional angepasst, wenn eine width-Angabe gemacht wird.
Vertikale Formatierung von Block-Level-Elementen
CSS1 kannte keine height-Angabe ausser auto. Anders ist das in CSS2 und CSS2.1. Dort ist es notwendig, mit dem height-Attribut zu dealen. Ist der Inhalt eines Blockelementes grösser als die definierte Höhe, so gelten die Regeln der Eigenschaft "overflow", die je nach Browser, eine Scrollbar erzeugt. Ist die Höhe grösser als die Inhalte, so ensteht ein Leerraum oben und unten (Padding).
Wie bei der Breite (width) addieren sich Margin-, Border- und Padding-Angaben in Block-Level-Elementen.
Wie bei der horizontalen Definition können nur drei Werte (height, margin-top und margon-bottom als "auto" definiert werden, wobei height nicht unter null fallen kann. Auto-Angaben von margin-top und margin-bottom tendieren auf null im normalen Textfluss und verhindern so die vertikale Zentrierung von Contentelementen (nicht so bei der horizontalen Zentrierung).
Prozentangaben
Sie funktionieren bei height-Angaben nur, wenn die Margins nicht auf auto gesetzt sind, ansonsten hat es keine Wirkung (weil die Margins auf null gesetzt werden). Vertikale Zentrierung wird ermöglicht, wenn margin-top und margin-bottom beispielsweise auf 25% gesetzt werden und das height-Element auf 50%.
Auto-height stellt den gebrauchten Platz für die nachfolgenden Inline-Elemente gerade zur Verfügung und enthält keine Paddings.
Enthält ein Block-Level-Element ein auto-height und sind die nachfolgenden Elemente auch Blocklevel-Elemente, so ist die Höhe durch den obersten Rand des obersten Elementes und den untersten Rand des untersten Elementes definiert.
Beispiel 1: <div style="height: auto;background:silver">
<p style="margin-top: 2em;margin-bottom:2em"></div>
Das P-Element ist nur eben so gross wie sein Inhalt.
Bespiel 2: <div style="height:auto;border-top:1px solid;border-bottom:1px solid;background:silver">
Das Element nimmt seine effektive Höhe dank Border (und ev. Padding) nun ein.
Zusammenfallen der vertikalen Ränder
Nur benachbarte Margins können zusammenfallen. Nicht jedoch Paddings und Borders.
Werden Listenelemente übereinander angeordnet und mit verschieden Top-margins und bottom-margins versehen, so wird der geringere Margin-Wert (und nicht die Summe) umgesetzt.
Beispiel: ul{margin-top:15px}
li {margin-top:10px;margin-bottom:20px}
h1{margin-top:28px
Hier wird das Listenelement auf das margin-top des H1-Elementes von 28px gesetzt und das li-Element hat eine Distanz von 10px vom ul-Elment.
Im Detail wird der bottom-margin zusammengelegt mit dem ul-Rand des oberen Elementes. Es bleibt nur die Distanz zwischen dem h1 und dem ul-Element von 28px. (Beispiel im Buch p. 172)
Negative vertikale Margin-Angaben
Der absolute Wert des negativ gesetzten Randes wird vom positiven andern Rand abgezogen. Dies ergibt die Distanz zwischen den Elementen. Negative Margins setzen die Abweichung zum normalen Textfluss fest und zeigen das auch an.
Listenelemente
Der Marker gehört standardgemäss nicht selbst zum Listenelment, kann aber mit list-style-position :outside oder inside gesetzt werden. Mit der inside-Angabe rückt der Listenpunkt in die Listenbox selbst.
Weiter zu Kapitel 7.2: Formattierung von Inline-Elementen, Änderung des Diplays