css mit Adi Prinz

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.

Grid displays

Diese Eigenschaften werden im Kapitel Grid behandelt.

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; }

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;
}

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

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

<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>

#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;
}

<div class="container">
<div class="sticky">Sticky Header</div>
<div class="content">
Inhalt des Containers. Scrollen Sie nach unten, um den Sticky Header in Aktion zu sehen.
</div>
</div>

.container {
height: 200px;
overflow: auto;
border: 1px solid #000;
margin-bottom: 20px;
}

.sticky {
position: -webkit-sticky; /* Für Safari */
position: sticky;
top: 0;
background: lightpink;
padding: 10px;
border-bottom: 1px solid #000;
}

.content {
height: 600px;
background: lightblue;
}

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;
}

img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}