Webdesign mit CSS, XHTML und Javascript
Stil mit {stil}
Okt 2007
Die CSS-Eigenschaft float: Schwebende Boxen für die Positionierung
- In Textverarbeitungsprogrammen wie Word und Satzprogrammen wie Quark oder InDesign kennen wir das „Umfließen“ von Blöcken auch noch nicht viel länger als die Floats aus CSS1.
Die CSS-Eigenschaft float nimmt Blöcke aus dem normalen Fluss des Dokuments und setzt sie an die linke oder rechte Seite des umfassenden Blocks, während der restliche Text des umfassenden Blocks um sie herumfließt.
Obwohl CSS uns durch die Eigenschaft position einen mächtigen Mechanismus für die Positionierung von Elementen zur Hand gegeben hat, ist float eine elegante Alternative für die Positionierung von Layout-Elementen auf einer Website. Die CSS-Eigenschaft float ist intuitiver und leidet weniger unter Browserfehlern als position. Kleinere Blöcke mit Texten oder Bildern behalten bei Änderungen der Seite einen besseren Zusammenhang mit den Texten, da sich ihre ihre Position zusammen mit dem Text automatisch ändert – sie »fließen mit«.
Schwebende Element können an jeder beliebigen Stelle des Dokuments auftauchen. Sie werden durch die CSS-Eigenschaft float erzeugt, die drei Werte aufweisen kann: left, right oder none. Wichtig: Für ein schwebendes Element muss immer auch eine Breite angegeben werden, ansonsten würde das float per Voreinstellung immer so breit wie der umfassende Block.
So ziemlich alles darf floaten: Blockelemente wie Textabsätze und div-Container genauso wie Inlineelemente wie Bilder und span-Container.
<p style="float: left; width: 250px; "> <div style="float:left; width 300px"> <img style="float:left; width: 120px; height: 120px; margin-right: 10px">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title> CSS-Eigenschaft float für Bilder </title>
<style>
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
</style>
</head>
<body>
<p>
<img src="pos.png" alt="pos.png" width="240" height="182" />Lorem ipsum dolor …
</p>
<p>
In pharetra. Praesent aliquet neque. Integer in felis nec libero …
</p>
</body>
</html>
Mehrere Blöcke mit der Eigenschaft float können auf dem gleichen horizontalen Raum liegen, und zwar nebeneinander auf der gleichen Seite des umfassenden Blocks oder rechts und links auf beiden Seiten. Die erste Box wird gefloatet, und wenn für die zweite Box noch ausreichend Platz vorhanden ist, wird die zweite Box daneben gesetzt, ansonsten landet sie unter ihrem linken Nachbarn.
Das könnte zu unserem Lieblingslayout werden, denn nun könnten wir unseren Besuchern mit großen Monitoren ein Drei- oder Vier-Spalten-Layout bieten, während das Layout für Besucher mit kleinen Monitoren zu einem Zwei-Spalten-Layout mutiert.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>mediaevent :: Bild mit der Eigenschaft float</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
body { margin: 1em 4em; font-size: 90%;}
.float1 { float: left; width: 12em; }
.float2 { float: left; width: 24em; }
.float3 { float: left; width: 12em; margin-bottom: 1em; }
/* ]]> */
</style>
</head>
<body>
<div class="float1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. </p>
</div>
<div class="float2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. </p>
<p>In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt. </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div>
<div class="float3">
<p>Quisque quis neque. Donec eu risus. Praesent ut sapien. Fusce semper dolor vel libero. Quisque tincidunt rhoncus nibh.</p>
</div>
<div class="float3">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et quam.</p>
</div>
</body>
</html>
Genug gefloatet: Alles zurück an den Rand
Nicht immer sollten alle Texte neben dem float verlaufen. Eine Überschrift soll das Umfließen der floats beenden, der folgende Absatz auf der linken Seite beginnen und sich über die gesamte Breite des umfassenden Blocks erstrecken.
Dafür ist die Eigenschaft clear gedacht, die dem float ein Ende bereitet. clear weist vier Werte auf: left, right, both und none. clear: right als Stil für die Überschrift sorgt dafür, dass eine Überschrift so weit nach unten geschoben wird, dass sie unter einem rechts schwebenden Element landet und wieder bis zur äußerst rechten Seite des umfassenden Blocks läuft. clear: left schiebt ein Element so weit nach unten, dass es unter einem links schwebenden Element steht, clear: both versetzt das Element sowohl unter rechts als auch unter links schwebende Boxen. Wenn in einem Dokument floats benutzt werden, notiert man alle Überschriften vorsichtshalber mit der Eigenschaft clear: both, damit sie nicht neben schwebenden Blöcken, sondern immer unter ihnen landen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>mediaevent :: Bild mit der Eigenschaft float</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
body { margin: 0 6em; }
img { float: right; margin-left: 1em; }
h3 {clear: right; }
/* ]]> */
</style>
</head>
<body>
<h3><img src="birnen.gif" alt="Illustration" width="150" height="163" />Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna. </p>
<h3><img src="melone.gif" alt="Illustration" width="150" height="120" />In pharetra</h3>
<p>In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt. Quisque consequat velit vitae orci. Suspendisse potenti. Nulla facilisi. </p>
</body>
</html>