Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Probleme bei Bildern in Fließtext lösen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Oftmals sorgen Bilder in einem Fließtext für Probleme, da der umgebende Absatz das Element nicht umschließt. Hierfür bietet CSS allerdings eine passende Lösung an.

Transkript

Die Eigenschaft "float" bereitet beim Layouten oft Probleme, weil gefloatete Elemente von ihrem jeweiligen Elternelement nicht automatisch eingeschlossen, also umschlossen werden, sondern nach unten herausragen. Das Thema heißt "Containing Floats", also gefloatete Elemente umschließen, und auf der Startseite der Beispielsite sehen Sie das hier in Aktion. Hier ist eine gefloatete Grafik und wenn ich da den Seiteninspektor hier aufrufe, dann sehen Sie hier "float: right". Das Bild wird gefloatet. Wenn ich jetzt den umgebenden Absatz, wie bereits einmal gesehen, mit einem Background versehe, dann wir es sehr deutlich, was ich damit meine. Das gefloatete Element ragt unten aus diesem Absatz heraus, in dem es steht. Das ist hier an dieser Stelle ein gewünschtes Verhalten, damit auch der zweite Absatz hier weiterfließt, aber das kann sehr schnell zu Problemen führen, wenn man layoutet. Um Ihnen diese Problematik bewusst zu machen, und die möglichen Lösungen vorzuführen, geht es los mit einem einfachen Beispiel. Das ist die Galerie, - fast in Anführungsstrichen - eine sehr einfache Galerie. Das ist das, was wir erreichen möchten. Zwei gefloatete Bilder, eins und zwei, und daneben jeweils eine kleine Überschrift und ein bisschen Fließtext. Bild und Überschrift und Fließtext werden jeweils grau umrandet hier. Simpel genug, aber es wird einiges passieren auf dem Weg dorthin. Unsere Ausgangsposition möchte ich Ihnen hier kurz schildern. Das ist die grundlegende Datei "floats-umschliessen", die Ausgangsposition. Und die zeige ich Ihnen hier jetzt einmal kurz im Editor. "floats-umschliessen" - da ist es. Wir haben eine "h2"-Überschrift, die Galerie und dann zwei "div"s, mit der "class=galerie" und jeweils zwei Bildern darin, zwei "h3"-Überschriften und einem Absatz mit ein bisschen Pseudo-Text, mit ein bisschen Blindtext darin. Das ist "floats-umschliessen", die Ausgangsposition. Gestaltet wird das sehr simpel. Die "h3"-Überschrift, eine Schriftgröße. Die div-Galerie mit der Klasse "galerie" hier bekommt eine graue Hintergrundfarbe. 500 Pixel breit, ein bisschen Padding, und eine einfache Rahmenlinie drum rum, also überhaupt nichts Besonderes. Wie gesagt, recht simpel. Das ist die Ausgangsposition für die folgenden Experimente.

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!