Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Auswirkungen auf die Darstellung

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Trainer erläutert in diesem Video das am häufigsten auftretende Problem bei der Anwendung der Float-Eigenschaft auf Bilder innerhalb eines Fließtexts und analysiert die Auswirkungen auf die Darstellung der Website.

Transkript

Der naheliegendste Weg, um Text und Grafiken nebeneinander zu stellen, innerhalb ihrer jeweiligen grauen Rechtecke, wäre es, die Grafik einfach zu floaten. Das führt zwar nicht ganz zum gewünschten Ergebnis, aber der im Folgenden inszenierte Float-Unfall ist so typisch, und treibt so viele Webdesigner schlicht zur Verzweiflung, dass ich das einmal Schritt für Schritt kurz erläutern möchte. Zuerst hier im Editor hier dieselbe Datei. Zwei "div class=galerie", Bilder darin und Text, "h3" und "p". Jetzt hier ein vorbereiteter Style "galerie", Leerstelle "image", also die Bilder in dem div mit der Klasse "galerie" sollen gefloatet werden und rechts einen Abstand von 15 Pixeln haben. Simpel genug dieser Style. Und CSS-Einsteiger erwarten an dieser Stelle, dass damit alles erledigt ist. Und wie Sie hier nach dem neu Laden sehen, entspricht das Ergebnis nicht ganz dieser Erwartung. Eine so simple Sache und ein solches Tohuwabohu hier, ein solches Kuddelmuddel. Spätestens an dieser Stelle sagen viele Leute: Das kann es ja wohl nicht sein, hier mit dem Floaten. Was ist das für ein Unsinn? Aber dieses scheinbare Chaos entsteht, weil die gefloateten Grafiken nicht von den umgebenden div-Elementen eingeschlossen werden. Dieses Bild hier, diese Grafik - ich rufe auch hier den Seiteninspektor mal wieder auf - man sieht das recht deutlich. Jetzt fahre ich mit der Maus auf das umgebende "div" und das Bild ragt nach unten heraus. Es weiß nichts davon und gefloatete Elemente tun das. Das ist ihr natürliches Verhalten Die zweite Grafik, wenn ich hier etwas weiter runter gehe und auch das öffne hier, dann sieht man das, die bleibt jetzt an der ersten hängen. Dieses ach so simple Beispiel ist natürlich genau so konstruiert, dass das passiert, aber es wird in der Realität häufig so sein. Diese Grafik ist hier einfach auch gefloatet und bleibt, weil sie hier ja hochläuft, in ihrer umgebenden Box und dann rüberfloatet nach links, bleibt sie hier hängen. Und das Ergebnis sieht schlicht und einfach katastrophal aus. Leider gibt es im CSS keine Option zum automatischen Umschließen von Floats. Das wäre natürlich super praktisch, wenn man allen Floats sagen könnte, oder zumindest allen Layout-Floats: Umschließt bitte eure gefloateten Elemente. Das geht nicht, aber es gibt diverse Workarounds. Es gibt eigentlich fünf Methoden, die weit verbreitet sind um gefloatete Elemente zu umschließen. Nummer eins ist, dass man ein zusätzliches HTML-Element einfügt, vor dem schließenden "div" der Galerie. Zum Beispiel ein "br" oder ein "hr", und das dann im CSS cleart. Methode Nummer zwei: Das umgebende Element bekommt ebenfalls ein "float". Set a float to fix a float. Methode Nummer drei: Das umgebende Element bekommt "overflow: hidden". Methode Nummer vier: Das umgebende Element bekommt "display: table". Und Methode Nummer fünf: Das umgebende Element bekommt einen Micro-Clearfix-Hack. Das ist was ganz Besonderes natürlich. Alle diese fünf Methoden haben Vor- und Nachteile. Es gibt nicht eine, die so fantastisch gut ist, dass sie die anderen ersetzt, deswegen hat man diese fünf, weil in verschiedenen Situationen ist jeweils die eine Methode der anderen etwas überlegen.

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!