Das Floaten ist eines der entscheidenden CSS-Konzepte. Ohne das Verständnis dieses Prinzips lassen sich Webseiten nicht auf Basis von CSS erstellen. Floaten kann man hier übrigens sehr schön mit Fließen übersetzen, was die Sache auf den Punkt bringt. Letztendlich bedeutet Floaten nämlich nichts anderes, als dass ein Element sich links oder rechts neben einem anderen Element anordnet. (Im Normalfall würde das Element unterhalb eines anderen Elements stehen).
Ein erstes Beispiel soll diesen Aspekt verdeutlichen.
<p><img src="bild.jpg" /> In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds usw. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
Hier wurde ein Absatz definiert. Innerhalb dieses Absatzes befinden sich ein Bild und normaler Text.
Ein Blick auf das Ergebnis zeigt, dass das Bild im Textfluss steht.
img { float: left;}
Auch hierzu wieder ein Blick auf das Ergebnis.
Hier wurde das Bild also gefloatet. Der Text fließt dadurch um das Bild herum.
Ein Blick auf die bisherigen Ergebnisse macht deutlich, dass das noch nicht wirklich hübsch aussieht. Tatsächlich fehlen die Abstände zwischen Bild und umfließendem Text. Passt die Syntax dazu folgendermaßen an:
img {
float: left;
margin-right: 20px;
}
Dem Bild wurde ein rechter Rand von 20 Pixel zugewiesen. Das ergibt folgenden Anblick:
Experimentiert hier einfach ein bisschen mit den Randabständen.
Das Floaten beenden
Noch einmal zurück zum Bildbeispiel. Ich erweitere die Syntax um einen zusätzlichen Textabsatz.
<p><img src="bild.jpg" />In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p> <p>In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
Das Ergebnis sieht so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
<p style="clear:left;">In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
</body>
</html>
.clearing {
clear: both;
}
Diese Klasse könnt ihr immer dann verwenden, wenn das Floaten eines Elements beendet werden soll.
<p class="clearing">Inhalte ...</p>
Wozu das Floaten gut ist
Natürlich wird das Floaten nicht nur für den Textfluss im Zusammenhang mit Bildern benötigt. Tatsächlich bildet es das Grundkonzept CSS-basierter Webseiten. Denn dank dem Floaten lassen sich beispielsweise mehrspaltige Layouts ganz einfach umsetzen. Seht euch dazu folgendes Beispiel an:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Hier steht der Inhalt der Webseite.
</div>
</body>
</html>
Hier wird ein zweispaltiges Layout aufgebaut. Das Besondere dabei: Die Spalten stehen nebeneinander.
Und eben dieses Nebeneinanderstehen wird über das Floating-Konzept realisiert. Ausführliche Informationen zum Aufbau von Webseiten auf Basis des Floatens folgen im weiteren Verlauf dieser Reihe.
