Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Anweisung für umgebenden Ansatz

Testen Sie unsere 1924 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine passende Anweisung dient ebenfalls dazu, ein Bild innerhalb eines Fließtexts mit einem umgebenden Absatz zu umschließen. Dies funktioniert ausschließlich mit Elementen mit flexibler Höhe.

Transkript

Die dritte Methode zum umschließen, zum Containen von Floats, von gefloateten Elementen ist recht simpel. Das umgebende Element bekommt die Anweisung overflow:hidden. Das klingt recht simpel und das ist es auch. Hier zunächst noch einmal die Ausgangsposition, die durcheinandergewirbelte Galerie hier und jetzt kommt die scheinbar geniale Lösung: div.galerie bekommt die Anweisung overflow: hidden. So das war es. Eine Zeile und rüber in den Browser, neu laden und alles in Butter. Genial, einfach Ausgedacht hat sich das Anfang 2005 der britische Webdesigner Paul O'Brien, 2003 war es Set a float to fix a float als Lösung erfunden worden und dann kam das hier, das hat natürlich noch viel mehr Scharm als Set a float to fix a float. Es gibt keine Nebenwirkung, wir müssen nichts clearen. Das ist in komplexen Layouts ein ganz großer Unterschied. Es gibt kein clear und das funkt auch nicht in mehrspaltigen Layouts irgendwo anders dazwischen dann. So overflow: hidden das ist alles, aber gleichzeitig muss man dazu sagen, das funktioniert, weil in der CSS-Spezifikation festgelegt ist, dass overflow wenn es nicht den Standard wie den Visible hat, einen neuen sogenannten Block formatting context erzeugt, den sogenannten BFC, genau wie ein gefloatetes Element und darin werden entahltene gefloatete Elemente automatisch eingeschlossenen. Paul O'Brien hat also die Spezifikation von World Wide Web Consortium genau gelesen und hat gesagt hey, das müsste funktionieren und tatsächlich es funktioniert. Aber gleichzeitig muss man berücksichtigen, dass overflow: hidden in etwa so ist, als ob Sie ein Medikament nur wegen der Nebenwirkungen schlucken. Die eigentliche Wirkung von overflow: hidden ist es überfließenden Inhalt abzuschneiden. Überfließenden Inhalt, das bedeutet, wenn ein Element zum Beispiel eine bestimmte Höhe hat und da ist mehr Inhalt drin als diese Höhe vertragen kann. Was soll dann mit dem Inhalt gemacht werden, der überfließt. Das ist overfloat, dazu gibt es diese Eigenschaft eigentlich. So, ich simuliere das hier im Seiteninspektor und setze mal für die div.galerie die Höhe auf 100 Pixel. Sie sehen was passiert, overflow: hidden bedeutet, der überfließenden Inhalt wird schlicht und einfach abgeschnitten. Also diese Lösung ist in Elementen mit einer definierten Höhe keine besonders gute Idee. Das Bild ist nur noch zur Hälfte da. Die Eigenschaft overflow hat aber noch ein paar andere Werte, die möchte ich Ihnen hier jetzt gleich mal zeigen: Der Standardwert ist visible. So, und Sie sehen visible schneidet nichts ab, setzt aber auch kein BFC, kein Block formatting context, hier wird nichts mehr umschlossen. Haben wir nicht gewonnen. Dann gibt es noch den Wert scroll. Der bedeutet, dass der Browser, wenn mehr Inhalt drin ist, als die Höhe des Elementes hergibt, dann erzeugt er automatisch hierscrollbar. Ich persönlich finde das aus benutzertechnischen Gründen, aus usability Gründen fürchterlich, aber es ist besser als abgeschnittener Inhalt und auch scroll erinen neuen BFC, die Elemente werden umschlossen hier. Aber eigentlich ist auch das nicht so gut. Es gibt noch auto automatisch, dann wird es dem Browser überlassen und die meisten Browser entscheiden sich hier wieder firefox auch für scroll, wenn Sie im zweifelssfall entscheiden müssen, wie Inhalte hier dargestellt werden sollen. Also zum umschließen von Floats gibt es overflow:hidden und das ist eine gute Wahl, solange die Elemente keine fest definierte Höhe haben. So, ich lade das einfach komplett neu und dann sehen Sie das overflow:hidden hier, Einschränkung, gefährlich bei Elementen mit einer fest definierten Höhe und auch wenn man CSS3 Eigenschaften wie box-shadow verwendet, dann kann es bei unglücklichen Umständen passieren, dass dieser Schatten, der außerhalb des eigentlichen Elementes liegt abgeschnitten wird. Das sind also zwei Gründe gegen overflow:hidden, fest definierte Höhe und box-shadow. Wenn das beides nicht der Fall ist, dann spricht nichts dagegen overflow:hidden zu verwenden.

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!