Display

Jedes HTML-Element auf einer Webseite ist eine rechteckige Box. Die display-Eigenschaft in CSS bestimmt, wie sich die rechteckige Box verhält. Jedes HTML-Element hat einen Standardanzeigewert je nachdem, welche Art von Element es ist. Der Standardanzeigewert für die meisten Elemente sind Block- oder Inline-Elemente. Die display-Eigenschaft ändert das Verhalten eines Elements. HTML-Elemente können in Block-Tags, Inline-Tags oder Flow-Elemente umgewandelt werden, display ist nicht vererbbar.

display: none

 p.hidden { display: none; }

In diesem Beispiel wird das p-Element mit der Klasse hidden vollständig aus dem Dokument entfernt. Es braucht auch keinen Platz im Dokument, so als wäre es gar nicht vorhanden.

display: block

span.box { display: block; }

In diesem Beispiel wird das span-Element mit der Klasse box als Block-Element dargestellt.

display: inline

div.beispiel{ display: inline; }

In diesem Beispiel wird das div-Element mit der Klasse beispiel als Inline-Element dargestellt. Inline-Boxen können zwar paddings und margins besitzen. Vertikale Abstände und Rahmen haben jedoch keine Auswirkungen auf die Zeilenhöhe. Verwenden sie dafür line-height.

display: inline-block

div.box{ 
  display: inline-block;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 1px solid #ff0000; 
}

In diesem Beispiel wird das div-Element mit der Klasse box als Inline-Block-Element dargestellt. Inline-Block-Boxen kombinieren die Eigenschaften von Inline- und Block-Boxen. Inline-Block-Boxen werden horizonatal nebeneinader angezeigt und können width- und height-Eigenschaften beinhalten. Alle Eigenschaften des CSS-Box-Modells sind anwendbar (content, padding, border-width, margin).

Das Whitespace-Problem mit inline-block

Ein Problem, das auftritt wenn Sie inline-block verwenden ist, dass Whitespace in HTML einen rechten Abstand von 4px wiedergibt. Allerdings gibt es einige Möglichkeiten, diesen Abstand zu entfernen.

  1. Lösung: Whitespace akzeptieren
  2. Lösung: Kein Whitespace zwischen den Elementen
  3. Lösung: font-size: 0 im Elternelement
  4. Lösung: HTML Kommentare
  5. Lösung: Negatives Margin
  6. Lösung: Schließwinkel in die nächste Zeile

Keine dieser Lösungen sind ideal, aber die einzige Alternative. Hier finden sie einige Beispiele mit den li-Elementen und display: inline-block.

<!--Whitespace akzeptieren-->
<ul>
<li>Item content</li>
<li>Item content</li>
<li>Item content</li>
</ul>

<!--Ohne Whitespace-->
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

<!--font-size: 0 im Elternelement-->
<style>
ul {
font-size: 0;
}
ul li {
font-size: 14px;
}
</style>

<!--HTML Kommentare-->
<ul>  	
<li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

<!--Negatives Margin-->
<style>
ul li {
margin-left: -4px;
}
</style>

<!--Schließwinkel in die nächste Zeile-->
<ul>  	
<li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>

display: list-item

span.beispiel{ display: list-item; }

In diesem Beispiel wird das span-Element mit der Klasse beispiel als list-item-Element dargestellt. Das Verhalten entspricht dem li-Element.

display: run-in

<style>
h1 { display: run-in; }
</style>
<h1>Überschrift</h1>
<p>Das ist ein Absatz</p>

Diese Eigenschaft verwandelt zuerst die Box des Elements in eine Run-In-Box. Wenn eine Block-Box (die nicht mit position oder float formatiert ist) der Run-In-Box als unmittelbarer Nachbar folgt, dann wird die Run-In-Box zur ersten Inline-Box dieser Block-Box. In allen anderen Fällen wird die Run-In-Box zur Block-Box. Bei meinen Tests hat dies allerdings nur beim Internet Explorer 11 funktioniert.

Tabellen displays

Diese Eigenschaften werden im Kapitel Tabellenlayouts behandelt.

Flex displays

Diese Eigenschaften werden im Kapitel Flexbox behandelt.

Float & Clear

Die float-Eigenschaft stellt einen Block aus dem normalen Fluss des Dokuments und positioniert ihn an die linke (float:left) oder rechte (float:right) Seite des Elternelements. Der Text des Elternelements fließt um das float-Element herum.

Eigenschaft Bedeutung Wertzuweisung
float Text umfließen none, left, right, initial, inherit
clear float beenden none, left, right, both, initial, inherit

float

Mit der Eigenschaft float wird ein Element an die linke oder rechte Innenkante seines Elternelements positioniert. Bei einem float:left ist die linke Außenkante des gefloateten Elements identisch mit der linken Innenkante des Elternelements. Dasselbe gilt entsprechend auch für float:right. Eine Verschiebung nach oben oder unten findet dabei nicht statt, float wird nicht vererbt.

<style>
img { 
  float: left;
  width: 280px;
  height: 120px; 
}
p { background-color:#666; }
</style>
<img src="bildname.png" alt="Bildbeschreibung">
<p>Das ist ein Absatz mit viel Text...</p>

Mögliche Werte für float

  • left: floatet nach links
  • right: floatet nach rechts
  • none: (Standardwert)

Der clearfix Hack - overflow: auto

Wenn ein gefloatetes Element größer ist als das Elternelement wird diese außerhalb des Elements angezeigt. Diese Verhalten verhindert die overflow-Eigenschaft des Elternelements (clearfix Hack).

<style>
div { 
  overflow: auto; 
  background-color:#666;
}
img { 
  float: left;
  width: 280px;
  height: 120px; 
}
</style>

<div>
<img src="bildname.png" alt="Bildbeschreibung">
<p>Das ist ein Absatz</p>
</div>

Nebeneinanderstehende Boxen

Wenn sie zwei oder mehrere Boxen nebeneinander stellen möchten gibt es mehrere Möglichkeiten. Im folgenden Beispiel wird die erste Box links gefloatet, die zweite Box bekommt ein margin-left.

<style>
.box1 { 
  float: left;
  width: 200px;
  background-color:#0f0;
}
.box2 { 
  margin-left: 205px;
  background-color:#666; 
}
</style>

<div class="box1">Das ist die linke Box</div>
<div class="box2">Das ist die rechte Box</div>

Nebeneinanderstehende gefloatete Boxen

Ganze Web-Layouts werden sehr häufig mit Hilfe der float-Eigenschaft erstellt. Wichtig dabei sind gute Kenntnisse des CSS-Box-Modells und ein bißchen Mathematik.
Das nächste Beispiel zeigt drei p-Elemente nebeneinader gefloatet.

<style>
div { 
  overflow: auto; 
  background-color: blue;
  border:#000 solid thick;
  box-sizing: border-box;
  width: 60%;
  margin: 10px auto;
}
p {
  margin-top: 0em;
  margin-bottom: 0em;
  float: left;
  height: 100px;
  width: 33%;
}
.box1 { 
  margin-right: 0.5%;
  background-color:#999;
}
.box2 { 
  margin-right: 0.5%;
  background-color:#666; 
}
.box3 { 
  background-color:#666; 
}
</style>

<div>
<p class="box1">Das ist ein Absatz</p>
<p class="box2">Das auch</p>
<p class="box3">Und noch Einer</p>
</div>

Links und Rechts gefloatete Boxen

Eine weiter Option von floats finden sie im nächsten Beispiel. Hier wird die erste Box nach links gefloatet mit einer Breite von 200px. Die zweite Box wird rechts gefloatet mit einer Breite von 200px. Die dritte Box füllt automatisch den zur Verfügung stehenden Zwischenraum aus. Achten sie auf die richtige Reihenfolge (zuerst float:left, dann float:right, zum Schluss der Rest).

<style>
.box1 { 
  float: left;
  width: 200px;
  background-color:#0f0;
}
.box2 { 
  float: right;
  width: 200px;
  background-color:#666; 
}
.box3 { 
  background-color:#999; 
}
</style>

<div>
<p class="box1">Das ist die linke Box</p>
<p class="box2">Das ist die rechte Box</p>
<p class="box3">Das ist die mittlere Box</p>
</div>

clear

Die clear-Eigenschaft beendet das Umfließen anderer Elemente. Ein mit clear formatiertes Element ist das Erste, dass nicht mehr neben anderen Elementen steht. Es kann aber trotzdem mit der float-Eigenschaft formatiert werden, damit nachfolgende Elemente um dieses Element wieder herum fließen. Mit clear:left beenden sie ein float:left, mit clear:right beenden sie ein float:right, mit clear:both beenden sie sowohl als auch.

Mögliche Werte für clear

  • left
  • right
  • both
div { clear: both; }

Positionieren

Wenn position nicht definiert wird, bzw. wenn sie position:static; notieren (Standardwert), werden alle Elemente im Browser nacheinander dargestellt. Inline-Elemente wie z.B. <span> werden aneinander gereiht. Block-Elemente wie z.B. <div> erzeugen normalerweise einen Zeilenumbruch, und nehmen ohne weiteren Styles die verfügbare Breite ein. Breite und Höhe definieren sie mit width und height. Innenabstände werden mit padding, Aussenabstände mit margin definiert. Mit der position-Eigenschaft können sie allerdings Boxen aus dem normalen Textfluss herausnehmen.

Eigenschaft Bedeutung Wertzuweisung
position Positionierung - Typ static, absolute, fixed, relative, initial, inherit
top Positionierung oben Längenangabe, Prozentangabe, auto, inherit
bottom Positionierung unten Längenangabe, Prozentangabe, auto, initial, inherit
left Positionierung links Längenangabe, Prozentangabe, auto, initial, inherit
right Positionierung rechts Längenangabe, Prozentangabe, auto, initial, inherit
z-index Stapelreihenfolge eines Elements Zahl, auto, initial, initial, inherit
clip Element zuschneiden auto, shape, initial, initial, inherit

top, left, right, bottom

Die Positionsangaben definiert man über das Koordinatensystem (top, left, right, bottom). Wo die Ausgangspunkte der Koordinaten sind, entscheidet sich durch die Wertzuweisung absolute, fixed und relative. In der Regel genügen zwei Wertangaben z.B. top und left, der Rest ergibt sich aus der Breite und Höhe der positionierten Box. Positionsangaben sind nicht vererbbar.

Mögliche Werte für top, left, right, bottom

  • Längenangabe: (z.B. Pixel, em)
  • Prozentwerte
  • auto: (Standard)

Ausrichtung Relativ zur Position (position: relative)

Die Ausrichtung der Box mit position:relative ist abhängig von der Position, welche sie normalerweise einnimmt. Davon ausgehend, verschieben sie die Box mit dem Koordinatensystem in die gewünschte Position. Die Nachfolgeelemente verhalten sich so, als ob die relative Box im normalen Textfluss wäre; position: relative ist nicht vererbbar.

#box1 {
  position: relative;
  top:10px;
  left:10px;
}

Absolute Positionierung (position: absolute)

Mit position: absolute positionieren sie eine Box wirklich absolt im HTML-Dokument. Absolut positionierte Boxen ignorieren alle Inhalte im HTML und richten sich in der Regel am Viewport (Bildschirm) oder bessser gesagt am Wurzelelement <html> aus. Es spielt auch keine Rolle, wo im HTML-Dokument sie absulut positionierte Boxen schreiben; position: absolute ist nicht vererbbar.

<style>
#box1 {
  width:400px;
  height:100px;
  position:absolute;
  right:20Px;
  top:20px;
  background-color:#0f0;
}
</style>

<div id="box1">Ich bin absolute positioniert</div>

Absolute und relative Positionierung

Mit position:absolute richten sie eine Box am Viewport aus, es sei denn das Element befindet sich in einem Container, der selbst mit position-Eigenschaften formatiert wurde. Im folgenden Beispiel befindet sich ein Container-Element mit der Eigenschaft position:relativ (ohne Koordinaten). Darin befinden sich zwei Bilder (bild1 und bild2) mit position:absolute. Der Ausgangspunkt für die Koordinaten ist nun nicht mehr der Viewport sondern das Container-Element.

<style>
#container {
  width:900px;;
  margin:0 auto;
  position:relative;
  height:355px;
  border:#3F0 thin solid;
  box-sizing: border-box; 
}
img {
  width:420px;
  height:315px;
  border:none;
}
#bild1 {
  width:420px;
  height:315px;
  position:absolute;
  left:20Px;
  top:20px;
}
#bild2 {
  width:420px;
  height:315px;
  position:absolute;
  right:20Px;
  top:20px;
}
</style>

<div id="container">
<div id="bild1">
<img src="garten1.jpg" alt="Garten1">
</div>
<div id="bild2">
<img src="garten2.jpg" alt="Garten2">
</div>
</div>

Box am Bildschirm fixieren (position: fixed)

Mit position:fixed; fixieren sie eine Box im HTML-Dokument. Fixieren bedeutet, die Box wird ihre Position auch beim Scrollen nicht verändern. Ausgerichtet wird immer am Viewport (Bildschirm) oder bessser gesagt am Wurzelelement <html>; position: fixed ist nicht vererbbar.

#box1 {
  background-color:yellow;
  width:250px;
  height:150px;
  position: fixed;
  top:10px;
  right:10px;
}
#box2 {
  background-color:green;
  width:100%;
  height:150px;
  position: fixed;
  bottom:0;
  left:0;
}

Stapelreihenfolge ändern (z-index)

Durch das Formatieren mit der position-Eigenschaft kann es vorkommen, dass sich Elemente überlappen. Die Reihenfolge (Sichtbarkeit) können sie mit der z-index-Eigenschaft definieren. Je höher der Eigenschaftswert, desto weiter im Vordergrund befindet sich das Element. Es sind auch Minuswerte (z.B. -1) möglich.

Mögliche Werte für z-index)

  • auto: (Standardwert)
  • Zahl: auch Minuswerte sind erlaubt
p[id^=box] {
  color:#666;
  width:300px;
  height:250px;
}
#box1 {
  background-color:red;
  position:absolute;
  top:100px;
  left:400px;
  z-index: 0;
}
#box2 {
  background-color:yellow;
  position:absolute;
  top:200px;
  left:500px;
  z-index: 1;
}
#box3 {
  background-color:blue;
  position:absolute;
  bottom:300px;
  left:600px;
  z-index: 2;
}

clip

Mit der clip-Eigenschaft können Sie ein Rechteck festlegen, um ein absolut positioniertes Element abzuschneiden. Das Rechteck wird mit vier Koordinaten angegeben welche von der linken oberen Ecke des Elements abgeschnitten werden (z.B. rect(0px,60px,200px,0px); ).

Mögliche Werte für clip)

  • auto: (Standardwert)
  • shape: rect(top, right, bottom, left)
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}