Feb 2009

CSS overflow • Darstellung übergroßer Inhalte

 
 
overflow.png
Die CSS-Eigenschaften visibility, overflow und clip steuern den Raum, den ein Element einnimmt und können die Darstellung übergroßer Inhalte verhindern.

Immer wieder werden Elemente in umfassende Boxen gesetzt, um sie zu positionieren. Dabei kommt es zu Problemen, wenn ein Element zu groß wird, um in den umfassenden Block zu passen. Die CSS-Eigenschaft overflow soll die »überstehenden« Teile des Elements verbergen, so dass der verbleibende Teil des Elements in den umfassenden Block passt. Die abgeschnittenen Teile des Elements werden einfach nicht dargestellt oder dem Benutzer werden Scrollleisten angeboten, um er die verborgenen Inhalte sichtbar zu machen.

<style type="text/css" title="text/css" media="screen">
div { float: left; width: 60px; height: 60px; overflow: hidden; margin-right: 2px; }
</style>

<body>
…
<div><img src="…" width="120" height="76" alt="" /></div>
…
</body>

Die Inhalte werden von der oberen linke Ecke aus angezeigt und nach links und nach unten abgeschnitten. Die verwandte CSS-Eigenschaft clip legt fest, welche Teile des übergroßen Elements sichtbar sein sollen.

overflow

IE4+ M1 N6 O5+ Sa1.2 CSS2 Erblich: Nein

overflow
overflow bestimmt, ob ein übergroßer Inhalt innerhalb eines Elements beschnitten oder sichtbar sein soll.
Werte
auto | hidden | scroll | visible | inherit

auto veranlasst den Browser, Scrollbalken anzubieten, damit der Benutzer den Rest des Elements betrachten kann.  

hidden gibt vor, dass nur der beschnittene Teil des übergroßen Elements sichtbar ist, so dass es vollkommen innerhalb des umfassenden Containers dargestellt wird und keine Scrollbalken eingespielt werden. 

scroll führt dazu, dass ein übergroßes Element beschnitten wird und Scrollbalken eingespielt werden, über die der Rest des Elements betrachtet werden kann. 

visible ist die Vorgabe und erzwingt, dass ein übergroßes Element nicht beschnitten wird. Das vollständige Element wird dargestellt, obwohl es sich über die Grenzen des umfassenden Blocks hinaus erstreckt. Wenn overflow:visible eingesetzt wird, hat die CSS-Eigenschaft clip keine Auswirkung auf die Darstellung des Elements.

CSS-Eigenschaft overflow und scroll 

<div style="overflow: scroll; height: 200px; width: 180px; …">
  <img src="bild.gif" … />
  <p>Aliquam tempus ipsum … </p>
</div>
0002312.gif

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.

0002312.gif

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.

0002312.gif

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.


Beispiele mit

  1. overflow: scroll;
  2. overflow: hidden;
  3. overflow: visible;





   
Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering U. Häßler 47506 Neukirchen-Vluyn • Impressum und Nutzungsbestimmungen