Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Zusätzliches HTML-Element einfügen

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die erste Variante, um ein Bild mit dem umgebenden Absatz zu umschließen, besteht darin, ein zusätzliches HTML-Element einzufügen und dieses mit einer Clear-Eigenschaft zu versehen.

Transkript

Die erste Methode zum Umschlißen von Floats, zum Einschließen, Containing Floats genannt hier ist es ein zusätzliches HTML-Element einzufügen und das dann mit einem clear zu versehen. Hier ist die Ausgangsposition, die chaotische Galerie, die Bilder sollen untereinander stehen und die Text jeweils daneben und hier ist diese Datei im Editor. Ein zusätzliches HTML-Element einfügen, das werde ich jetzt hier einmal tun und zwar vor dem schlißenden div, dann nehme ich einfach ein br, ganz simple und hier unten auch noch ein br: Ein Break, einen Zeilenumbruch. Speichern und neu laden und das sieht ja schon fast gut aus. Durch das br wird hier ein bisschen aufgeräumt und das gefloatete Bild steht zumindest schon mal unterhalb, weil hier ein Zeilenbuch eingeführt wurde, aber beide Grafiken werden nicht von den divs umschlossen. Das passiert erst, wenn man die beinden cleart. So hier jetzt im CSS werde ich eine Klasse hinzufügen , die nenne ich clear-and-hide, denn da das Element zusätzlich eingefügt wird, soll es auch gleich noch versteckt werden. Ich fange erstmal mit dem Clearen an, das ist das wichtigste, also da kommt ein clear:both rein. So das is es. So, und das br bekommt jetzt hier die Klasse clear-and-hide, clearen und verstecken, so und hier unten wird das auch eingefügt, natürlich mit einer Lehrstelle, weil sonst kommen unsere Programme hier durcheinander. Da ist der Browser. jetzt ist der einzige Unterschied gegenüber vorher war, dass jetzt das br was hier drin sitzt gecleart wurde. Neu laden und Sie sehen, alles in Butter hier. So im Editor sehen Sie, das clear:both bewirkt für dieses br, dass das daraufolgende Elemente hier unten drunteriIm nächsten beginnt. Also das geclearte br hier im Seiteninspektor, hier ist es eingebaut, das bewirkt, alles wird gecleart, eine klare Linie gezogen und das nächste gefloatete Element fängst erst darunter an. So, und Sicherheitshalber, man kann noch andere HTML–Elemente nehmen, zum Beispiel einen div oder einen hr oder sowas, da dieses eingefügte Elemet aber eigentlich gar nicht zu sehen sein soll, sage ich hier Sicherheitshalber nochmal width: 0, height: 0, font-size: 0 und line-height auch 0, so. Da wird also alles auf 0 gesetzt, damit dieses Element wirklich überhaupt gar nicht irgendwie in Erscheinung tritt. Man kann hier leider nicht einfach nur sagen display:none weil dann wird es nicht dargestellt und dann ist das Clearing auch nicht da. Diese Klasse clear-and-hide bietet das beste aus allen Welten. Sie haben ein clear:both in beide float-Richtung und das Element wird mit diesen vier Deklarationen hier einfach nur versteckt, damit es auch wirklich nicht in Erscheinung tritt. Man sieht mit dem br hier eigentlich keinen Unterschied,aber sicher ist sicher. Das war die erste Methode: Ein zusätzliches HTML-Element einfügen, in diesem Beispiel ein br und das wird mit einem clear:both versehen.

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!