Websiteentwicklung: CSS: Box-Modell

Box-Eigenschaften

Das Box-Modell in CSS

Für die Präsentation in visuellen Medien verwendet CSS für blockbasierte Formate wie (X)HTML ein sogenanntes Box-Modell (englisch: box model), welches die Präsentation eines Dokumentes in rechteckige Kästen aufteilt, die wiederum aus ineinander verschachtelte Kästen für die Randverhältnisse dieses Kastens bestehen. Dazu zählen Eigenschaften für den Außenabstand (margin), den Rahmen (border), den Innenabstand (padding) und den Inhalt (beispielsweise ein Text, width und height). Für alle diese Bestandteile können unterschiedliche Abmessungen angegeben werden. Der Vorteil des Box-Modells liegt in der Möglichkeit, bei allen Elementen die Präsentation genau bestimmen zu können, in Bezug auf Größen, Dicken, Farben und der Ausrichtung der einzelnen Seitenelemente (oben (*-top), rechts (*-right), unten (*-bottom), links (*-left)). In der Regel können die vier Richtungsangaben in einer gemeinsamen Definition zusammengefasst werden, diese nennt man Kurzschreibweise (englisch: shorthand notation). Dabei werden diese Anweisungen im Uhrzeigersinn aufgelistet, beginnend mit dem Wert für oben.

Der Inhalt ist im einfachsten Falle der Text einer Seite einschließlich gegebenenfalls vorhandener Bilder und anderer eingebundener Medien. Dieser hat seinen Platz im Mittelpunkt der Box, um ihn werden die anderen Strukturen des Box-Modells "herumgebaut". Ohne weitere Angaben bestimmt sich die Breite (width) bei den meisten Elementen aus dem verfügbaren Platz, die Höhe (height) aus der vorhandenen Menge an Inhalt, der dann in den durch Höhe und Breite zur Verfügung gestellten Platz paßt.

Ausmaße einer Box

Wenn für eine Box Maßangaben für die Höhe oder Breite erfolgen, beziehen diese sich auf den Inhalt. Alle nachfolgend erläuterten Bestandteile werden erst durch das Darstellungsprogramm hinzu addiert. Eine Box als Blockelement und ohne Maßangaben gestaltet, erstreckt sich über die volle zur Verfügung stehende Breite, die Höhe jedoch richtet sich nach dem Inhalt.

Gesamtbreite = linker Rand + linker Rahmen + linkes Polster
               + Breite
               + rechter Rand + rechter Rahmen + rechtes Polster

Gesamthöhe   = oberer Rand + oberer Rahmen + oberes Polster
               + Höhe
               + unterer Rand + unterer Rahmen + unteres Polster

Höhe und Breite – width und height

Mit den Eigenschaften width und height kann Höhe und Breite eines Elementes festgelegt werden. Auf inzeilige, nicht ersetzte Elemente sind die Eigenschaften nicht anwendbar. Ein inzeiliges, ersetztes Element ist eines, wo der - gegebenenfalls leere - Inhalt durch etwas ersetzt wird, etwa durch ein Bild oder allgemeiner ein anderes Dokument - in dem Sinne ist ein inzeiliges Element auch dann ein ersetztes, wenn der Inhalt trotzdem als Alternativtext statt des ersetzenden Inhaltes verwendet wird.

Der Wert ist eine nicht negative Länge oder ein nicht negativer Prozentwert, wobei sich der Prozentwert bei width auf die Breite der Box des umgebenden Elementes bezieht, bei height auf dessen Höhe. Prozentangaben sind nur definiert, wenn die Breite beziehungsweise Höhe des Elternelementes nicht von seinem Inhalt abhängt. Dazu gibt es das Schlüsselwort 'auto', welches auch die Voreinstellung ist und wie bei allen Eigenschaften das Schlüsselwort 'inherit', wenn die Größe vom Elternelement geerbt wird. Sonst werden die Eigenschaften nicht vererbt.

Beispiel drei positionierte (siehe Abschnitt unten) Quadrate, das erste enthält die beiden anderen:

div.Q1 {
  position: relative;
  width: 10em;
  height: 10em;
  background: rgba(200,200,200,0.4)
}
div.Q2 {
  position: absolute;
  top: 2em;
  left:2em;
  width: 5em;
  height: 5em;
  background: rgba(0,0,200,0.7)
}
div.Q3 {
  position: absolute;
  top: 4em;
  left: 4em;
  width: 5em;
  height: 5em;
  background: rgba(240,60,0,0.4)
}

Minimale und maximale Höhe und Breite – min-width, max-width, min-height und max-height

Statt die Größe des Inhalt mit width und height nur exakt festzulegen, können auch Schranken angegeben werden, die festlegen, welche Größen nicht unter- oder überschritten werden dürfen.

Die Anwendbarkeit ist dieselbe wie für width und height mit Ausnahme von Tabellenelementen, wo das Verhalten undefiniert ist. Vererbt werden die Eigenschaften nicht. Werte sind ebenfalls wie bei width und height nicht negative Längen und Prozente und 'inherit'. Bei max- kommt noch 'none' hinzu für keine Einschränkung.

Für min-* ist der Initialwert 0, für max- das Schlüsselwort 'none'.

Die Eigenschaften werden berücksichtigt, indem zunächst Höhe und Breite ohne die Eigenschaften bestimmt werden. Liegen die Größen außerhalb der Schranken, wird die nächstgelegene Schranke als Größenangabe verwendet.

Beispiel mit obigen Quadraten, diesmal werden Höhe und Breite des äußersten Quadrates allerdings durch den Inhalt mitbestimmt, indem min-* und max- verwendet werden:

div.Q1 {
  min-width: 4em;
  max-width: 15em;
  max-height: 8em;
  min-height: 6em;
  background: rgba(200,200,200,0.4);
  margin-bottom: 10em
}
/* Rest siehe oben, Blöcke aber nicht positioniert, 
   dazu ein Absatz mit Text */

Das ist der Absatz mit Text, der vermutlich so lang ist, dass er durch die angegebene maximale Breite umgebrochen wird.

Innenabstand (Polster) – padding

Der Innenabstand (auch Polster) gibt den Abstand des Inhalts zum Rahmen der Box an. Der Innenabstand (padding) wird im Gegensatz zum Außenabstand (margin) durch die Hintergrundfarbe beeinflusst. Es besteht die Möglichkeit einen allgemeinen Abstand zu definieren (padding), oder jede beliebige Seite einzeln (padding-top, padding-right, padding-bottom, padding-left).

Der Wert jeder Einzelangabe ist eine nicht negative Länge oder ein nicht negativer Prozentwert. Der Wert für padding kann aus ein bis vier Werten entsprechend einer Einzelangabe bestehen, die mit Leerzeichen voneinander separiert sind. Die Eigenschaft wird nicht vererbt, der Initialwert für jede Einzelangabe ist 0. Prozentangaben beziehen sich auf die Breite des umgebenden Blockes. Prozentangaben sind somit undefiniert, wenn die Breite des umgebenden Blockes von dem Element abhängt, für welches die Angabe zu padding in Prozent angegeben ist.

Wird für padding ein Wert angegeben, gilt er für alle Seiten. Bei zwei Werten gilt der erste Wert für padding-top und padding-bottom, der zweite für die beiden anderen. Bei drei Werten gilt der erste Wert für padding-top, der zweite für padding-right und padding-left, der dritte für padding-bottom. Bei vier Werten gilt die Zuordnung in der Reihenfolge padding-top, padding-right, padding-bottom, padding-left.

Beispiel:

p {
  padding-top:     1em;
  padding-right:   2em;
  padding-bottom:  1em;
  padding-left:    2em
}
/* ist äquivalent zu */
p {
  padding: 1em 2em
}

In diesem Beispiel wird den Absätzen links und rechts ein Innenabstand von 2em sowie oben und unten jeweils 1em zugewiesen.

Rahmen – border

Der Rahmen (border) schließt direkt an den Innenabstand an. Es kann eine allgemeine oder eine für jede Seite bestimmte Rahmenformatierung definiert werden (border-top, border-right, border-bottom, border-left). Ferner können auch noch Rahmeneigenschaften getrennt angegeben werden (border-width, border-style, border-color) und jeweils noch die Eigenschaft pro Seite in der Form 'border-S-E' wobei S ersetzt wird durch 'top', 'right', 'bottom' oder 'left' und E durch 'width', 'style oder 'color', also zum Beispiel border-top-color.

Die Eigenschaften können bei allen Elementen verwendet werden und werden nicht vererbt.

Rahmenbreite – border-width

Die Eigenschaft border-width legt die Rahmenbreite fest, entsprechend border-top-width, border-right-width, border-bottom-width, border-left-width für die Einzelseiten.

Der Wert einer Einzelangabe ist entweder eine nicht negative Länge oder eines der drei folgenden Schlüsselwörter, für die lediglich eine Größenrelation festgelegt ist:

'thin' <='medium' <= 'thick'.

Bei diesen Schlüsselwörtern hängt die konkrete Breite vom Darstellungsprogramm ab, ist aber pro Schlüsselwort und Dokument einheitlich durchzuhalten. Daneben kann natürlich wie immer auch 'inherit' als Schlüsselwort verwendet werden. Der Initialwert ist 'medium', als berechneter Wert wird entweder die absolute Länge verwendet oder aber 0, falls der zugehörige border-style den Wert 'none' oder 'hidden' hat.

Für border-width selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Beispiel:

p {
border: solid black;
border-top-width: thick;
border-bottom-width: medium;
border-left-width: thin;
border-right-width: 5em
}

Beispiel mit unterschiedlichen Rahmendicken wie angegeben.

Rahmenfarbe – border-color

Die Eigenschaft border-color legt die Rahmenfarbe fest, entsprechend border-top-color, border-right-color, border-bottom-color, border-left-color für die Einzelseiten.

Der Wert einer Einzelangabe ist entweder eine Farbangabe oder eines der Schlüsselwörter 'transparent' oder 'inherit'. Bei 'transparent' ist der Rahmen zwar gegebenenfalls vorhanden (was für die Berechnung der gesamten Box relevant ist), aber nicht sichtbar. Der Initialwert ist der Wert der Eigenschaft color (in Farbmodul von CSS 3 ist dies das von SVG übernommene Schlüsselwort 'currentColor', welches es aber in CSS 2.1 und frühreren Versionen noch nicht gibt).

Für border-color selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Beispiel:

p {
border: solid 1em;
border-top-color: red;
border-bottom-color: green;
border-left-color: blue;
border-right-color: yellow
}

Beispiel mit unterschiedlichen Rahmenfarben wie angegeben.

Rahmenstil – border-style

Die Eigenschaft border-style legt den Rahmenstil fest, entsprechend border-top-style, border-right-style, border-bottom-style, border-left-style für die Einzelseiten.

Der Wert einer Einzelangabe ist eines der folgenden Schlüsselwörter:

inherit: geerbt
none: Kein Rahmen, zugehörige border-width wird gleichzeitig 0, Initialwert
hidden: Kein Rahmen wie 'none', aber bei Tabellen entfallen alle überlappenden Rahmenstücke, wenn eines davon diesen Wert hat, egal wie die Werte der anderen Rahmenstücke sind
dotted: Punktierter Rahmen
dashed: Gestrichelter Rahmen
solid: Rahmen aus durchgezogener Linie
double: Rahmen mit zwei durchgezogenen Linien; die Breiten der Linien zusammen mit dem Abstand dazwischen sind gleich der zugehörigen border-width
groove: Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Rahmen wäre in die Malebene eingelassen oder eingeritzt
ridge: Gegenteiliger Effekt von 'groove'; Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Rahmen träte aus der Malebene hervor
inset: Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Inhalt läge in einer Vertiefung
outset: Gegenteiliger Effekt von 'inset'; Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Inhalt läge auf einer Erhöhung

Die Beschreibungen sind nicht sehr detailliert, wie die Stile genau erzeugt werden sollen, bei den komplizierteren Mustern liegt es am Darstellungsprogramm, den Stil plausibel umzusetzen, der Autor der Stilvorlage hat keinen weiteren Einfluß auf die Umsetzung.

Für border-style selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Beispiele siehe folgender Abschnitt.

Kurznotation Rahmen – border

Mit der Eigenschaft border kann alles zusammengefaßt werden, oder für die Einzelseiten: border-top, border-right, border-bottom, border-left.

Als Wert wird entweder 'inherit' notiert oder eine Kombination von ein bis drei Einzelwerten in der Reihenfolge border-width, border-style, border-color.

Für weggelassene Einzelwerte wird der jeweilige Initialwert angenommen.

Beispiele

Das folgende Beispiel zeichnet eine 2 Pixel breite, durchgezogene, blaue Linie um einen Absatz:

p {
  border: 0.5ex solid blue
}

Ein Absatz mit blauem Rahmen.

Das folgende Beispiel zeichnet links und rechts eine dicke blaue und oben und unten eine dünne grüne Linie:

p {
  border-top:     2px solid green;
  border-right:   10px solid blue;
  border-bottom:  2px solid green;
  border-left:    10px solid blue
}
/* das gleiche Resultat erzielen Sie auch so: */
p {
  border-style: solid;
  border-width: 2px 10px;
  border-color: green blue
}
/* oder wie hier: */
p {
  border-style: 2px solid green;  /* gilt für alle Seiten */
  border-right-width: 10px;   /* …und wird dann lediglich für rechts */ 
  border-left-width:  10px;   /* und links überschrieben */
  border-right-color: blue;
  border-left-color:  blue
}

Ein Absatz mit buntem Rahmen.

Die verschiedenen Stile bei einer Stärke von 1em (border: 1em STIL #fc9):

solid

double

dotted

dashed

groove

ridge

inset

outset

Rahmen bei Tabellen

Bei Tabellen können die Rahmen von Zellen überlappen oder nebeneinanderliegen, daher kann das Verhalten festgelegt werden.

Dies gilt nur für Boxen, welche als Tabelle definiert sind (display: table; oder display: inline-table;).

Zusammenfallende Rahmen – border-collapse

Wenn zwei Tabellenzellen aneinandergrenzen, kann festgelegt werden, ob sie unabhängig bleiben oder die Rahmen ineinander kollabieren sollen.

Der Wert der Eigenschaft border-collapse ist eines der Schlüsselwörter 'collapse', 'separate' oder 'inherit'. Die Eigenschaft wird vererbt. Bei 'collapse' fallen benachbarte Rahmen zusammen, 'kollabieren'. Bei 'separate' liegen sie nebeneinander und bleiben beide erhalten. Der Initialwert ist 'separate'.

Beispiel:

table {
  border:           1px solid black;
  border-collapse:  collapse
}

Haben im Falle von 'collapse' zwei benachbarte Zellen Angaben zum Rahmen, die miteinander in Konflikt stehen, wird nur der 'auffälligere' Rahmen angezeigt, solange keiner der beteiligten Rahmenstile 'hidden' ist.

Im Detail gelten folgende Regeln für einen Konfliktfall:

Ist für einen Rahmen 'hidden' angegeben, wird gar kein Rahmen dargestellt
Sonst: Rahmen mit dem Stil 'none' haben die niedrigste Priorität, hat ein anderer Rahmen einen anderen Stil, wird der dargestellt
Sonst: Breitere Rahmen werden zugunsten benachbarter dünnerer angezeigt.
Sonst bei gleicher Rahmenbreite gilt folgende Reihenfolge für den bevorzugt darzustellenden Rahmenstil, von höchster zu niedrigster Priorität: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'.
Sonst, sind nur unterschiedliche Farben angegeben, gewinnt die Angabe einer Zelle gegenüber der Angabe einer Zeile,

die gewinnt gegenüber einer Zeilengruppe, die gegenüber einer Spalte, die gegenüber einen Spaltengruppe, die gegenüber der gesamten Tabelle

Gibt es sonst einen Konflikt zwischen zwei Elementen gleichen Typs, gewinnt, wer weiter links steht (Bei Schreibrichtung von links nach rechts, sonst rechts oben) und dann, wer weiter oben steht.

Dann gibt es für den Stil noch die Sonderregel, dass bei 'collapse' der Stil 'inset' wie 'ridge' dargestellt wird, während 'outset' im Falle 'separate' wie 'groove' dargestellt wird.

Rahmenabstand – border-spacing

Wird border-collapse als 'separate' gewählt, so kann mit border-spacing der Abstand zwischen benachbarten Rahmen angegeben werden.

Der Wert ist entweder 'inherit' oder eine nicht negative Länge optional gefolgt von einer weiteren nicht negativen Länge, die mit Leerzeichen separiert wird.

Die Eigenschaft wird vererbt und der Initialwert ist 0.

Ist eine Länge angegeben, gibt diese den horizontalen und den vertikalen Zellenabstand an. Sind zwei Werte angegeben, so gibt der erste den horizontalen und der zweite den vertikalen Abstand an.

Beispiel:

table {
  border:           1px solid black;
  border-collapse:  separate;
  border-spacing:   0.7ex 1.3ex
}

Rahmen – Ausblick CSS3-Arbeitsentwurf

Der Arbeitsentwurf für CSS3-Rahmen pendelt derzeit (Mai 2013) leider immer noch zwischen verschiedenen Stadien der Fertigstellung. Aufgrund substantieller Änderungen wird der Entwurf vermutlich in der nächsten Version wieder vom aktuellen Kandidaten zur Empfehlung auf einen Arbeitsentwurf mit Aufruf für letzte Kommentare zurückgestuft. Es handelt sich also nicht um eine Empfehlung, sollte daher noch nicht auf 'normalen' Seiten verwendet werden.

Weil es derzeit aber bereits ein Kandidat zur Empfehlung ist, können Darstellungsprogramme durchaus bereits Eigenschaften daraus ohne Präfix implementiert haben. Bei anderen können die Eigenschaften zu Testzwecken mit Präfix implementiert sein. Aufgrund der aktuellen Änderungen ist das Verhalten der Darstellungsprogramme derzeit also noch nicht als zuverlässig einzustufen und es kann mit Präfix von Version zu Version unterschiedlich sein.

Aktuell sollten Eigenschaften aus dem Modul also nur getestet werden. Das Verhalten aktueller Versionen von Darstellungsprogrammen mit Implementierung ohne Präfix ist sorgfältig zu beobachten. Bevor keine Empfehlung vorliegt, können mit jeder Version noch Änderungen des Verhaltes eintreten.

Neu ist im Arbeitsentwurf zum Beispiel die Möglichkeit von abgerundeten Ecken, für welche es hier ein Beispiel als Ausblick gibt. Abgerundete Ecken mit CSS 2.1 umzusetzen, ist deutlich trickreicher und benötigt meist zusätzliche, geeignete Graphiken, daher ist das Verlangen einiger Autoren besonders groß, diese für CSS 3 vorgeschlagene Eigenschaft zu verwenden.

Im folgenden Beispiel beginnt die Rundung 1em vor den Ecken.

p {
  border:         1px solid black;
  border-radius:  1em
}

Ein Absatz mit abgerundeten Ecken.

Ein Absatz mit abgerundeten Ecken.
Jede Ecke ein anderer Wert: border-radius: 4em 3em 2em 1em;

Ein Absatz mit abgerundeten elliptischen Ecken.
Jede Ecke ein anderer Wert: border-radius: 4em 3em 2em 1em / 1em 2em 3em 4em;

An den Beispielen ist gut zu erkennen, dass mit der Eigenschaft der abgerundete Rand in den Inhalt hineinragt. Damit das halbwegs gut aussieht, ist also mindestens der Innenabstand geeignet zu wählen. Der Inhalt wird nicht an die Kurvenform des Randes angepaßt, wie bei selbstgebastelten kurvigen Rahmen muß hier der Autor wie gehabt selbst nachbessern, um den Inhalt an die Kurvenform anzupassen.

To-Do:

Abwarten, bis die Empfehlung zu Backgrounds and Borders Module Level 3 raus ist und auf einer neuen Seite komplett beschreiben, dies hier dann übertragen und vervollständigen, den folgenden Abschnitt mit Präfixen entsorgen.

Abgerundete Ecken mit Präfix

Die Eigenschaft border-radius eignet sich jedenfalls gut, um zu üben, wie man experimentelle Implementierungen geeignet testet. Dazu erstellt sich der Tester am besten ein Test-Dokument mit geeignetem Inhalt und notiert die zu testende Eigenschaft der Einfachheit halber etwa in einem Element style im Test-Dokument. Das Testdokument sollte dann zur Dokumentation ebenfalls eine Beschreibung enthalten, was getestet wird, also welche Eigenschaft aus welchem Arbeitsentwurf. Zudem sollte angegeben sein, was das erwartete korrekte Verhalten ist und wie man es von einer fehlerhaften Implementierung unterscheiden kann.

Sofern das zu testende Darstellungsprogramm Eigenschaften wie border-radius noch nicht ohne Präfix interpretiert, kann man zum Zwecke des Testens die dafür gedachten Präfixe verwenden (siehe auch das Kapitel Syntax zu dem Thema).

Entsprechend der CSS-Empfehlung hat jedes Darstellungsprogramm für solch experimentelle Textimplementierungen ein eigenes Präfix, welches der zu testenden Eigenschaft voranzustellen ist: -moz- (Mozilla/Gecko wie etwa Firefox); -khtml- (Safari und Konqueror); -webkit- (Safari, Google Chrome, Chromium); -o- (Opera bis zur Version 9)

p {
  border: 1px solid black;
  -moz-border-radius:  1em;
  -khtml-border-radius:  1em;
  -webkit-border-radius:  1em;
  -o-border-radius:  1em;
  border-radius:  1em
}

Der hinten notierte Wert ohne Präfix sorgt dafür, dass - sofern vorhanden - die Interpretation gemäß Empfehlung umgesetzt wird, nicht die gegebenenfalls experimentellen Testvarianten, die davor notiert sind und zu anderen Darstellungen führen können. Um zu testen, ist also im Zweifelsfalle auszukommentieren, was nicht getestet werden soll. Die Programme interpretieren nur die Eigenschaften mit ihren eigenen Präfixen, daher braucht man etwa zum Test von Opera nicht die Eigenschaft für Mozilla auskommentieren, sondern sich nur entscheiden, ob man mit oder ohne Präfix testen will.

Außenabstand (Rand) – margin

Der Außenabstand (margin) gibt den Abstand zu anderen Elementen des Dokuments an. Er schließt direkt an den äußeren Bereich des Rahmens an. Dieser Bereich ist immer transparent.

Neben der zusammenfassenden Eigenschaft margin gibt es auch wieder Eigenschaften für die einzelnen Seiten: margin-top, margin-right, margin-bottom, margin-left.

Der Wert einer Einzelangabe ist eine Länge, eine Prozentangabe oder eines der Schlüsselwörter 'auto' oder 'inherit'. Prozentangaben beziehen sich auf die Breite des umgebenden Blocks.

Initialwert ist 0. Die Eigenschaft wird nicht vererbt. Vertikale Außenabstände haben keinen Effekt bei nicht ersetzten inzeiligen Elementen. Negative Außenabstände können angegeben werden, die Darstellung davon kann aber je nach Darstellungsprogramm unterschiedlichen Einschränkungen unterliegen.

Bei der zusammenfassenden Eigenschaft margin besteht der Wert aus einer Liste von ein bis vier Einzelwerten, die mit Komma separiert werden. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Im folgenden Beispiel wird dem Absatz einen Außenabstand von 1em zugewiesen; außer links, dort sind es 3em:

p {
  margin:      1em;
  margin-left: 3em
}
/* ist äquivalent zu */
p {
  margin: 1em 1em 1em 3em
}

Ein Absatz mit Außenabstand wie angegeben und einem dünnen Rand, umgeben von einer Box mit Rahmen.

Zusammenfallende Außenabstände

Die Außenabstände benachbarter Boxen können unter gewissen Umständen bei der visuellen Präsentation zusammenfallen (englisch: collapsing margins). Das bedeutet, es wird nur der größere von zwei benachbarten Außenabständen bei der Präsentation berücksichtigt. Da kann unabhängig von der Verschachtelung auftreten.

Dazu gibt es einige Regeln, die Festlegen, welche Außenabstände zusammenfallen und welche nicht:

Horizontale Außenabstände fallen nicht zusammen.
Außenabstände des Wurzelementes eines Dokumentes fallen nicht zusammen.
Elemente mit Freigabe (siehe Eigenschaft clear) können einen zusammenfallenden Außenabstand mit benachbarten Geschwistern haben, aber nicht mit dem unteren Außenabstand des Elternelementes.
Elemente, die nicht im selben Textfluß stehen (siehe Eigenschaft float und Positionierung von Elementen), können keinen zusammenfallenden Außenabstand haben. Per float aus dem Textfluß genommene Elemente können auch keinen zusammenfallenden Rand mit eigenen Kindern haben.

Zusätzlich wird festgelegt, wann genau zwei Boxen benachbart sind:

Beides sind Blockelemente oder Block-Boxen und stehen im selben Kontext (englisch: block formatting context, gemeint ist damit, dass sie hinsichtlich absoluter Postionierung oder hinsichtlich der Eigenschaft float in derselben Box stehen und die Eigenschaft overflow nicht 'visible' ist. Bei Boxen mit eigenem Kontext fällt der Außenabstand auch nicht mit ihren Kindern zusammen.
Keine Boxen für inzeiligen Inhalt, keine Freigabe (siehe Eigenschaft clear), kein Rahmen und kein Innenabstand trennen die Boxen.
Beide haben vertikal benachbarte Kanten in einer der folgenden Formen:
- Oberer Außenabstand einer Box und oberer Außenabstand des ersten Kindelementes.
- Unterer Außenabstand einer Box und oberer Außenabstand des nächsten Geschwisters.
- Unterer Außenabstand des letzten Kindes und unterer Außenabstand seines Elternelementes, falls dessen Höhe per Wert 'auto' automatisch berechnet wird.
- Oberer und unterer Außenabstand eines Elementes, welches keinen neuen Kontext etabliert und wo der berechnete Wert von min-height 0 ist, die berechnete Höhe 'auto' oder 0 ist oder keine Kindelemente hat.

Einfache Methoden, bei Bedarf zusammenfallende Außenabstände zu vermeiden, wäre also die Verwendung eines (unsichtbaren) Rahmens oder eines kleinen Innenabstandes.

Beispiel zweier aufeinanderfolgender Boxen, wo die Außenabstände zwischen den beiden Boxen zusammenfallen.

Oberer Absatz mit einem Außenabstand von 4em.

Unterer Absatz mit einem Außenabstand von 2em.

Beispiel jeweils mit Innenabstand und Rahmen:

Oberer Absatz mit einem Außenabstand von 4em.

Unterer Absatz mit einem Außenabstand von 2em.

Präsentationen und Anzeigebereiche

Neben dem Verständnis des Boxmodells ist es nützlich zu verstehen, wie die Struktur eines Dokumentes aussieht, welches mit einer Stilvorlage verziert werden soll. Vorrangig wird es sich dabei um ein XML-Format handeln oder um HTML.

Elemente in solchen Formaten sind ineinander verschachtelt. Daneben kann es passieren, dass insbesondere inzeilige Elemente innerhalb von Text als Inhalt eines Elementes auftreten. Während die inzeiligen Elemente direkt mit CSS ansprechbare Strukturen sind, stellt der einfache Textinhalt eines Elementes eine weitere Struktur dar, welche aber nicht gleichrangig mit einem benachbarten inzeiligen Element selektierbar ist. Während man den Elementen also eine selektierbare Box zuweisen kann, hat der Text vor oder nach solchen Elementen oder zwischen zweien einen anonymen Status, entsprechend einer anonymen Box, die nicht direkt selektierbar ist, etwa gibt es keinen Selektor für 'Text nach dem Element X'. Derartiger Text ist nur insgesamt inklusiver zugehöriger inzeiliger Elemente als Inhalt eines Elementes ansprechbar. Dabei bestimmt der Typ der nicht anonymen Box das Verhalten der anonymen Geschwister, hat man also etwa ein Blockelement zusammen mit einfachem Text als Elementinhalt (was auf eine schlechte Struktur des Dokumentes hinweist, falls der Unterschied nicht nur durch die Stilvorlage hervorgerufen wird), so werden die anonymen Boxen für den Text vor und nach dem Blockelement ebenfalls zu anonymen Blockboxen. Hat man hingegen ein inzeiliges Element neben Text, so werden die Texte vor und nach dem inzeiligen Element zu anonymen inzeiligen Boxen.

Für die Präsentation einer Box gibt es charakteristische Eigenschaften wie Größe oder Typ der Box, die Position oder Anordnung der Box im Dokument und die Beziehungen zu anderen Elementen in Dokument, als den Vorfahren, Geschwistern und Nachfahren. Wird der Inhalt eines Elementes durch eine externe Datei ersetzt (zum Beispiel beim (X)HTML-Element img), so können Eigenschaften des externen Dokumentes Einfluß auf die Präsentation haben, aber auch, welcher Bereich des zur Darstellung verfügbaren Platzes dem ersetzten Inhalt eingeräumt wird.

Einfluß auf eine visuelle Darstellung hat auch das zur Darstellung verwendete Modell für den Darstellungsbereich. Es gibt Medien mit einer Seitendarstellung wie klassische Bücher, wo also der Inhalt auf Seiten verteilt wird, die eine technisch bedingte vorgegebene Höhe und Breite haben. Ein ähnliches Modell liegt bei SVG vor, wo angegeben wird, welcher Bereich der Zeichenebene für die Präsentation relevant ist. Daneben gibt es kontinuierliche Medien, bei denen der Inhalt nicht aufgeteilt wird. Während die Breite oft, aber nicht notwendig, festgelegt ist, richtet sich die Höhe der Darstellung nach dem Inhalt. Sind die Abmessungen solcher kontinuierlich dargestellter Dokumente größer als der für die Darstellung verfügbare Platz, so bietet das Darstellungsprogramm einen interaktiven Mechanismus (etwa Rollbalken oder Gesten) an, mit welchem es möglich ist, sich verschiedene Teilbereiches des Dokumentes im Anzeigebereich anzusehen oder die Teilbereiche auch zu vergrößern oder zu verkleinern, um etwa zwischen der Darstellung des kompletten Inhaltes und lesbaren Detailausschnitten zu wechseln. Letztere Möglichkeit der interaktiven Skalierung gibt es insbesondere auch bei dem Modell von SVG, bei dem der Inhalt in der Regel weder auf Einzelseiten verteilt wird, noch die Darstellung dem verfügbaren Platz anders als durch Skalierung angepaßt werden kann.

Bei kontinuierlichen Medien ist demzufolge vom (verfügbaren) Anzeigebereich die Rede, der Bereich, wo Inhalte von Dokumenten dargestellt werden können. Bei SVG kann etwa Höhe und Breite des Dokumentes und sogar auch das Aspektverhältnis an den verfügbaren Anzeigebereich angepaßt werden. Bei der Darstellung von (X)HTML in kontinuierlichen Medien wird hingegen (ohne weitere Stilvorlagen), die verfügbare Breite für die Anzeige des Inhaltes genutzt, Texte dann automatisch umgebrochen, so dass sich die Anzahl der präsentierten Zeilen nach der Menge des Inhaltes richtet und damit auch die Höhe. Reicht der verfügbare Anzeigebereich nicht, wird ein interaktiver Mechanismus zur Verfügung gestellt, um das Dokument relativ zum Anzeigebereich zu verschieben, um auch aktuell nicht sichtbare Teile des Dokumentes zugänglich zu machen. Das Verfahren ähnelt ein wenig dem Umgang mit Schriftrollen statt Büchern, daher spricht man in dem Zusammenhang auch von einem Rollmechanismus oder Rollbalken (englisch: scroll bar).

CSS und auch SVG sprechen in dem Zusammenhang von einer gedachten Leinwand (englisch: canvas), auf welcher die Präsentation des gesamten Dokumentes erfolgt. Das Darstellungsprogramm bietet dem Nutzer dann ein Fenster oder Darstellungsfeld an (englisch: viewort oder viewbox), in welchem das gesamte Dokument oder ein Teil davon sichtbar gemacht wird.

CSS geht bei der Anordnung von Inhalten vom Begriff des beinhaltenden Blockes aus (englisch: containing block). Anordnung und Größe werden oft in Bezug auf solch einen Block bestimmt. Nachdem gemäß Boxmodell eine Box oder ein Block bestimmt wurde, stellt diese für seine Abkömmlinge, allgemeiner seinen Inhalt den beinhaltenden Block dar. Der Anzeigebereich ist entsprechend der anfängliche beinhaltende Block für das gesamte Dokument. Bei Medien mit einer Seitendarstellung ist hingegen die Seite selbst der anfängliche beinhaltende Block.

Layout-Eigenschaften

Mit Layout-Eigenschaften wird Boxen oder Blöcken zugewiesen, zu welchem Typ von Block sie gehören, wie sie positioniert sind, wie sie sich allgemein im Dokument verhalten sollen, beziehungsweise präsentiert werden sollen.

Typ und Anzeige der Box – display

Mit der Eigenschaft display wird festgelegt, welcher Typ eine Box ist, wie sie also präsentiert wird, ob etwa als eigenständiger Block oder als inzeilige Struktur im normalen Textfluß oder auch gar nicht oder als eine spezielle Form wie eine Tabelle oder eine Liste etwa.

Formate wie (X)HTML oder SVG geben vor, welcher Typ für welche Elemente in der Stilvorlage des Darstellungsprogrammes verwendet werden sollten. Bei SVG handelt es sich immer um inzeilige Elemente, bei (X)HTML ist die Zuordnung recht verschieden, je nach semantischer Bedeutung des verwendeten Elementes.

Mit CSS ist es jedoch auch für den Autor möglich, unabhängig von der semantischen Bedeutung eine Präsentation als ein anderer Typ zu erreichen. Insbesondere bei XML-Formaten, welche das Darstellungsprogramm nicht kennt, werden alle Elemente als inzeilig angenommen, weswegen es besonders wichtig für die Lesbarkeit von solchen Dokumenten ist, dass der Autor selbst eine Stilvorlage verfügbar macht, in welcher für alle Elemente mit abweichender semantischer Bedeutung ein angemessener Typ für die Präsentation notiert ist.

Mögliche Werte für display gemäß CSS 2.1 sind die Schlüsselwörter: 'inline', 'block', 'list-item', 'inline-block', 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption', 'none', 'inherit'.

CSS 2.0 und vermutlich in Zukunft auch wieder CSS 3 sehen zusätzlich das Schlüsselwort 'run-in', CSS 2.0 auch noch 'compact' und 'marker' vor. Nicht verfügbar in CSS 2.0 ist 'inline-block'.

Der Initialwert ist 'inline'. Die Eigenschaft wird nicht vererbt, ist für alle Elemente und Medien anwendbar.

Die Schlüsselwörter haben folgende Bedeutung:

inherit: geerbt
none: keine Box, keine Darstellung des Inhaltes, kein Einfluß aufs Layout
inline: wie in inzeiliges Element, also ein oder mehrere inzeilige Boxen
block: wie ein Blockelement, ein kompletter Block oder eine Hauptbox
inline-block: inzeilige Blockbox, ähnlich wie bei ersetzen Inhalt verhält sich die Box relativ zum umgebenden Inhalt wie eine inzeilige Box mit einem uniformen Inhalt wie einem Bild, nach innen verhält sich die Box wie eine Blockbox
list-item: wie ein Listenpunkt, etwa in (X)HTML das Element li, eine Hauptbox mit inzeiliger Listenbox
marker: wie eine Listenmarkierung vor oder hinter einer Box, wird verwendet mit den Pseudoelementen :before und :after, wenn diese Blockboxen zugeordnet sind
run-in, compact: abhängig vom Kontext eine Blockbox oder eine inzeilige Box, siehe folgender Text
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption: Boxen für Tabellenelemente, entsprechend den sinngemäßen Elementen in (X)HTML

Bei 'run-in' wird unterschieden, ob die folgende Box per float oder per Positionierung aus dem normalen Textfluß genommen wurde. Wenn das so ist, ist es eine normale Blockbox. Wenn nicht und eine andere Block-Box folgt, wird die 'run-in'-Box zu deren erster inzeiliger Box, sonst bleibt es eine Block-Box.

'run-in' könnte zum Beispiel verwendet werden, um eine Überschrift niedriger Ordnung (etwa das Element h6 in (X)HTML) in die erste Zeile des folgenden Absatzes zu setzen.

Bei 'compact' ist das Verhalten ähnlich. Wird die folgende Box per float oder per Positionierung aus dem normalen Textfluß genommen, so ist es eine normale Blockbox. Wenn nicht und eine andere Block-Box folgt, wird die 'compact'-Box zu einer inzeiligen Box, sonst bleibt es eine Block-Box. Die 'compact'-Box kann nur einzeilig sein, enthält also keine Zeilenumbrüche, sonst wird sie wie eine Block-Box behandelt. Die Breite der 'compact'-Box wird mit der Breite des Außenabstandes (margin) der folgenden Block-Box verglichen, ob linker oder rechter Rand hängt dabei von der Schreibrichtung ab, in Schreibrichtung die vordere Seite. Ist die Breite der 'compact'-Box größer als die Breite des relevanten margin der Block-Box, wird die 'compact'-Box als normale Block-Box behandelt. Andernfalls wird die 'compact'-Box auf Höhe der ersten Zeile der Block-Box im margin angeordnet, die Höhe der 'compact'-Box beinflußt dann auch die Höhe der ersten Zeile. Mit der Eigenschaft vertical-align kann wie bei inzeiligen Boxen die vertikale Position in der Zeile bestimmt werden.

'compact' kann etwa gut verwendet werden, um bei einer (X)HTML-Definitionsliste den zu definierenden Begriff (Element dt) neben der Definition (Element dd) in einer Zeile anzuordnen. Dafür eignet sich allerdings auch 'run-in', wenn man vermeiden möchte, dass der Außenrand Einfluß darauf hat, ob die Darstellung kompakt in einer Zeile ist oder nicht.

Der Wert 'none' hat offensichtlich das Potential, eine Barriere hinsichtlich der Zugänglichkeit von Inhalten zu erzeugen. Verwenden Autoren diesen Wert, müssen sie folglich sicherstellen, dass bei aktivierter Interpretation von CSS alle Inhalte zugänglich bleiben, beziehungsweise bei deaktivierter Interpretation von CSS nicht vorhandene, verwirrende oder unsinnige Strukturen dargestellt werden. Da insbesondere auch gerne mit der Pseudoklasse :hover Inhalte wieder sichtbar gemacht werden, die mit dem Wert 'none' zuvor statisch als nicht darzustellen gekennzeichnet wurden, ist natürlich ebenfalls sicherzustellen, dass die so behandelten Inhalte auch zugänglich sind, wenn im Darstellungsprogramm der Zustand :hover nicht oder nicht zuverlässig lange umsetzbar ist.

Beim Wert 'none' ist somit immer zu bedenken, dass dies gegebenenfalls relevanten Inhalt für den Nutzer unzugänglich macht, wenn das Darstellungsprogramm CSS interpretiert, während der Inhalt zugänglich ist, wenn die Interpretation von CSS deaktiviert ist. Relevante Inhalte sollen natürlich nicht unzugänglich gemacht werden, von daher ist die Verwendung immer kritisch zu sehen.

Da display auch für alle Medien anwendbar ist, reicht es somit nicht, dass man bei einigen Medien und Darstellungsprogrammen etwa mit den Pseudoklassen :hover oder :focus die Inhalte wieder interaktiv anzeigen lassen kann, denn diese Pseudoklassen sind nicht bei allem Medien und Darstellungsprogrammen verfügbar. Die Struktur des Dokumentes und die Stilvorlage müssen also so umgesetzt sein, dass bei jedem Medium und insbesondere auch ohne Zeigergerät ein Zugang zum Inhalt gewährleistet ist. Ähnliches gilt auch beim der Manipulation der Stilvorlage per Skript (ecma-script, java-script) über das Dokument-Objekt-Modell (DOM) - hier kann es etwa sinnvoll sein, etwas beim Start des Dokumentes per Manipulation des DOM nicht anzeigen zu lassen und es dann interaktiv wieder erscheinen zu lassen. Falsch wäre es hier offenbar, 'display: none' in die normale Stilvorlage zu schreiben, um das interaktive Sichtbarmachen einem Skript zu überlassen, denn dadurch würder der Inhalt für jene unzugänglich, bei denen Skript nicht interpretiert werden. Das richtige Vorgehen kann hier etwa sein, den Inhalt per normaler Stilvorlage anzeigen zu lassen, es dann per Skript verschwinden zu lassen und bei Bedarf dann wieder interaktiv sichtbar zu machen.

Es kann andererseits natürlich auch sein, dass Teile des Inhaltes bei bestimmten Medien nicht relevant sind, so könnte man etwa zum Drucken die Projektnavigation verschwinden lassen, so dass nur der Inhalt gedruckt wird.

Beispiel für display:

a.menuepunkt {
  display:  block;
  width: 10em;
  padding: 1ex;
  border: thin solid blue;
  margin: 1em
}

Das Element a hat als inzeiliges Element in (X)HTML per Stilvorlage des Darstellungsprogrammes eine inzeilige Box, dies kann in der Autoren-Stilvorlage im Bedarfsfalle überschrieben werden, so dass wie hier die Präsentation eines Blockelementes vorliegt. So werden dann auch Angaben zur Breite oder zum Außenabstand wirksam.

Das a der Klasse 'menuepunkt' wird somit als eigenständige Blockbox präsentiert. In dem Menü werden dann also die einzelnen Menüpunkte untereinander dargestellt, auch wenn es einfach einzelne, aufeinanderfolgende Elemente a sind, die also nicht in einer Liste stehen. Möchte man einerseits das Verhalten einer Blockbox für die inneren Eigenschaften beibehalten, die inzeilige Anordnung aber beibehalten, so würde man in CSS 2.1 eher folgendes formulieren:

a.menuepunkt {
  display:  inline-block;
  width: 10em;
  padding: 1ex;
  border: thin solid blue;
  margin: 1em
}

Sofern in der Breite genug Platz vorhanden ist, werden so die Blöcke nebeneinander angeordnet, gegebenenfalls wird automatisch in mehrere Zeilen umgebrochen. Ähnlich kann man vorgehen, wenn man die Verweise, was meist semantisch sinnvoller ist, in einer Liste angeordnet hat. Wendet man nun 'inline-block' auf die Listenpunkte an, so kann man aus der sonst vertikalen Anordnung der Listenpunkte auch einfach eine horizontale Anordnung mit automatischem Umbruch machen.

Sichtbarkeit – visibility

Während display darüber entscheidet, ob etwas überhaupt dargestellt wird oder im Falle des Wertes 'none' eben gar nicht mehr bei der Präsentation des Dokumentes berücksichtigt wird, gibt es mit der Eigenschaft visibility auch die Möglichkeit, nur über die Sichtbarkeit Angaben zu machen. Statt eines unsichtbar gemachten Inhaltes bleibt dann also einfach eine Lücke in der Darstellung an jener Stelle, wo der Inhalt nach wie vor ist. Ähnlich wie bei komplett transparenten Teilen eines Dokumentes trägt der Inhalt also nach wie vor zur Präsentation bei, wenn er unsichtbar ist.

Die Eigenschaft findet Anwendung bei visuellen Medien. Sie wird vererbt.

Folgende Schlüsselwörter können als Werte verwendet werden:

inherit: geerbt
visible: sichtbar, Initialwert
hidden: versteckt, nicht sichtbar
collapse: wie hidden, aber bestimmten Werten von display gibt es besondere Regeln, siehe Text

Sinngemäß, wie bereits für display: none' erläutert, gilt es auch, für visibility: hidden' und 'visibility: collapse' darauf zu achten, dass nicht für einige Nutzergruppen Zugänglichkeitsprobleme auftreten. Auch bei Manipulationen über das DOM oder bei der Verwendung von Pseudoklassen ist darauf zu achten, dass relevante Inhalte für alle Nutzer zugänglich bleiben.

Die Sonderrolle des Wertes 'collapse' tritt in Kombination mit bestimmten Tabellen-Werten der Eigenschaft display auf, wenn es sich bei den betroffenen Elementen oder Boxen und Zeilen, Spalten oder Zeilengruppen oder Zeilenspalten handelt. Bei dem Wert wird die gesamte Zeile, Spalte oder Gruppe entfernt, so dass Platz für anderen Inhalt frei wird. Überspannt eine Zelle einen Bereich mehrerer Zeilen oder Spalten, so ist es möglich, daß nur Teile davon durch die Eigenschaft unsichtbar werden, es wird also entsprechend abgeschnitten.

Beispiel eines unsichtbaren Block;, Elemente div dieser Klasse 'leer' könnten also generell keinen Inhalt haben:

div.leer {
 width: 10em; 
 height: 10em; 
 background: yellow;
 border: thin solid black; 
 margin:1em; 
 visibility: hidden}

Auch der CSS-Rahmen oder -Hintergrund werden dann nicht angezeigt:

Überlauf regeln – overflow

Bei visuellen Medien kann es passieren, dass mehr Inhalt vorhanden ist als in eine Box paßt, deren Größe festgelegt ist, so kann mit der Eigenschaft overflow angegeben werden, was mit dem restlichen, nicht in die Box passenden Inhalt passieren soll.

Prinzipiell gibt es die Möglichkeit, dass der Inhalt übersteht oder abgeschnitten wird oder aber Rollbalken verwendet werden, um die Darstellung so zu verschieben, dass ansonsten nicht angezeigter Inhalt sichtbar wird.

Folgende Schlüsselwörter können als Werte verwendet werden:

inherit: geerbt
visible: Der Inhalt steht über, wird also außerhalb der Box dargestellt
hidden: Überstehender Inhalt wird abgeschnitten, also nicht angezeigt und wird somit unzugänglich
scroll: Es werden immer Rollbalken angezeigt, gegebenenfalls wird im so erzeugten Anzeigebereich für das Element nur jeweils ein Teil des Inhaltes angezeigt. Mit den Rollbalken kann der Nutzer selbst einstellen, welcher Bereich sichtbar ist; durch diese Interaktion bleibt also der gesamte Inhalt zugänglich. Da bei Druckausgaben keine Rollbalken verfügbar sind, wird wie bei 'visible' der gesamte Inhalt ausgegeben.
auto: Rollbalken werden nur verfügbar gemacht, wenn der vorhandene Platz für den Inhalt nicht ausreicht. Da die Rollbalken selbst Platz benötigen, kann es in einigen besonderen Fällen zu mehrfachem Umspringen der Anzeige zwischen mit und ohne Rollbalken kommen.

Der Initialwert ist 'visible'. Eine Sonderregel gibt es für das Wurzelelement eines Dokumentes, aufgrund der besonderen Struktur bei (X)HTML ebenfalls beim Element body: 'visible' wird dort als 'auto' interpretiert, um zu gewährleisten, dass der Inhalt per Initialwert immer komplett zugänglich ist.

Die Eigenschaft wird nicht vererbt und ist auf Blockelemente in visuellen Medien anwendbar.

Da SVG nur Rollbalken für das gesamte Dokument vorsieht, haben die Werte dort eine spezielle Bedeutung, welche sich zumeist darauf reduziert, dass der überstehende Inhalt entweder sichtbar bleibt oder abgeschnitten wird.

Beispiele (gemeinsame Eigenschaften):

p {
width: 15em; 
height: 20em; 
padding: 1ex; 
margin: 1ex; 
border: thin solid black
}

Darstellung eines Absatzes mit 'overflow: visible' (unten drunter wurde hier ein größerer Außenabstand verwendet, ansonsten würde der überstehende Text in den darunter angeordneten Inhalt ragen und faktisch beides unlesbar machen):

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Dieser Absatz mit 'overflow: scroll':

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Da bei 'overflow: auto' bei diesem Beispiel vermutlich die gleiche Anzeige einträte, wird in folgendem Absatz der Satz mit dem lächerlich langen Wort einfach weggelassen:

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Bei der Verwendung von 'overflow: hidden' kommt es dann wie erwartet zu Zugänglichkeitsproblemen:

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Positionierung – position

Mit der Eigenschaft position können Elemente aus dem normalen Textfluß genommen werden, um sie zu positionieren. Der normale Textfluß in (X)HTML ist erstmal ein linearer, was bedeutet, dass die Elemente nacheinander, wie sie im Quelltext stehen, präsentiert werden. Durch Positionierung ist es bei visuellen Medien auch möglich, die Reihenfolge zu ändern oder auch Strukturen nicht linear nacheinander, sondern etwa teilweise nebeneinander anzuordnen. Der Leser muß dann auswählen, welchen Inhalt er zuerst lesen möchte.

Für den Autor ergibt sich damit das Problem oder die Herausforderung, zu vermeiden, dass positionierte Elemente mit Inhalten im normalen Textfluß überlappen und somit Teile des Inhaltes unlesbar werden. Ferner können positionierte Elemente auch aus dem Anzeigebereich herausragen, somit gegebenenfalls für den Leser unzugänglich werden, weswegen sich der Autor darum mit weiteren Eigenschaften bemühen muß, etwa bei kontinuierlichen Medien im Bedarfsfalle Rollbalken einzusetzen, um die Zugänglichkeit des Inhaltes zu gewährleisten. Während also im normalen Textfluß weitgehend automatisch gewährleistet ist, dass Inhalte für den Leser auch zugänglich sind, übernimmt der Autor für diesen Sachverhalt die komplette Verantwortung, sobald Elemente positioniert werden. Da der Autor nicht die Kontrolle über die Größe des Anzeigebereiches und die verwendete Schriftgröße hat, kann das Problem sehr komplex werden, wenn viele Elemente positioniert werden. Es ist dann eher sinnvoll, nur sehr wenige Elemente zu positionieren, die die anderen Elemente dann enthalten, welche dort einem normalen Textfluß innerhalb des positionierten Elementes folgen.

Die Eigenschaft position wirkt auf alle Elemente bei visuellen Medien und wird nicht vererbt. Die Eigenschaft hat folgende Werte:

inherit: geerbt
static: Es handelt sich um eine normale Box im normalen Textfluß, die nicht positioniert ist. Dies ist der Initialwert
relative: Die Box wird im normalen Textfluß in ihrer normalen Größe berücksichtigt, aber gegebenenfalls versetzt angezeigt. Sie wird mit den Eigenschaften left, right, top, bottom versetzt. Auch wenn die Box nicht versetzt ist, wird sie als positioniert angenommen. Der normale Textfluß nach einer solchen Box wird so fortgesetzt, als sei die Box nicht versetzt worden.
absolute: Die Box wird aus dem normalen Textfluß genommen, in welchem sie nicht mehr berücksichtigt wird. Sie wird mit den Eigenschaften left, right, top, bottom unabhängig davon positioniert. Sofern ein Vorfahre ebenfalls positioniert ist, beziehen sich die Angaben auf die Position des nächsten positionierten Vorfahren, sonst auf das Wurzelelement. Wird dieses bei kontinuierlichen Medien gerollt, so rollt auch eine absolut positionierte Box mit.
fixed: Die Box wird aus dem normalen Textfluß genommen, in welchem sie nicht mehr berücksichtigt wird. Sie wird mit den Eigenschaften left, right, top, bottom unabhängig davon positioniert. Die Positionierung bezieht sich auf den Anzeigebereich. So fixierte Boxen rollen also bei kontinuierlichen Medien nicht mit, im Bedarfsfalle muß für die Kindelemente ein eigener Rollmechanismus realisiert werden (Eigenschaft overflow und Festlegung von Höhe oder Breite.

Versatz – left, right, top, bottom

Mit den Eigenschaften können positionierte Boxen versetzt werden, beziehungsweise deren Position kann festgelegt werden.

Der Wert ist entweder eines der Schlüsselwörter 'inherit' oder 'auto' oder eine Länge oder ein Prozentwert. Prozentwerte beziehen sich auf die Breite des Blockes, in welchem die Box steht (für left und right) oder auf die Höhe (für top und bottom). Der Initialwert ist 'auto'. Die Eigenschaften werden nicht vererbt und sind anwendbar auf visuelle Medien.

Die Eigenschaften haben einen Effekt, wenn position nicht den Wert 'static' hat.

left bezieht sich auf die Position der linken Seite, right auf die rechte. top bezieht sich auf die Position der oberen Seite, bottom auf die untere.

Bei position 'relative' geben die Eigenschaften also den Versatz zur Position im normalen Textfluß an, bei 'absolute' den Versatz relativ zum positionierten Vorfahren oder dem Wurzelelement, bei 'fixed' relativ zum Anzeigebereich.

Beispiele

Beliebt ist es etwa, das Navigationsmenü links oder rechts neben dem eigentlichen Inhalt zu positionieren. Dazu muß im normalen Textfluß Platz geschaffen werden, was auf verschiedene Weise geschehen kann. Am einfachsten ist bei (X)HTML die Verwendung von margin beim Element body. Nehmen wird dazu an, die Navigation stehe in einem Element mit dem Fragmentidentifizierer 'menue' und dessen Inhalt komme mit einer Breite von 12em aus:

body {margin-left: 13em}
#menue {
position: absolute;
top: 0.5em;
left: 0.5em;
width: 12em
}

Sinngemäß kann das Menü auch rechts angeordnet werden, bei der üblichen Schreibrichtung von links nach rechts ist dabei allerdings darauf zu achten, dass weder Text noch Bilder überstehen, weil sie sonst unter das Menü geraten können.

body {margin-right: 13em}
#menue {
position: absolute;
top: 0.5em;
right: 0.5em;
width: 12em
}

Nun kann auch alles positioniert werden und im Bedarfsfalle mit Rollbalken versehen. Dazu kann man den Inhalt etwa in einem anderen Element anordnen, hier mit dem Fragmentidentifizierer 'inhalt', wobei 'inhalt' und 'menue' so im Quelltext stehen, dass das eine kein Vorfahre des anderen ist, beide etwa einzige Kindelemente von body:

body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
#inhalt {
position: absolute;
top: 0.5em;
left: 13em;
right: 0.5em;
bottom: 0.5em;
overflow: auto;
}
#menue {
position: absolute;
top: 0.5em;
left: 0.5em;
bottom: 0.5em;
width: 12em;
overflow: auto;
}

Die Rollbalken sollten so im Bedarfsfalle für beide Inhaltsteile unabhängig voneinander erscheinen.

Ähnlich kann mit position 'fixed' vorgegangen werden, etwa so:

body {margin-left: 13em}
#menue {
position: fixed;
top: 0.5em;
left: 0.5em;
bottom: 0.5em;
width: 12em;
overflow: auto;
}

Etwas Ähnliches kann sich auch anbieten, um zum Beispiel zwei Versionen eines Textes miteinander zu vergleichen oder Kommentare zu einem Text neben diesem anzuordnen, damit der Leser Textpassagen nebeneinander frei rollen kann. Gegeben seien dazu Fragmente 'version1' und 'version2' mit den jeweiligen zu vergleichenden Inhalten:

#version1 {
position: absolute;
top: 0.5em;
left: 0em;
width: 50%;
height: 40em;
overflow: auto;
}
#version2 {
position: absolute;
top: 0.5em;
right: 0em;
width: 50%;
height: 40em;
overflow: auto;
}

Beliebt ist es auch, Teile des Inhaltes als Zusatzinformation dynamisch einzublenden. Diese will man dann gerne etwas versetzt zur Basisinformation angeben. Liegt etwa die Information in Elementen der Klasse 'info' vor und darin befindet sich als Kindelement jeweils ein Element der Klasse 'zusatz' mit der Zusatzinformation, so kann dies sinngemäß so umgesetzt werden:

.info
{
position: relative;
}
body:hover .info .zusatz
{
display: none
}
.info:hover .zusatz
{
position: absolute;
top: 2em;
left: 5em;
display: block;
width: 12em;
height: 12em;
overflow: auto
}

Enthält 'zusatz' etwa bei einem Navigationsmenü weitere interaktive Inhalte wie Verweise, so ist darauf zu achten, dass 'info' und 'zusatz' räumlich überlappen, sonst verschwindet 'zusatz' wieder, bevor das Zeigergerät von 'info' nach 'zusatz' gelangen kann. Ist kein Zeigergerät vorhanden oder nicht über dem Dokument, wird die Zusatzinformation im normalen Fluß angezeigt. Leider gibt es keine spezifische Abfrage in CSS, um spezielle Stilvorlagen für Leser mit Zeigergerät und ohne Zeigergerät getrennt anzubieten, daher kann es hier sinnvoll sein, ähnlich wie im Beispiel zu sehen zu improvisieren.

Einige alte Programme können zudem Probleme mit position 'relative' haben, wenn kein Versatz angegeben ist. Will man diese berücksichtigen, kann man etwa einen Versatz um einen Pixel angeben und diesen dann bei den Kindelementen wieder rückgängig machen oder vernachlässigen.

Beispiel vier positionierte Quadrate, das erste enthält die anderen:

div.Q1 {
  position: relative;
  left: 3em;
  width: 10em;
  height: 10em;
  background: rgba(200,200,200,0.4)
}
div.Q2 {
  position: absolute;
  top: 2em;
  left:2em;
  width: 5em;
  height: 5em;
  background: rgba(0,0,200,0.7)
}
div.Q3 {
  position: absolute;
  top: 4em;
  left: 4em;
  width: 5em;
  height: 5em;
  background: rgba(240,60,0,0.4)
}
div.Q4 {
  position: fixed;
  bottom: 4em;
  left: 2em;
  width: 5em;
  height: 5em;
  background: rgba(255,255,0,0.5)
}

In diesem Falle wird das die beiden anderen umschließende Quadrat relativ positioniert, es wird um 3em nach rechts versetzt. Die darin befindlichen Elemente werden absolut positioniert. Die zugehörigen Positionsangaben beziehen sich auf das umschließende Element, weil dies ebenfalls positioniert ist. Aufgrund der fixierten Positionierung für das vierte Quadrat findet sich dieses im Anzeigebereich links unten und verdeckt da gegebenenfalls andere Inhalte der Seite, die aufgrund der gewählten Teiltransparenz noch erkennbar sein mögen, dann aber nicht mehr gegebenenfalls anklickbar oder markierbar sind, sofern sie komplett unter dem Element liegen. Sollte dieses gelbe Quadrat im umschließenden grauen dargestellt werden, interpretiert das verwendete Darstellungsprogramm offenbar den Wert 'fixed' nicht.

Textumfluss – float und clear

Eine weitere Möglichkeit, ein Element aus dem normalen Textfluß zu nehmen, besteht in der Verwendung der Eigenschaft float. Anders als bei position wird das Element allerdings nicht direkt anderweitig positioniert, sondern nur nach links oder rechts an den Rand gesetzt, wonach es dann vom folgenden Inhalt umflossen wird. Mit der Eigenschaft clear kann dann für ein folgendes Element festgelegt werden, ob dieses Verhalten des Umfließens aufgehoben wird oder nicht. Sofern aufgehoben, wird dieser Inhalt dann unter dem zu umfließenden Element angeordnet. Dies trifft auch zu, wenn der Platz nicht ausreicht, um beide Inhalte nebeneinander anzuordnen.

Wird ein Element mittels float aus dem normalen Textfluß genommen, muß es auch immer eine definierte Breite haben, etwa festgelegt über die Eigenschaft width oder etwa bei ersetzten Elementen wie Bildern durch die intrinsische Breite.

Das mittels float nach links oder rechts verschobene Element wird zu einer Block-Box. Die Verschiebung erfolgt bis zum Rand der umgebenden Box. In vertikaler Richtung ändert sich die Anordnung nicht, das verschobene Element beginnt oben also in der aktuellen Zeile, in der es begonnen hätte, wenn es nicht verschoben worden wäre - beziehungsweise, sofern es keine aktuelle Zeile gibt, so ist das untere Ende der vorherigen Block-Box der Beginn der verschobenen Box. Somit kann also allenfalls folgender Inhalt die verschobene Box umfließen, nicht vorheriger Inhalt. Ist allerdings Inhalt in derselben Zeile in der verschobenen Box, auch davor, so wird dieser ebenfalls als umfließender Inhalt neben der verschobenen Box angeordnet.

Nicht positionierte Block-Boxen verhalten sich so, als sei das verschobene Element nicht vorhanden, nur ihr inzeiliger Inhalt umfließt gegebenenfalls die verschobene Box.

Es können auch mehrere aufeinanderfolgende Elemente verschoben werden. Solange genug Platz vorhanden ist, werden diese dann nebeneinander angeordnet, das frühere dann näher zum angegebenen Rand. Reicht der Platz nicht mehr aus, wird eine neue Zeile begonnen. Sind insbesondere mehrere aufeinander folgende verschobene Elemente unterschiedlich hoch, so wird die Box in der neuen Zeile neben der letzten der vorherigen angeordnet, die genug Platz neben sich läßt.

Der Außenabstand verschobener Boxen kollabiert nicht mit dem benachbarter Boxen.

float wird nicht vererbt, ist anwendbar aus visuelle Medien und dort auch nicht positionierte Elemente und kann folgende Werte haben:

inherit: geerbt
none: Die Box wird nicht verschoben, Initialwert
left: Die Box wird nach links verschoben, folgender Inhalt fließt rechts vorbei
right: Die Box wird nach rechts verschoben, folgender Inhalt fließt links vorbei

Sofern display nicht 'none' ist, wird diese Eigenschaft ignoriert, falls der Wert von float entweder 'left' oder 'right' ist (oder sich dieser Wert natürlich aus 'inherit' ergibt).

Mit der Eigenschaft clear kann festgelegt werden, wie Block-Boxen auf zu umfließende Elemente reagieren sollen. Die Eigenschaft clear wird nicht vererbt, ist anwendbar auf visuelle Medien und dort auch Block-Elemente. Sie kann folgende Werte haben:

inherit: geerbt
none: Keine Einschränkung des Umfließens
left: Die Box wird unter jenen Boxen angeordnet, für welche float 'left' gilt, für 'right' gelten keine Einschränkungen
right: Die Box wird unter jenen Boxen angeordnet, für welche float 'right' gilt, für 'left' gelten keine Einschränkungen
both: Die Box wird unter jenen Boxen angeordnet, die umflossen werden sollen

Als Beispiel sei ein Text gegeben, in welchem Bilder (Element img) stehen. Die Bilder gehören entweder zur Klasse 'gerade' oder 'ungerade' oder 'neu':

img.gerade {
float: left;
clear: left
}
img.ungerade {
float: right;
clear: right
}
img.neu {
clear: both
}

Gerade Bilder werden also nach links verschoben, allerdings nicht neben schon vorhandene Bilder der Klasse 'gerade'. Ungerade Bilder werden entsprechend nach rechts verschoben, allerdings nicht neben schon vorhandene Bilder der Klasse 'ungerade'. Bilder der Klasse 'neu' werden nie neben Bildern der Klasse 'gerade' oder 'ungerade' angezeigt. Es ist hierbei darauf zu achten, dass die verwendete Bilder eine intrinsische Breite haben, was etwa bei Pixelgraphik immer der Fall ist. Je nach den Angaben im Dokument können SVG-Dokumente eine Breite wie 100% aufweisen, das wäre zwar auch eine intrinsische Breite, schließt aber praktisch aus, dass daneben noch Inhalt angeordnet werden kann - ähnliches gilt für CSS-Boxen mit ähnlichen Angaben. Bei Textinhalten ist in der Regel eine Breite explizit anzugeben.

Zum Beispiel kann auch ein Navigationsmenü so neben dem Inhalt angeordnet werden. Dazu muß das Menü allerdings vor dem sonstigen Inhalt stehen, der es umfließen soll - was meist bei einer Projektnavigation über mehrere Dokumente inhaltlich nicht sinnvoll ist. Enthält das Menü allerdings nur Verweise auf Fragmente im selben Dokument, um dem Leser einen schnelleren Zugriff zu erlauben, ist die Anordnung weit vorne im Quelltext natürlich sehr hilfreich. Dann kommt die Verwendung von float in Betracht, sonst wird man eher die Positionierung vorziehen.

Sei das Menü also vor einigem weiteren Inhalt angeordnet und habe den Fragmentidentifizierer 'menu', es komme mit einer Breite von 12em aus, so kann man zum Beispiel notieren:

#menu {
float: right;
clear: right;
width: 12em;
padding: 1em;
margin: 1em;
border: thin solid #008;
color: #00a;
}

Betrachten wir noch kurz die Anwendung bei inzeiligen Erläuterungen:

.infoA {
float: left;
clear: left;
border: thin solid green;
max-width: 10em;
padding: 1ex;
margin: 1ex
}
.infoB {
float: right;
clear: right;
border: thin solid green;
max-width: 10em;
padding: 1ex;
margin: 1ex
}

Manchmal möchte man im laufenden Text Erläuterungen unterbringen und dafür nicht das Attribut title verwenden. Der Wert von title wird oft beim Drüberfahren mit einem Zeigergerät dynamisch eingeblendet. Etwa kann das Bedürfnis bestehen, die Zusatzinformation auch ohne Interaktivität ständig verfügbar zu halten oder diese zusätzlich zu strukturieren oder darin Bestandteile zu betonen oder hervorzuheben, wozu man zusätzliche inzeilige Elemente benötigt, was bei der Verwendung des Attributes title ausgeschlossen ist. Stattdessen könnte man etwa die zusätzliche Erläuterung umfließen lassen. Das Umfließen der Zusatzfinformation wird mit der Eigenschaft float erreicht, angewendet zum Beispiel auf ein Element span. Das ist insofern nützlich, als der Nutzer nicht erst herausfinden muß, ob Information vorhanden ist und wie er Zugang zu ihr bekommt. Ohne Interpretation von CSS wird die Zusatzinformation in normalen Textfluß präsentiert, bei Interpretation von CSS geeignet hervorgehoben, womit sich je nach Einsatz eine bessere Ergonomie ergeben kann - kundige Leser überspringen die Zusatzinformation, andere können sich gezielt darauf einlassen. Die Zusatzinformation sollte dann nur so formuliert sein, dass sie sowohl in den normalen Textfluß paßt als auch separiert als Einzelinformation einen Sinn ergibt, auch weil bei der Präsentation vom Nutzer nicht mehr eindeutig zuzuordnen ist, wo die Zusatzinformation exakt im Textfluß angeordnet ist.

Stapelung – z-index

Bedingt durch Positionierung und allgemeiner die Herausnahme von Elementen aus dem normalen Textfluß kann es bei visuellen Medien zu Überlappungen von Inhalten kommen.

Mit der Eigenschaft z-index kann für positionierte Elemente angegeben werden, welcher Inhalt über welchem dargestellt wird, wenn Inhalte überlappen. 'Über' ist hier in dem Sinne gemeint, dass man sich eine Achse in Richtung vom Bildschirm zum Betrachter vorstellt. 'Über' oder weiter vorne oder oben ist auf dieser Achse näher zum Betrachter hin gemeint, also jedenfalls besser sichtbar und weniger verdeckt als Inhalte dahinter.

So ergeben sich also Stapel von Inhalten von vorne nach hinten. Das Wurzelelement etabliert einen solchen Stapel-Kontext, der Wurzelstapel-Kontext, auf dem alle anderen aufbauen. Jede Box gehört zu einem Stapel-Kontext und hat darin ein bestimmtes Niveau relativ zu anderen Boxen im selben Stapel-Kontext. Boxen mit größeren Niveau liegen jeweils vor solchen mit kleinerem Niveau. Negative Niveaus sind ebenfalls möglich. Boxen mit gleichen Niveau werden nach der Reihenfolge im Quelltext angeordnet, die spätere also weiter oben.

Erzeugt eine Box einen neuen Stapel-Kontext, so ergeben sich daraus zwei Niveaus, ein Wert 0 für den Kontext, den es erzeugt und ein Wert per z-index für den Kontext, zu dem es gehört. Sofern z-index nicht angegeben ist, hat ein Element dasselbe Niveau wie das Elternelement.

Bei SVG gilt ansonsten ein anderes Modell, wobei dort praktisch von allen dargestellten Elementen die Position im Dokument anzugeben ist. Hier gilt, was weiter hinten im Quelltext steht, ist weiter oben in der Darstellung. Bis einschließlich Version 1.2 gibt es keine Eigenschaft wie z-index, mit welcher dies beeinflußt werden kann. Bei anderen Formaten, wo CSS anwendbar ist, kann mit z-index hingegen die Reihenfolge von positionierten Elementen beeinflußt werden.

Der Wert von z-index ist entweder eine ganze Zahl oder eines der Schlüsselwörter 'auto' oder 'inherit'. Vererbt wird die Eigenschaft nicht, der Initialwert ist 'auto'.

Der Wert von z-index legt also das Niveau im aktuellen Stapel-Kontext fest. Und der Wert legt fest, ob ein eigener Stapel-Kontext erzeugt wird.

Mittels einer ganzen Zahl wird das Niveau im aktuellen Stapel-Kontext festgelegt und ein eigener Stapel-Kontext erzeugt, worin das Niveau '0' ist.

Beim Wert 'auto' ist das Niveau im aktuellen Stapel-Kontext dasselbe wie beim Elternelement. Ein eigener Stapel-Kontext wird nicht erzeugt.

Zum Beispiel soll ein Element mit Fragmentidentifizierer 'Navigation' beim Drüberfahren mit dem Zeigergerät von hinten nach vorne geholt werden, wobei davon ausgegangen wird, dass keine Box ein höheres Niveau als '100' hat und kein niedrigeres als '-100'. Daneben sollte irgendwo, in diesem Falle etwa rechts oben kein anderer Inhalt einen Teil des Elementes überlappen, damit das Drüberfahren mit dem Zeigergerät eindeutig ist.

#Navigation {
position: absolute;
top: 0;
right: 0;
background: white;
color: black;
width: 12em;
height: 10em;
overflow: auto;
z-index: -100
}
#Navigation:hover {
z-index: 100
}

Als weiteres Beispiel seien wieder positionierte Quadrate betrachtet. Per z-index wird hier die Reihenfolge geändert. Die Quadrate stehen in der angegebene Reihenfolge im Quelltext, sortiert von heller vorne nach dunkler hinten. Die Reihenfolge wird allerdings per z-index umgedreht, die hellen werden also oben, weiter im Vordergrund präsentiert und verdecken teiltransparent die hinteren. Rechts daneben gibt es eine ähnliche Gruppe, aber ohne Angabe von z-index, also mit der Reihenfolge wie im Quelltext.

div#Q0 {
  position: relative;
  width: 30em;
  height: 10em;
  border: thin solid black;
  background: #008
}
div#Q1 {
  position: absolute;
  top: 1em;
  left:1em;
  width: 5em;
  height: 5em;
  background: rgba(250,250,250,0.7);
  z-index: 10
}
div#Q2 {
  position: absolute;
  top: 2em;
  left: 2em;
  width: 5em;
  height: 5em;
  background: rgba(200,200,200,0.7);
  z-index: 8
}
div#Q3 {
  position: absolute;
  top: 3em;
  left: 3em;
  width: 5em;
  height: 5em;
  background: rgba(150,150,150,0.7);
  z-index: 6
}
div#Q4 {
  position: absolute;
  top: 4em;
  left: 4em;
  width: 5em;
  height: 5em;
  background: rgba(100,100,100,0.7);
  z-index: 4
}

Zuschneiden von Boxen – clip

Mit der Eigenschaft clip kann bei Block-Boxen und ersetzten Elementen wie Bildern der Rand beschnitten werden. Dies bedeutet, es kann ein Bereich der Box angegeben werden, welcher sichtbar dargestellt wird, der Rest nimmt beim CSS für Formate wie (X)HTML Platz ein, ist aber nicht sichtbar. Die Eigenschaft ist auch bei SVG anwendbar, aufgrund des anderen Darstellungsmodelles ist dort aber nur relevant, dass nur ein Teil des Elementes sichtbar dargestellt wird. Mittels clipPath bietet SVG allerdings einen wesentlich allgemeineren Ansatz, um Teile eines Elementes nicht sichtbar darzustellen oder auch mittels mask teilweise nur teiltransparent darzustellen. Aufgrund von Problemen in den CSS-Spezifikationen bei der Definition von clip und den deutlich flexibleren und vielseitigen Möglichkeiten sind diese Methoden in SVG also der Eigenschaft clip vorzuziehen.

Die Eigenschaft ist anwendbar für visuelle Medien und wird nicht vererbt. Ferner muß die Eigenschaft overflow einen anderen Wert als 'visible' haben, damit clip anwendbar ist. Mögliche Werte sind:

inherit: geerbt
auto: Größe und Positionierung des Zuschneidebereiches ist dieselbe wie die Box, abgeschnitten wird also, was übersteht, das ist der Initialwert
Form-Wert: Es wird eine Form parametrisiert, welche den Zuschneidebereich angibt, siehe weiterer Text

Hinsichtlich der Notation und Interpretation des Form-Wertes gibt es in CSS2.0 und CSS2.1 leider unterschiedliche, sich widersprechende Angaben. Da Autoren bei CSS-Stilvorlagen selbst nicht angeben können, welcher Version sie folgen, ist der Form-Wert formal undefiniert. SVG 1.0 und 1.1 legen allerdings explizit fest, dass für SVG die Notation und Interpretation nach CSS2.0 gilt. Da auf die Definition in CSS2.0 allerdings ein falsches Beispiel folgt und sich auch einige Programme trotzdem nach CSS2.1 richten oder die Implementierung von der Empfehlung sonstwie abweicht, ist dies in der Praxis auch kein Verhalten, auf welches man sich verlassen kann. Daher sollte der Form-Wert in der Praxis vermieden werden.

Gemäß CSS2.0 sieht der Form-Wert wie folgt aus, wobei ? jeweils eine Länge oder das Schlüsselwort 'auto' repräsentiert:
rect (? ? ? ?)
Das Ergebnis des Zuschneidens ist ein rechteckiger Ausschnitt. Die Reihenfolge von links nach rechts der vier Werte entspricht dem Abstand von oben, rechts, unten, links von der Kante der Block-Box oder des ersetzten Elementes. 'auto' bedeutet dabei, dass der Rand mit der der Box übereinstimmt. 'auto' entspricht dabei dem Zahlenwert 0. Zahlenwerte geben jeweils den Versatz zu jeweiligen Kante der Box an, wobei positive Abstände nach innen zeigen, also den dargestellten Bereich verkleinern und negative nach außen zeigen, den dargestellten Bereich also vergrößern.

Haben Elternelemente ebenfalls einen solchen Zuschnitt, so gilt für das Kindelement die Schnittmenge als dargestellter Bereich.

Die Definition in CSS2.1 weicht davon in folgenen Punkten ab:
Der Form-Wert sieht wie folgt aus:
rect (?, ?, ?, ?)
Autoren sollen zur Separation jeweils ein Komma verwenden, Darstellungsprogramme müssen aber eine Notation ohne Komma in gleicher Weise interpretieren. Eine Mischung, einmal mit Komma, einmal nur mit Leerzeichen ist in jedem Falle nicht zulässig.
Anders als bei CSS2.0 repräsentieren hier die Zahlenwerte einen Versatz des dargestellten Bereiches von der oberen linken Ecke der Block-Box, beziehungsweise des ersetzten Elementes. Der erste Wert gibt also den Versatz der oberen Kante des darzustellenden Bereiches von der oberen Kante der Box an, der zweite Wert den Versatz der rechten Kante des darzustellenden Bereiches von der linken Kante der Box, der dritte Wert den Versatz der unteren Kante des darzustellenden Bereiches von der oberen Kante der Box an, der vierte Wert den Versatz der linken Kante des darzustellenden Bereiches von der linken Kante der Box. Für den ersten und vierten Wert bedeutet 'auto' dasselbe wie 0, für den zweiten und dritten Wert entspricht das der rechten, beziehungsweise unteren Kante der Box - bei 'auto' ergibt sich also formal, trotz anderer Bedeutung der Werte der gleiche Effekt wie für CSS2.0, sonst stimmt das Ergebnis in der Regel nicht überein.

Wird die Eigenschaft zum Beispiel auf eine Klasse von Bildern angewendet, die verschiedene Größen haben, fällt es mit der Definition von CSS2.0 leicht, bei allen einen gleichgroßen Randbereich abzuschneiden. Bei der Definition nach CSS2.1 fällt es hingegen leicht, bei allen einen gleichgroßen Ausschnitt relativ zur linken oberen Ecke sichtbar zu machen.

Aufgrund der Widersprüche von CSS2.1 gegenüber CSS2.0 wird hier auf ein Beispiel verzichtet. Im Kapitel 'Praxis' finden sich weitere Erläuterungen und auch Alternativen.

Abgrenzung – outline

Statt einem Rahmen oder einen Abstand zu verwenden, um ein Element vom umgebenden Inhalt abzugrenzen, können auch die Eigenschaften outline* verwendet werden.

Anders als bei border* trägt outline nicht zur Berechnung der Größe oder Position bei und wird immer über den Inhalt gelegt. Ferner resultiert outline nicht zwangsläufig in der Darstellung eines Rechtecks. Die Eigenschaft eignet sich also insbesondere in der Anfangsphase bei der Erstellung des Layouts, wenn man kontrollieren möchte, welche Dimensionen Elemente haben und welche Position sie gerade haben. Die sichtbare Abgrenzung eignet sich dann gut, um das Verhalten einer Box abzuschätzen, ohne das Verhalten dadurch signifikant zu beeinflussen, wie dies etwa beim testweisen Einsatz von border der Fall wäre.

Ähnlich wie bei border gibt es wieder verschiedene Eigenschaften, um das Erscheinungsbild der Abgrenzung zu beeinflussen und eine Eigenschaft outline, die all dies zusammenfaßt. Anders als bei border umgibt outline als Abgrenzung immer das gesamte Element, man kann also nicht angeben, dass man nur eine Abgrenzung nach links, rechts, oben oder unten haben möchte.

Die Eigenschaften sind allesamt anwendbar auf alle Elemente bei visuellen und interaktiven Medien. Die Eigenschaften werden nicht vererbt.

Abgrenzungsbreite – outline-width

Der Wert zur Angabe der Breite entspricht der von border-width und ist dort bereits erläutert. Initialwert ist auch hier 'medium'.

Abgrenzungsstil – outline-style

Der Wert zur Angabe des Stils entspricht dem von border-style und ist dort bereits erläutert. Der Initialwert ist auch hier 'none'.

Abgrenzungsfarbe – outline-color

Der Wert der Angabe der Farbe der Abgrenzung ist entweder eine Farbe oder eines der Schlüsselwörter 'invert' oder 'inherit'. Der Initialwert ist 'invert'.

Bei 'invert' wird eine Inversion der Pixel auf dem Bildschirm vorgenommen, also es wird etwa bei einem weißen Hintergrund eine schwarze Abgrenzung gewählt und umgedreht, jedenfalls so, dass die Abgrenzung sich deutlich von den drunterliegenden Farben unterscheidet. Sollte ein Darstellungsprogramm über keinen Algorithmus verfügen, um die Invertierung zu realisieren, soll es den Wert von color verwenden, ähnlich wie bei der Rahmenfarbe.

Kurzform für Abgrenzung – outline

Mit outline werden die Einzeleigenschaften zusammengefaßt. Als Wert wird entweder 'inherit' notiert oder eine Kombination von ein bis drei Einzelwerten outline-color, outline-style, outline-width.

Beispiele Abgrenzung

p {outline: red dotted thin}

Dies ist ein Absatz mit einem Beispieltext darin,
wobei ein Wort mit größerer Schrift und Zeilenumbrüche vorhanden sind, um das Verhalten der Abgrenzung besser sichtbar zu machen.
Sowohl bei dem Wort mit größerer Schrift als auch beim Tiefer- und Höherstellen wird sichtbar, dass die Abgrenzung nicht immer ein Rechteck sein muß: ₁₂₄E⁴⁵⁶in sehr sehr fragwürdiger Inhalt, der vermutlich über mehrere Zeilen geht.

p {
 padding: 1ex; 
 margin: 1ex; 
 border: blue solid 1ex; 
 outline: red dashed 1ex}

Dies ist ein Absatz mit blauem Rahmen und roter Abgrenzung. Damit kann man sehen, wo die Abgrenzung relativ zum Rahmen angeordnet ist. Ein Elternelement hat zudem eine schwarze Abgrenzung und einen Innenabstand von 1ex.

Ein dunkelgrünes div enthalte einen Absatz, um zu gucken, wie sich der Wert 'invert' auswirkt, das könnte etwa einen rosa Farbton ergeben, was sowohl einen hohen Farbkontrast als auch Helligkeitskontrast darstellt:

div{
background: #060;
padding: 2em
}
p {
 padding: 1ex; 
 margin: 1ex;  
 outline: invert dashed 1ex}

Absatz mit etwas Text und invertiertem outline.

Zurück zu Farbe und Hintergrund |

Hoch zu CSS |

Vor zu Schriftformatierungen