Zurück: Breiten und Höhen
Weiter: Generierter Content

Anzeige von Elementen

overflow
  • Für gewöhnlich bestimmt die Größe des Contents die Größe des Content-Bereiches. Das folgende Beispiel verdeutlicht, dass dem nicht immer so ist. In aktuellen Opera- und Mozilla-Browsern fließt der Text aus der in der Breite und Höhe festgelegten Content-Box heraus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Anzeige von Elementen</title>

<style type="text/css">
p {
   border: 1px solid blue;
   width: 100px;
   height: 50px;
}
</style>
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Beispieldokument ansehen

Mit der Eigenschaft overflow bestimmen Sie, ob und auf welche Weise Content abgeschnitten wird, wenn die fest dimensionierte Box nicht ausreicht.

visible
Der Inhalt der Box wird nicht beschnitten, er könnte also aus der Box herausfließen, wenn die festgelegten Dimensionen der Box nicht ausreichen.
hidden
Der Inhalt der Box wird beschnitten. Der User hat keine Möglichkeit, auf den abgeschnittenen Inhalt zuzugreifen.
scroll
Es werden Scroll-Mechanismen zur Verfügung gestellt, um den Inhalt der Box zugänglich zu machen, falls er beschnitten wird.
auto
Der Browser bietet Scrollmechanismen dort an, wo es notwendig ist.
inherit

Folgendes Beispiel stellt die einzelnen Werte vergleichend gegenüber. Sie werden sehen, dass Opera-Browser mit overflow noch nicht viel anfangen können.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Die Eigenschaft 'overflow'</title>
<style type="text/css">
#block1, #block2, #block3, #block4 {
   width: 200px;
   height: 100px;
   border: 2px solid black;
   background-color: #ffd;
}
#block1 {
   overflow: visible;
}
#block2 {
   overflow: hidden;
}
#block3 {
   overflow: scroll;
}
#block4 {
   overflow: auto;
}
td {
   vertical-align: top;
   padding: 15px
}
</style>
</head>

<body>

<table summary="Gegenüberstellung der Werte visible,
 hidden, scroll und auto der CSS-Eigenschaft overflow.">
<tr>
<th>overflow: visible</th>
<th>overflow: hidden</th>
<th>overflow: scroll</th>
<th>overflow: auto</th>
</tr>
<tr>
<td>
<div id="block1">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.</div>
</td>
<td>
<div id="block2">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.</div>
</td>
<td>
<div id="block3">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.</div>
</td>
<td>
<div id="block4">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.</div>
</td>
</tr>
</table>

</body>
</html>

Beispieldokument ansehen

clip

Mit der Eigenschaft clip bestimmen Sie, welcher Teil des Elementinhalts tatsächlich dargestellt wird.

auto
Es wird nichts abgeschnitten. Der dargestellte Teil entspricht in Größe und Position exakt den Element-Boxen.
rect(<top>, <right>, <bottom>, <left>)

Die einzelnen Werte stehen für folgende Angaben:

  • <top>: Wie viel oben abgeschnitten wird, gemessen an der oberen Content-Grenze.
  • <right>: Ab wann nach rechts abgeschnitten wird, gemessen an der linken Content-Grenze.
  • <bottom>: Ab wann nach unten abgeschnitten wird, gemessen an der oberen Content-Grenze.
  • <left>: Wie viel von links abgeschnitten wird, gemessen an der linken Content-Grenze.
inherit

Die Funktionsweise lässt sich am besten anhand eines Beispiels erläutern:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Die Eigenschaft 'clip'</title>
<style type="text/css">
div {
   border: 1px solid black;
   clip: rect(10px, 500px, auto, auto);
   position: fixed;
   top: 50px;
   left: 50px;
}
</style>

</head>

<body>

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</div>

</body>
</html>

Beispieldokument ansehen

Der Elementinhalt wird also 10 Pixel oben und nach 500px von der linken Content-Grenze aus gemessen abgeschnitten. Die Deklaration

clip: rect(auto 40px auto 20px);

lässt nur einen schmalen Streifen übrig, da insgesamt nur 40 Pixel von der linken Content-Grenze aus gemessen dargestellt werden, von denen links jedoch 20 Pixel abgeschnitten werden.

  • Aktuelle Mozilla-Browser können die Eigenschaft clip für positionierte Elemente interpretieren, alle anderen Browser haben sie noch nicht implementiert.
visibility

Mit der Eigenschaft visibility bestimmen Sie, ob die Box, die von einem Element generiert wird, dargestellt wird oder nicht.

visible
Die Box wird dargestellt.
hidden
Die Box ist unsichtbar, anders als bei display:none jedoch immer noch vorhanden, nimmt also weiterhin ihren Platz im Elementfluss ein.
inherit

Zurück: Breiten und Höhen
Weiter: Generierter Content
Zum Seitenanfang