Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Display-Anweisung anwenden

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Kombination einer Display-Anweisung in Verbindung mit einer festen Breite des HTML-Elements stellt eine weitere Option dar, um Bilder in einem Fließtext mit dem umgebenden Absatz zu umschließen.

Transkript

Die vierte Möglichkeit zum Umschließen von gefloateten Elementen lautet schlicht und einfach display:table. Hier im Browser wieder die Ausgangsposition mit den durcheinandergewirbelten Bildern und der Beschriftung und hier die Datei im Editor, div.galerie bekommt in diesem Falle dann jetzt die Anweisung display:table; speichern, rüber in den Browser und wieder sieht alles gut aus soweit. Sie sehen das Resultat ist jedes mal das selbe. Die Eigenschaft display:table verstehen alle modernen Browser und der Internet Explorer ab der Version 8. Das gibt also im Jahre 2015 hier auch keine Probleme mehr mit Browserkompatibilitäten. Display:table sollte immer mit einer festen Breite benutzt werden. Das ist einer der Nachteile, das ist aber ähnlich wie beim Floaten, ohne feste Breite wird eine Tabelle nur so breit, wie der darin enthaltene Inhalt. Ein anderer potenzieller Nachteil von display:table ist, dass wenn Sie die div.galerie, also das Element, was hier auch display:table hat, wenn das jetzt noch position: relativ bekommen soll, aus welchen Grund auch immer, zum Beispiel, wenn hier drin noch ein absolut positioniertes ist, was relativ zu div.galerie positioniert werden soll, dann ist dieses position: relativ wirkungslos. Position: relativ ist in Verbindung mit display:table wirkungslos. Das ist ein Nebeneffekt von display:table. Ansonsten ist das hier zum Umschließen von Floats mit display:table eine recht simple und effektive Maßnahme.

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!