Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Beginn eines Absatzes verschieben

Testen Sie unsere 1961 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Entwickler verfügt über die Möglichkeit, den Beginn eines Absatzes durch Anwendung der Clear-Eigenschaft unter ein bestimmtes Element zu verschieben.

Transkript

Auf dieser Webseite hier ist die Grafik mit dem Heißluftballon nach rechts gefloatet und mit einem einfachen Bilderrahmen versehen. Dass die gefloatete Grafik unten aus dem ersten Absatz herausragt, kann man hier schon mit ein bisschen guten Willen erkennen, denn hier kommt der zweite Absatz und der fließt ja ebenfalls um die Grafik drum herum. Das kann man visualisieren, hier im Entwicklertool geht das recht einfach. Sie sehen, oben der Absatz ist markiert. Und wenn ich jetzt hier bei Elemente einmal klicke, dann kann ich hier direkt für dieses Element im Entwicklertool eine neue Eigenschaft reinschreiben. Ich nehme hier mal "background" und gebe dem eine Hintergrundfarbe, wie pink. Und dann kann man das hier oben sehr schön sehen. Die Grafik sitzt im Quelltext - auch das kann man hier sehen - direkt im Absatz. Sie ragt aber nach unten aus diesem Absatz heraus. Das ist im Augenblick, beim Umfließen von Grafiken mit Text ist das sehr praktisch, weil der nächste Absatz auch neben dem Bild steht. Später beim layouten führt genau dieser Effekt das normale Verhalten von Floats, nämlich das Grafiken herausragen, zu sehr unerwünschten Nebeneffekten. Aber zurück hierzu. Sie sehen, das Pink fließt bis hinter das Bild. Das heißt, der Absatzt hört nicht auf, das ist nur der Text, der vor der Grafik umbricht. Der nächste Absatz hier, der fließt auch um die Grafik herum. Falls man das nicht möchte, - blende das hier mal wieder aus, markiere mal den zweiten Absatz - dann muss man diesen zweiten Absatz clearen. "clear" zwingt ein folgendes Element unterhalb eines gefloateten Elements zu beginnen. Ich zeige das hier einmal wieder: "clear", dann nehme ich gleichmal die Eigenschaft "both" und Sie sehen, ich brauche gar nicht weiterzumachen, das sieht man schon sehr schön. "clear" bedeutet, fange unterhalb aller gefloateten Elemente an. Das heißt also, die Grafik oben ist das gefloatete Element und wenn ich dem Absatz hier sage "clear: both", dann beginnt dieser Absatz unterhalb der gefloateten Grafik. Man kann das jetzt hier machen mit "left", dann sehen Sie, das bewirkt nichts. Ein "clear: left" gilt nur für nach links gefloatete Elemente. Ein "clear: right", das sehen Sie funktioniert, das gilt für nach rechts gefloatete Elemente. Und es spricht nicht viel dagegen hier "clear: both" zu nehmen, das gilt immer für beide, nach links oder rechts gefloatete Elemente. Float und Clear, wo gehobelt wird, fallen Späne und wo gefloatet wird, wird auch gecleart. Ein "float" lässt Elemente schweben, es gibt die Werte "left", "right" und "none". Ein "clear" beendet einen Float-Zustand und es gibt die Werte "left", "right" und "both". Ein "clear:left" gilt nur für "float:left", ein "clear: right" gilt nur für "float: right". und "clear: both" gilt für ntweder "left" oder "right". Da man öfter gefloatete Elemente clearen muss, kann man am besten in seinem Fundament-Stylesheet, in dem man Styles hat, die man immer mal wieder braucht, eine Klasse dafür anlegen. Das habe ich hierfür schon einmal gemacht. Ich habe in "fundament" einen neuen Teil eingerichtet, "TEIL IV - Allgemeine Klassen", habe die Klasse sinnigerweise genannt ".clearing" und habe dahinter einfach geschrieben "clear: both". Das ist dann verfügbar, wenn das Stylesheet richtig eingebunden ist. Und ich könnte jetzt hier - Ich gehe noch einmal eben auf die Seite und lade Sie neu, damit sie wieder so ist, wie se im Editor auch ist hier - Ich könnte jetzt diesem Absatz, wenn er unterhalb der Grafik beginnen soll, sagen, "class=clearing" und der findet dann die Klasse in dem "fundament"-Stylesheet. Und jetzt sollte der zweite Absatz unterhalb der Grafik beginnen. Diese Klasse ist also recht praktisch, auch wenn sie mit diesem Absatz hier im Augenblick nichts zu tun hat. Deswegen nehme ich ihn wieder raus. Das bleibt hier um die Grafik fließend und Sie sehen "float" und "clear" in Aktion. Ein gefloatetes Element ragt aus dem Element heraus, in dem es sitzt. Und wenn man möchte, dass folgende Elemente unterhalb eines gefloateten Elements beginnen, dann muss man sie clearen.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!