Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Float-Eigenschaft für umgebenden Absatz

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Den umgebenden Absatz ebenfalls mit einer Float-Eigenschaft zu versehen, stellt eine weitere Möglichkeit dar, um ein Bild innerhalb eines Fließtexts zu umschließen.

Transkript

Die zweite Methode zum Umschließen von gefloateten Elementen funktioniert indem man das umgebende Elemente ebenfalls floatet. Set a float to fix a float heißt dies e Methode und wurde bereits im Jahr 2003 von CSS Guru Eric Meyer vorgestellt: Füge ein float hinzu um ein float zu reparieren. auch das hat natürlich einige Nebenwirkungen wie Sie sehen werden, aber immer schön der Reihe nach. Hier ist die Ausgangsposition, wie immer etwas kuddelmuddel und hier kommt jetzt die Reparatur oder zumindest die vermeintliche Reparatur, div.gallery das umgebende das umschließende Element wird ebenfalls gefloatet. float: left;, speichern und rüber in den Browser und nach einem Neu laden sehen Sie, es funktioniert. Die Bilder sind umschlossen, es funktioniert nur nicht ganz so wie erwartet. Dadurch dass die beiden div-Elemente jetzt auch gefloatet werden, stehen sie hier unerwarteterweise nebeneinander. Das floaten des div-Elements fügt einen sogenannten Block und alle gefloateten Elemente werden darin eingeschlossen. Diese BFC wird noch ab und zu wieder auftauchen, aber im Moment sei gesagt, dass umschließen funktioniert. Damit diese beiden Galerie-Elemente aber wieder untereinander stehen, muss wieder gecleart werden. So dazu gehe ich rüber in den Editor, ich erstelle hier schnell eine Klasse .clearing , wie die heißt, ist nicht wirklich wichtig, die kann auch Buxtehude heißen, aber .clearing ist wesentlich sprechender. So, damit weiß man was damit gemeint ist und jetzt werden die beiden Galerie-Elemente mit dieser classe versehen.clearing und hier unten auch clearing. Jetzt werden die beide gecleart, gespeichert ist, rüber in den Browser, neu laden und alles steht untereinander. Schon haben Sie wieder hier das Clearing eingebaut, genau wie bei der ersten Methode, wir haben gefloatet, wir haben kein zusätzliches Element, aber die div-Elemente werden gecleart, das heißt auch diese Methode benutzt ein Clear. Hier im CSS sieht man das noch sehr deutlich, das erste musste das Clearing eingentlich nicht unbedingt bekommen, das ist eigentlich nur der Vollständigkeit halber, aber das zweite Element muss wirklich gecleart werden, weil es sonst daneben steht. Der Hauptnachteil des float to fix ist, dass in komplexeren Layouts das Verhalten der nachfolgenden Elemente von dem gefloateten div beinflusst wird, das haben Sie schon gesehe eben, ohne clearing stehen die nebeneinander und auch nachfolgende Elemente muss man wieder clearen oder floaten, so dass man früher später fast alle Elemente auf der Seite floatet und deshalb nennen manche Desinger das dann auch floating nearly everything . Und mit dem Floaten ist es ein bisschen mit dem jonglieren: Ein Ball ist einfach, zwei das geht noch, aber ab drei muss man richtig üben. Und deshalb gibt es ja auch noch weitere Methoden die zum Teil jedenfalls ohne clear auskommen.

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!