Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Mehrere Elemente positionieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Anhand einiger praktischer Beispiele erläutert der Trainer das Verhalten von mehreren HTML-Elementen bei der Verwendung der Float-Eigenschaft.

Transkript

In diesem Film möchte ich Ihnen ein paar Trockenübungen zeigen zum Floaten mit mehreren Elementen. Wenn mehrere Elemente gefloatet sind, so dass man quasi ein bisschen das Jonglieren mit Floats üben kann, bevor es zum Erstellen von Layouts und Navigationen geht. Dazu habe ich fünf Übungsdateien vorbereitet und die möchte ich Ihnen jetzt hier im Browser zeigen. Los geht es hier mit der ersten Datei. Drei ungefloatete Boxen. Hier in der Übersicht. Ich zeige hier im Entwicklertool, im Inspektor des Firefox. Diese Boxen sind nicht gefloatet, aber sie haben alle eine feste Breite. Das ist kein Zufall, denn wenn man diese feste Breite wegnimmt, dann werden normale Blockelemente so breit, wie es geht. Gefloatete Elemente schrumpfen hingegen. Ich zeige hier mal ganz kurz, hier sind nach links gefloatet die Elemente, alle drei. Und wenn ich jetzt hier die Breite rausnehme, dann sehen Sie, - das nennt man "shrinkwrap" - die schrumpfen auf die Breite ihres Inhalts. Das ist ja schon ein ganz entscheidender Unterschied vom Verhalten her, zwischen normalen, nicht gefloateten Blockelementen und gefloateten Blockelementen. Deswegen, beim Layouten benutzt man "float" fast immer mit einer Angabe von "width", mit einer festen Breite. Das muss nicht in Pixel sein, das kann auch in Prozent sein, aber eine feste Breite macht die Sache im wahrsten Sinne des Wortes berechenbar. So, im ersten Schritt werden diese drei Kästchen nach links gefloatet. das ist der einzige Unterschied zwischen der ersten und der zweiten Datei. Ich schalte das hier einmal aus, und Sie sehen, sieht genau aus wie die erste Datei. Alle Boxen werden nach links gefloatet. Zur Erinnerung: Das floaten heißt schweben und ein gefloatetes Element macht drei Bewegungen. Das heißt die erste Box geht rechts außen nach oben und floatet dann nach links rüber. Rechts außen in der umgebenden Box, im umgebenden Element, das ist in diesem Fall "body". Das muss es aber ja nicht immer sein, einfach in der umgebenden Box rechts außen nach oben und dann nach links rüber. Das machen alle drei Boxen. Daher auch diese Reihenfolge eins, zwei, drei. Soweit zu "float: left", jetzt kommt "float: right". Ich ändere hier einfach nur das Wort von "left" auf "right". Und achten Sie darauf: Das ist natürlich, die sind rechts ausgerichtet, da rechnet man ja auch mit, aber achten Sie auf die Reihenfolge. 3-2-1, meins. Das kommt daher, dass hier - und ich gehe jetzt eine Datei weiter, da ist das fest verankert, und nicht nur im Entwicklertool, das ist die "float: right"-Datei Nummer drei. Die erste Box floatet links außen nach oben und dann rechts rüber, die zweite macht das auch und die dritte auch und daher ist die Reihenfolge vertauscht. Viele Leute erwarten, wenn sie ein "float: left" in ein "float: right" ändern, - das muss ich einmal neu laden, das ist "float: left" in ein "float: right " - erwarten, dass die Reihenfolge sich nicht ändert, dass hier also eins, zwei, drei stehen würde. Stellen Sie sich eine Navigation vor, hier Startseite, Kontakt, Impressum, dann floaten Sie das nach rechts - und schwupps - steht hier Impressum, Kontakt und Startseite. Das will man oft nicht. Weiter geht es hier mit dem nächsten, etwas ungewohnten Verhalten. Ich habe das hier vorbereitet ganz normal, aber jetzt verkleinere ich das hier etwas. So lange, bis es nicht mehr passt. Und sobald es nicht mehr passt - schwupps - fluppt das letzte Element in die nächste Zeile. Das ist völlig normal. Das nennt man Float-Drop, weil das gefloatete Element runterfällt, dropt, wenn kein Platz mehr ist. Das ist auch völig erwartet, denn wann soll es sonst tun? Es könnte stehenbleiben und würde dann verschwinden, aber Floats schwuppen in die nächste Zeile. Das ist beim Layouten manchmal nicht erwünscht, da muss man dann einfach aufpassen, dass das genau passt. Und ähnlich sieht das hier aus, im letzten Beispiel beim Floaten mit mehreren Elementen. Sie sehen hier Elemente mit unterschiedlicher Höhe. In diesem Fall, wenn ich das jetzt wieder verkleinere, passiert noch etwas anderes. Denn Box 3, - achten Sie drauf, jetzt - bleibt an Box 1 hängen. Der schwuppt also nicht ganz nach links rüber, sondern der bleibt hier hängen. Ursache ist auch dafür wieder, dass die wirklich rechts außen hoch schweben und dann rüber in die Float-Richtung. Zuerst die erste, zuerst die zweite und dann die dritte. Und die passt hier nicht dazwischen, - so wird das noch deutlicher - also floatet sie so hoch, wie sie kann und geht dann rüber und bleibt hier hängen. Das ist alles an sich ganz logisch, aber in diesen paar Dateien haben Sie jetzt ein paar Beispiele gesehen, die das Verhalten von Floats erläutern, besonders, wenn mehrere gefloatete Elemente zusammen kommen. Also nicht gefloatet, nach links gefloatet, fast immer mit fester Breite, weil das sonst "shrinkwrap" gibt, die schrumpfen. Rechts floaten, da ändert sich oft auch die Reihenfolge. Auch hier würde es "shrink-wrap" geben ohne "width". Bei Platzmangel schwuppen gefloatete Elemente in die nächste Zeile und bei gefloateten Elementen mit verschiedenen Höhen kann es passieren, dass die aneinander hängenbleiben. Abschließend möchte ich Ihnen die Besonderheiten beim Floaten noch einmal kurz zusammenfassen. Gefloatete Elemente haben einige Besonderheiten Als erstes: Floats erzeugen immer eine Blockbox. Sie können also immer eine bestimmte Breite kriegen. Vertikale Margins kollabieren bei Floats nicht. Das ist bei normalen Blockelementen der Fall. Wenn vertikale Abstände aufeinander stoßen, dann kollabieren die und der Größere der beiden überlebt. Ohne "width" wird ein Floaten nur so breit wie der Inhalt. Das habe ich "shrinkwrap" genannt, Schrumpfen, und deswegen benutzt man beim Layouten mit Float fast immer "width", eine bestimmte Breitenangabe. Und Last but not least, Floats sind nicht im Flow. Sie sind etwas herausgehoben aus dem Flow, und ragen nach unten aus der umgebenden Box heraus. Das haben Sie bei dem Bild gesehen, bei dem floatenden Heißluftballon. Der ragt aus dem Absatz heraus, in dem er steht und das wird in dem Abschnitt über Containing Floats noch ausführlicher erläutert.

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!