Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

"Overflow"

Mit CSS ist es möglich geworden zu definieren, wie groß (Höhe und Breite) ein Element sein soll. Darüber hinaus kann man auch festlegen, was mit dem Inhalt des Elementes geschehen soll, das über die festgelegten Bereiche hinausgeht. Die Voreinstellung in HTML war festgelegt: Das Element passte sich dem Inhalt an, ausserdem waren "height" und "width" nur in Tabellen (eingeschränkt) erlaubt, was dazu geführt hat, das Tabellen bevorzugt als Hilfsmittel fürs Layout eingesetzt wurden.

Mit CSS ändert sich das. "Width" und "height" sind in allen Elementen erlaubt, man kann also einzelne Abschnitte anders formatieren. So wie hier: {width:200px;padding:10px;margin:3%; margin-left:8%;border:1px dotted red;}

Wenn ich die festgelegte Breite von 200px überschreite (durch die zusammengeschriebene Styleangabe), zeigen die Browser - wenn "overflow" nicht extra definiert ist, unterschiedliches Verhalten. Der Internet Explorer passt die Größe des Elements dem Inhalt an, d.h. der Container wird größer als 200 px. Die Gecko Browser (Netscape, Mozilla, Firefox lassen die Breite des Containers unverändert, der Inhalt überschreitet den Rahmen. "Overflow" legt nun eindeutig fest, was in einem solchen Konfliktfall geschehen soll.

"Overflow:hidden"
schneidet zu großen Inhalt ab, gibt also der Höhen- und Breitenangabe den Vorrang.
"Overflow:auto"
fügt Scrollbalken ein, wenn es erforderlich wird.
"Overflow:scroll"
fügt immer Scrollbalken ein, auch wenn es nicht nötig ist.

Der Vorteil liegt auf der Hand: Vom Benutzer eingestellte Schriften und Schriftgrößen können das Design nicht mehr gnadenlos zerstören.

Noch haben nicht alle modernen Browser "overflow" lückenlos implementiert. Auf der Beispielseite könnt Ihr sehen, wie weit Euer Browser ist.