Positionierung von Elementen

float

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein

float bestimmt, wie ein Bild im Text oder innerhalb eines Elements positioniert bzw. ausgerichtet wird. float ist eine von zwei Eigenschaften, mit denen die Positionierung eines Elements gesteuert werden kann. Die andere Eigenschaft ist position.

left | right | none

Bilder und Texte, die eingebettet in Texten oder anderen Elementen dargestellt werden, werden als "schwebende Elemente" (floating elements) bezeichnet.

left platziert ein Bild auf der linken Seite des Textes.

right platziert ein Bild auf der rechten Seite des Textes.

none ist die Vorgabe und stellt ein Bild dort dar, wo es im Text steht.

Bemerkung

Netscape 4 beherrscht die Eigenschaft float nicht zuverlässig.

Beispiel 1

.bild_links { float: left; margin-right: 10px;}...
<p><img src="fliege.jpg" width="100" 
                         height="111" 
                         border=0 
                         class="bild_links">
       ... aber die Fliege war wohl noch nicht gro&szlig; genug, 
       um einen Kurzschlu&szlig; zu verursachen.  </p> 

Beispiel 2

img { float: left; } 
      img { float: right; } 
      img { float: none; } 

oder

.bild_rechts { float: right; }
.bild_kein { float: none;  }

...

<img src="css_beispiele/fliege.gif" class="bild_rechts">
<img src="css_beispiele/fliege.gif" class="bild_kein">

Bemerkung

float funktioniert zusammen mit Bildern in Netscape 4.x nur unzuverlässig. Es kommt vor, dass sich das schwebende Element vollständig vor den umfließenden Text legt und so den Text mehr oder minder unlesbar macht. Darum benutzt man besser eine Tabelle mit einer Zelle, in die das Bild gesetzt wird, und lässt die Tabelle am Rand des Textes schweben.

↑

clear

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein

clear steuert, wo ein schwebendes Element in Bezug auf das vorangegangene Element positioniert wird. Es sollte nur auf Blockelemente angewendet werden.

none | left | right | both

none ist die Voreinstellung und hebt alle Beschränkungen auf, wo das Element im Text erscheinen darf.

left sorgt dafür, dass ein schwebendes Element unter dem vorhergehenden Element auf der linken Seite erscheint.

right bestimmt, dass ein schwebendes Element unter dem vorhergehenden Element auf der rechten Seite erscheint.

both steuert, dass ein schwebendes Element unter allen vorhergehenden Elementen erscheint.

Beispiel

a { clear: none; } 
b { clear: left; } 
li { clear: right; } 
p { clear: both; }  oder 
.bild_rechts { float: right; margin-left: 10px;}
 .umfliessen_aus { clear: right; }
 ...
<p><img src="fliege.gif" width="160" height="200" class="bild_rechts">
   <b>Der erste Text erscheint auf der linken Seite des Bildes, 
      da nur gefordert ist, dass er unter dem vorangegangenen Element   
      auf der linken Seite erscheint.</b></p>	
   <p class="umfliessen_aus"><b>Der zweite Text wird
      vollst&auml;ndig  unter dem Bild dargestellt, da gefordert  
      ist, dass er unter dem vorhergehenden Element auf der  
      rechten Seite erscheint &#8226; unter dem Bild also.</b> </p>
 

↑

position

IE4+ M1 N4+ O5+ Version: CSS2 Erblich: Nein

position ist eine von zwei Eigenschaften, mit denen die physikalische Position eines Elements auf einer Seite gesteuert wird (die andere Eigenschaft ist float).

absolute | fixed | relative | static

absolute positioniert ein Element an einer beliebigen Stelle auf der Seite. Die Position kann eine der Eigenschaften bottom, left, right oder top sein.

fixed positioniert ein Element an einer beliebigen Stelle des Viewports (Browserfenster). Dort steht das Element fest, auch wenn die Seite im Browserfenster gescrollt wird. fixed wird von Internet Explorer 5, 5.1 (nur Mac), Netscape 6 und Opera 5 (Mac und PC) unterstützt.

relative positioniert ein Element an einer beliebigen Stelle relativ zu seiner Position im normalen Inhaltsfluss der Seite.

static ist die Vorgabe und stellt ein Element dort dar, wo es im normalen Inhaltsfluss der Seite liegt.

Bemerkung

Netscape 4 unterstützt nur die statische und absolute Positionierung. IE4+ (PC) unterstützt die feste Positionierung nicht.

Beispiel "feste Positionierung"

 div.navigation { position: fixed;
                  top: 2em;
                  left: 2em;
                  width: 170px;
                  right: auto;}

Beispiel "absolute Positionierung"

div.navigation { position: absolute; 
                 top: 2em;
                 left: 2em;
                 width: 170px;
                 right: auto;} 

Beispiel "relative Positionierung"

 h1 { position: relative; 
   				left: -80px; 
   				width: 300px; 
   				top: 0px; 
   				font: 16px/180% Verdana, sans-serif; 
   				color: #333333; 
   				letter-spacing: 0.1em; 
   				background: #97A291; 
   				padding: 0px 4px; margin: 0  px}

↑

top | right | bottom | left

IE4+ M1 N4+ O5+ Version: CSS2 Erblich: Nein	top gibt den Abstand des oberen Randes des Inhalts zum oberen Rand des umfassenden Blocks an.	auto | length | percentage
IE5+ M1 N6+ O5+ Version: CSS2 Erblich: Nein	right gibt den Abstand des rechten Randes des Inhalts zum rechten Rand des umfassenden Blocks an.	auto | length | percentage
IE5+ M1 N6+ O5+ Version: CSS2 Erblich: Nein	bottom gibt den Abstand des unteren Randes des Inhalts zum unteren Rand des umfassenden Blocks an.	auto | length | percentage
IE4+ M1 N4+ O5+ Version: CSS2 Erblich: Nein	left gibt den Abstand des linken Randes des Inhalts zum linken Rand des umfassenden Blocks an.	auto | length | percentage

Diese vier Eigenschaften werden in Verbindung mit der Eigenschaft position benutzt. Der umfassende Block hängt dabei von der Art der Positionierung ab: Wenn das Element absolut positioniert wird, ist der umfassende Block das Browserfenster, ebenso bei fester Positionierung. Bei relativer Positionierung ist der umfassende Block das Dokument. Bei statischer Positionierung liegt das Element im Inhaltsfluss und die Angaben top, right, bottom und left haben keine Auswirkungen.

auto ist die Voreinstellung und legt fest, dass der Browser den Abstand zum umfassenden Block bestimmt.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit	Abkürzung	Maßeinheit	Abkürzung
Zentimeter	cm	Millimeter	mm
ems	em	Pica	pc
x-Höhe	ex	Pixel	px
Inch	in	Point	pt

percentage legt den Abstand des Elements zum umfassenden Block relativ zur Größe des umfassenden Blocks fest. Das Prozentzeichen ist zwingend erforderlich.

Beispiel

(Ein fester Bereich für eine Fußnote unten im Browserfenster):

div {  border: 1px #666666 solid; 
	   top: auto; 
	   right: 2%; 
	   bottom: 5px; 
	   left: auto;
       background-color: linen; 
	   width: 96%; 
	   height: 90px; 
	   position: fixed; 
	   padding: 5px 5px; 
       font: 16px/150% Verdana; 
	   color: #333333 }

↑

clip

IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein

clip beschneidet ein Element, das zu groß für den umfassenden Block ist, und gibt an, welche Teile des übergroßen Elements sichtbar sein sollen.

auto | rect(top, right, bottom, left)

Der umfassende Block ist das Element, das dieses Element und eventuell auch weitere Elemente enthält. Wenn ein Element zu groß ist, um in den umfassenden Block zu passen, wird das Element an den Grenzen des umfassenden Blocks abgeschnitten, so dass es in den umfassenden Block passt. Der abgeschnittene Teil des Elements wird einfach nicht dargestellt.

Die verwandte Eigenschaft overflow bestimmt, ob ein übergroßes Element geclipt wird. Wenn overflow mit visible angegeben wird, hat die Eigenschaft clip keinen Effekt auf das Element und das Element wird vollständig dargestellt, auch wenn es die Grenzen des umfassenden Blocks überschreitet.

auto ist die Voreinstellung und legt fest, dass der Browser bestimmt, welche Teile des Elements sichtbar sein sollen.

rect(top, right, bottom, left) legt fest, dass die Form des Elements als Viereck dargestellt werden soll (zurzeit ist rect die einzige Variante – in neuen Versionen von CSS sollen eventuell auch andere Formen hinzukommen). Die Werte für die Kanten der Vierecke werden durch Leerstellen voneinander getrennt in einer Liste dargestellt. Sie werden im Uhrzeigersinn top, right, bottom und left aufgeführt, wobei jeder Kantenwert zwingend angegeben werden muss. Jeder Kantenwert stellt den Abstand zum umfassenden Block dar:

Der erste Wert – top – legt den Abstand von der oberen Kante des umfassenden Blocks fest.

Der zweite Wert – right – legt den Abstand von der linken Kante des umfassenden Blocks bis zur rechten Elementkante fest.

Der dritte Wert – bottom – legt den Abstand von der oberen Kante des umfassenden Blocks bis zur unteren Elementkante fest.

Der vierte Wert – left – legt den Abstand von der linken Kante des umfassenden Blocks fest.

Der Abstand kann positiv oder negativ sein und kann sich über den umfassenden Block hinaus erstrecken. Damit der Ausschnitt sichtbar ist, muss bottom größer sein als top und right muss größer als left sein. Jeder der Werte für top, right, bottom und left kann in einer der folgenden Längenmaße angegeben werden:

Maßeinheit	Abkürzung	Maßeinheit	Abkürzung
Zentimeter	cm	Millimeter	mm
ems	em	Pica	pc
x-Höhe	ex	Pixel	px
Inch	in	Point	pt

Bemerkung: Sowohl in Netscape 6 (Mac und PC) also auch im Internet Explorer (PC) muss das Element absolut positioniert sein, damit der Beschnitt des Bildes überhaupt angezeigt wird.

Beispiel

(Das <img>-Tag ist an dieser Stelle der umfassende Block. Das Bild wird um 30 Pixel von oben, um 180 Pixel (400-220) von rechts, um 30 Pixel (300-270) von unten und um 20 Pixel von links beschnitten):

.clp { clip: rect(30px, 220px, 270px, 20px)}

...
<img src="loewe.jpg" width="400" height="300" class="clp">

↑

overflow

IE4+ M1 N6 O5+ Version: (CSS2) Erblich: Nein

overflow bestimmt, ob ein übergroßer Inhalt innerhalb eines Elements beschnitten oder sichtbar sein soll.

auto | hidden | scroll | visible

Immer wieder werden Elemente in umfassende Container gesetzt, um sie zu positionieren. Dabei kommt es zu Problemen, wenn ein Element zu groß wird, um in den umfassenden Block zu passen. Per Voreinstellung sollen die "überstehenden" Teile des Elements abgeschnitten werden, so dass der verbleibende Teil des Elements in den umfassenden Block passt. Die abgeschnittenen Teile des Elements werden einfach nicht dargestellt.

Die verwandte Eigenschaft clip spezifiziert, welche Teile des übergroßen Elements sichtbar sein sollen. 

auto ist die Vorgabe und veranlasst den Browser, Scrollbalken anzubieten, damit der Benutzer den Rest des Elements betrachten kann.  

hidden gibt vor, dass nur der beschnittene Teil des übergroßen Elements sichtbar ist, so dass es vollkommen innerhalb des umfassenden Containers dargestellt wird und keine Scrollbalken eingespielt werden. 

scroll führt dazu, dass ein übergroßes Element beschnitten wird und Scrollbalken eingespielt werden, über die der Rest des Elements betrachtet werden kann. 

visible erzwingt, dass ein übergroßes Element nicht beschnitten wird. Das vollständige Element wird dargestellt, obwohl es sich über die Grenzen des umfassenden Blocks hinaus erstreckt. Wenn overflow:visible eingesetzt wird, hat die clip-Eigenschaft keine Auswirkung auf die Darstellung des Elements.

Beispiel

.over { overflow: scroll; 
        height: 150px; 
        width: 150px; }
...
<div class="over">
  <img src="bilder/loewe.jpg" width="400" height="300">
</div>

↑

display

IE4+ M1 N4+ O5+ Die meisten CSS2-Ergänzungen werden von keinem Browser unterstützt. Version: CSS1/Ergänzt in CSS2 Erblich: Nein

display steuert die Darstellung eines Elements.

block | compact | inline | inline-table | list-item | marker |none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group |table-header-group | table-row | table-row-group

block (CSS 1) ist die Vorgabe. Es stellt ein Element als Blockelement oder -box dar, das einen Zeilenumbruch vor und nach dem Element beinhaltet.

compact (CSS2) stellt das Element abhängig vom Kontext als Block- oder Inlineelement dar.

inline (CSS 1) stellt ein Element als Inlineelement oder -box dar. Inlineelemente führen nicht zu einem Zeilenumbruch vor und nach dem Element. Mit anderen Worten: Das Element wird in der gleichen Zeile dargestellt.

inline-table (CSS2) stellt eine Tabelle als Inlineelement oder -box dar, das nicht zu einem Zeilenumbruch vor und nach der Tabelle führt.

list-item (CSS 1) stellt das Element als Liste dar. Jedem Element der Liste kann ein optionaler Listenpunkt wie ein gefüllter Kreis vorangesetzt werden.

marker (CSS2) weist dem Inhalt vor oder nach einem Boxelement einen Marker zu. marker wird zusammen mit den Pseudoelementen :after und :before benutzt.

none (CSS 1) unterdrückt die Darstellung von Elementen. Wenn display:none gilt, muss der Browser alle Anweisungen für die Positionierung (sowohl position als auch float) ignorieren.

run-in (CSS2) stellt das Element abhängig vom Kontext als Block- oder Inlineelement dar.

table (CSS2) stellt ein Element als Blockelement dar.

table-caption (CSS2) stellt ein Element als Tabellenbeschriftung (caption) dar.

table-cell (CSS2) stellt das Element dar, als wäre es eine Tabellenzelle (td).

table-column (CSS2) stellt das Element dar, als wäre es eine Tabellenspalte (col).

table-column-group (CSS2) stellt das Element dar, als wäre es eine Gruppe von Tabellenspalten (colgroup).

table-footer-group (CSS2) stellt das Element dar, als wäre es eine Gruppe von Tabellen-Fußnoten (table footer).

table-header-group (CSS2) stellt das Element dar, als wäre es eine Gruppe von Tabellenköpfen (table header).

table-row (CSS2) stellt das Element dar, als wäre es eine Tabellenzeile (table row).

table-row-group (CSS2) stellt das Element dar, als wäre es eine Gruppe von Tabellenzeilen (table row).

Beispiel

 p { display: block; } 

 img { display: inline; } 

 li { display: list-item; } 

 img { display: none; } oder 

Im folgenden Beispiel wird das zweite Bild nicht dargestellt:

 <img src="fliege" style="display: inline;">

 <img src="fliege" style="display: none;">

 <img src="fliege" style="display: inline;">  

Beispiel

(Eine Tabelle wird als Inlineelement frei schwebend in einen Textabsatz gesetzt)

<table style="display: inline; float: left; margin-right: 10px;">
  <tr> <td>&nbsp;</td> <td>Schnee</td>      <td>Sonne</td>       </tr>
  <tr> <td>Sommer</td> <td>sehr selten</td> <td>ja</td>          </tr>
  <tr> <td>Winter</td> <td>ja</td>          <td>eher selten</td> </tr>
</table>
<p>Blockelemente wie Tabellen lassen sich nicht innerhalb eines 
   Textabsatzes einsetzen, denn sie erzeugen stets einen Zeilenumbruch. 
   Erst wenn die Tabelle durch die Eigenschaft display: inline 
   zu einem Inlineelement transformiert wird, kann ein Textabsatz 
   die Tabelle mit float: right/float:left genauso umfließen wie    
   ein Bild.</p> 

Beispiel

(Ein Text wird als schwebendes Element in einen Textabsatz gesetzt)

.kasten1 { background: #94948C; 
           width: 180px; 
           height: 220px; display: inline;    
           float: left; 
           font: 20px/160% Georgia, Times, serif;    
           color: #FFFFFF; 
           margin: 0px 20px 10px 0px; 
           padding: 10px 6px 6px; border: solid;    
           border-width: 4px 1px; 
           border-color: #5A5A52 #333333}

Beispiel

(Hyperlinks werden als Blockelemente mit einem Zeilenumbruch dargestellt)

Hyperlinks sind Blockelemente (<a>), die als Inlineelemente im Text stehen. Hier werden sie alle untereinander mit einem Hintergrund als Schalter dargestellt, ohne dass eine Tabelle eingesetzt wird.

a { display: block; 
    width: 250px; 
    background: bisque; 
    padding: 6px 6px; 
    border: 1px #666666 solid}
...
<a href="javascript;">Pfefferminzbonbons</a> 
<a href="javascript;">Schokolade</a> 
<a href="javascript;">Veilchenpastillen</a> 
<a href="javascript;">Sahnekaramell</a> 
<a href="javascript;">Gummib&auml;rchen</a>

↑

visibility

IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein

visibility entscheidet, ob ein Element sichtbar ist oder unsichtbar. Ein unsichtbares Element ist vollständig transparent, belegt aber weiterhin Platz auf der Seite und andere Elemente können den Raum nicht einnehmen. Ein unsichtbares Element kann also sicherstellen, dass ein Platz im Layout immer frei bleibt. Beliebt ist visibility auch für dynamische Inhalte und im Zusammenhang mit Skripten.

collapse | hidden | visible

collapse verbirgt Zeilen oder Spalten einer Tabelle. Eine verborgene Zeile oder Spalte kann für andere Inhalte benutzt werden. Für alle anderen Elemente hat collapse die gleichen Auswirkungen wie der Wert hidden.

hidden bestimmt, dass ein Element auf der Seite nicht sichtbar ist.

visible bestimmt, dass ein Element auf der Seite sichtbar ist.

Beispiel

 p {visibility: hidden;} 

 br {visibility: visible;} oder 

 <img src="fliege.gif" style="visibility: visible;">  

 <img src="fliege.gif" style="visibility: hidden;">  

 <img src="fliege.gif" style="visibility: visible;">  

(Nur zwei Bilder dürfen sichtbar sein, der Platz für das mittlere Bild muss frei sein.)

Beispiel

<table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>Ach wie gut, dass niemand wei&szlig;,</td>
      <td style="visibility: collapse">
              dass ich Rumpelstilzchen hei&szlig;</td>
      <td>aus dem M&auml;rchen &quot;Rumpelstilzchen&quot;</td>
   </tr>
   <tr> <td>Niemand durfte der sch&ouml;nen 
              M&uuml;llerstochter zusehen, </td>
      <td style="visibility: collapse">wie sie Gold spann. </td>
      <td>aus dem M&auml;rchen &quot;Rumpelstilzchen&quot;</td> 
   </tr>
</table>

↑

z-index

IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein

z-index legt die Stapelordnung für Elemente fest, die sich auf dem gleichen Raum überlappen können.

auto | number

Elemente können also drei Dimensionen aufweisen. Die x- und y-Position wird auf dem Monitor angezeigt, die z-Position bestimmt, welches Element über anderen Elementen liegt. Je größer der Wert von z-index, desto weiter oben liegt das Element. Anders gesagt, liegen Elemente mit größeren Werten über solchen mit niedrigeren Werten.

auto setzt den Wert der Stapelordnung auf den Wert des Elternelements und ist die Voreinstellung.

number kann eine positive oder negative ganzzahlige Zahl sein.

Beispiel

("hier" hat den höchsten z-index und muss also vor "Wer" und "drängelt" liegen)

.d1 { z-index: 1; color: rosybrown;
	position: absolute;
	left: 50px; top: 50px;
	width: 400px; height: auto }
.d2 { z-index: 2; color: darkolivegreen;
	position: absolute;
	left: 80px; top: 75px;
	width: 400px; height: auto }
.d3 { z-index 3; color: tomato;
	position: absolute;
	left: 200px; top: 120px;
	width: 400px; height: auto }

...

		<div class="d1">Wer</div>
		<div class="d2">drängelt</div>
		<div class="d3">hier</div>

↑