SELFHTML: CSS / Style-Sheet-Angaben / Elemente positionieren
Description: (SELFHTML 7.0) Übersicht zu CSS-Style-Sheet-Angaben, um Bestandteile einer WWW-Seite bildschrimorientiert an einer bestimmten Stelle zu positionieren, entweder absolut bezogen auf das Anzeigefenster oder relativ bezogen auf Nachbarelemente.
Keywords: SELFHTML, HTML, CSS, Style-Sheets, Psotioning, Positionieren

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Elemente positionieren
| Allgemeines zum Positionieren von Elementen Positionsart (position) Startposition von oben (top) Startposition von links (left) Startposition von unten (bottom) Startposition von rechts (right) Breite (width) Mindestbreite (min-width) Maximalbreite (max-width) Höhe (height) Mindesthöhe (min-height) Maximalhöhe (max-height) Elementbereich mit übergroßem Inhalt (overflow) Richtung (direction) Textumfluß (float) Fortsetzung bei Textumfluß (clear) Schichtposition bei Überlappung (z-index) Anzeigeart bzw. Nichtanzeige ohne Platzhalter (display) Anzeige bzw. Nichtanzeige mit Platzhalter (visibility) Anzeigebereich eingrenzen (clip)

## Allgemeines zum Positionieren von Elementen

Ab der CSS-Version 2.0 gibt es verschiedene Style-Sheet-Angaben, um Elemente einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen untereinander genau zu kontrollieren. Dazu gehören Angaben zum absoluten und relativen Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umfließen von Elementen und Angaben zum Überlappen und Anzeigen von Elementen.

Absolutes und relatives Positionieren von Elementen Ihnen die Möglichkeit, das Erscheinungsbild von WWW-Seiten stärker bildschirmorientiert zu gestalten. So können Sie für einzelne Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche können sich überlappen usw. Im wesentlichen decken diese Style-Sheet-Angaben die Möglichkeiten der Layer ab. Im Gegensatz zu den Layern sind sie jedoch ein offizieller Vorschlag des W3-Konsortiums. Netscape und der Microsoft Internet Explorer interpretieren diese Angaben seit ihren 4er-Versionen - allerdings mit einigen Einschränkungen bzw. Besonderheiten.

Das Positionieren von Elementen ist eine wichtige Voraussetzung für viele Anwendungfälle von Dynamischem HTML. Mit Hilfe entsprechender Script-Unterstützung können Sie positionierte Elemente bewegen, ein-/ausblenden, anders überlappen usw.

## Positionsart (position)

Anzeigebeispiel: So sieht's aus

Sie können für einen Bereich bestimmen, daß er absolut oder relativ positioniert werden soll.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="position:absolute; top:100px; left:45px; width:300px">Inhalt</div>

### Erläuterung:

Mit `position:` können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

`absolute` = absolute Positionierung, gemessen am Fensterrand, aber scrollbar.
`fixed` = absolute Positionierung, gemessen am Fensterrand, bleibt beim Scrollen stehen.
`relative` = relative Positionierung, gemessen am Vorgänger-Element.
`static` = keine spezielle Positionierung, normaler Elementfluß (Normaleinstellung).

Die Angaben `absolute`, `fixed` und `relative` brechen den normalen Fluß der Elemente auf (`relative` ist also etwas anderes als "normal", der Normalzustand ist `static`). Besonders das Verhalten der Angaben `absolute` und `relative` ist anfangs etwas verwirrend, aber gerade im Aufbrechen des normalen Elementflusses besteht ja ihr Sinn. Abstände relativ zum normalen Elementfluß können Sie stattdessen mit Angaben zu Abständen, Rändern und Ausrichtung definieren.

Der Unterschied zwischen `absolute` und `relative` besteht darin, daß sich eine absolute Angabe auf den Fensterrand bezieht, eine relative Angabe dagegen auf ein voranstehendes Element. Der Unterschied zwischen `absolute` und `fixed` besteht darin, daß eine absolute Positionierung nur die Anfangsplazierung eines Elements betrifft, die fixe Positionierung dagegen die Dauerplazierung des Elements im Anzeigefenster. Absolut positionierte Elemente wandern beim Scrollen mit. Fix positionierte Elemente bleiben beim Scrollen an ihrem Platz. Mit fix positionierten Elementen werden ähnliche Effekte möglich wie mit Frames.

Die Angabe `position:` legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe macht nur Sinn, wenn Sie zugleich die gewünschte Startposition angeben. Dies können Sie beispielsweise mit Angaben zur Startposition von oben (top) und/oder zur Startposition von links (left) tun.

### Beachten Sie:

Die Angabe `fixed` wird weder von Netscape noch vom MS Internet Explorer interpretiert.

Weder Netscape noch der MS Internet Explorer interpretieren Angaben zur absoluten Positionierung in allen HTML-Tags. Um sicherzugehen, ist es vorläufig sinnvoll, Angaben zur Positionierung nur auf die HTML-Tags `<div>`...`</div>` oder `<span>`...`</span>` anzuwenden. Schließen Sie andere Elemente, etwa Textabsätze, Grafiken, Tabellen, Formulare usw. einfach in solche allgemeine HTML-Tags ein. Die inneren Elemente übernehmen dann die Positionierung des Gesamtbereichs.

Netscape und der MS Internet Explorer reagieren bei absoluter Positionierung unterschiedlich, was die automatische Breite von Elementen betrifft. Dieser Fall tritt ein, wenn Sie eine Angabe für `left:` notieren und nicht angeben, wie breit der so definierte Bereich sein soll. Netscape erstreckt das Element maximal bis zum rechten Fensterrand/Seitenrand, während der MS Internet Explorer es über den rechten Rand hinausdehnt (der Anwender muß quer scrollen). Bei relativer Positionierung reagieren beide Browser so wie der MS Internet Explorer bei der absoluten Positionierung. Das Hinausdehnen hat den Grund, daß absolut oder relativ positionierte Elemente gewissermaßen ein eigenes, bildschirmunabhängiges Anzeigefenster darstellen. Wenn dem Browser nicht bekannt ist, wie groß dieses Anzeigefenster sein soll, übernimmt er einfach die Breite des Elternfensters. Bei einer Linksverschiebung führt das dann zu dem beschriebenen Effekt. Um den Effekt zu vermeiden, können Sie z.B. Angaben zur Breite (width) des absolut oder relativ positionierten Bereichs machen.

## Startposition von oben (top)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position). Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von oben beginnt.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="position:relative; top:100px;">
    <img src="grafik.gif">
    </div>

### Erläuterung:

Mit `top:` können Sie die Startposition von oben bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Positionierung.

## Startposition von links (left)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position). Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von links beginnt.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="position:relative; left:20%; top:30%;">Inhalt</div>

### Erläuterung:

Mit `left:` können Sie die Startposition von links bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Positionierung.

## Startposition von unten (bottom)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position). Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von unten beginnt.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <span style="position:absolute; bottom:100px;quot;>Inhalt</span>

### Erläuterung:

Mit `bottom:` können Sie die Startposition von unten bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Positionierung.

### Beachten Sie:

Netscape 4.0 und der MS Internet Explorer 4.0 ignorieren diese Angabe noch.

## Startposition von rechts (right)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position). Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von rechts beginnt.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="position:absolute; bottom:1cm; right:2cm;quot;>Inhalt</div>

Mit `right:` können Sie die Startposition von rechts bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Positionierung.

### Beachten Sie:

Netscape 4.0 und der MS Internet Explorer 4.0 ignorieren diese Angabe noch.

## Breite (width)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position), kann aber auch im normalen Fließtext verwendet werden. Sie können bestimmen, wie breit ein Element oder Bereich sein soll.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="position:absolute; top:10%; left:10%; width:80%;quot;>Inhalt</div>

### Erläuterung:

Mit `width:` können Sie die Breite eines Bereichs bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Bemessung der Breite.

## Mindestbreite (min-width)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position), kann aber auch im normalen Fließtext verwendet werden. Sie können bestimmen, wie breit ein Element oder Bereich auf jeden Fall sein soll, auch wenn der Inhalt weniger Breite in Anspruch nimmt. Die Angabe ist normalerweise identisch mit der Angabe `width`.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      div.Verweise { min-width:6cm }
    </style>

### Erläuterung:

Mit `min-width:` können Sie die Mindestbreite eines Bereichs erzwingen. Erlaubt ist eine numerische Angabe.

## Maximalbreite (max-width)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position), kann aber auch im normalen Fließtext verwendet werden. Sie können für ein Element oder einen Bereich bestimmen, daß dessen Breite einen bestimmten Wert nicht überschreitet, auch wenn der Inhalt mehr Breite in Anspruch nimmt. Überbreite Inhalte werden abgeschnitten.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      div.Infokasten { max-width:40% }
    </style>

### Erläuterung:

Mit `max-width:` können Sie die Maximalbreite eines Bereichs erzwingen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Weder Netscape 4.x noch der MS Internet Explorer 4.x interpretieren diese Angabe.

## Höhe (height)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position), kann aber auch im normalen Fließtext verwendet werden. Sie können bestimmen, wie hoch ein Element oder Bereich sein soll.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="height:200pxquot;>Inhalt</div>

### Erläuterung:

Mit `height:` können Sie die Höhe eines Bereichs bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Bemessung der Höhe.

### Beachten Sie:

Netscape 4.x interpretiert diese Angabe noch nicht.

## Mindesthöhe (min-height)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position), kann aber auch im normalen Fließtext verwendet werden. Sie können bestimmen, wie hoch ein Element oder Bereich auf jeden Fall sein soll, auch wenn der Inhalt weniger Höhe in Anspruch nimmt. Die Angabe ist normalerweise identisch mit der Angabe `height`.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      div.Zitat { min-height:2cm; vertical-align:middle; }
    </style>

### Erläuterung:

Mit `min-height:` können Sie die Mindesthöhe eines Bereichs erzwingen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Weder Netscape 4.x noch der MS Internet Explorer 4.x interpretieren diese Angabe.

## Maximalhöhe (max-height)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zur Positionierung (position), kann aber auch im normalen Fließtext verwendet werden. Sie können für ein Element oder einen Bereich bestimmen, daß dessen Höhe einen bestimmten Wert möglichst nicht überschreitet, auch wenn der Inhalt mehr Höhe in Anspruch nimmt.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      div.Infokasten { max-height:3.5cm; }
    </style>

### Erläuterung:

Mit `max-height:` können Sie die Maximalhöhe eines Bereichs erzwingen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Weder Netscape 4.x noch der MS Internet Explorer 4.x interpretieren diese Angabe.

## Elementbereich mit übergroßem Inhalt (overflow)

Anzeigebeispiel: So sieht's aus

Diese Angabe kann von Bedeutung sein, wenn Sie ein Element oder einen Bereich innerhalb eines anderen Bereichs definieren. Wenn das innere Element bzw. der innere Bereich größer ist als die erzwungenen Grenzen des übergeordneten Bereichs, können Sie bestimmen, wie dieser Konfliktfall gelöst werden soll. Angenommen, Sie definieren einen Bereich mit `<div>`...`</div>`, für den Sie mit Hilfe der Style-Sheet-Angabe `width` eine Mindestbreite von 300 Pixeln erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (`<img>`) notieren, bei der das Bild eine Breite von mehr als 300 Pixeln hat, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="position:absolute; top:100px; left:50px; width:300px; max-width:300px;">
    <img src="grafik.gif" width=450 height=250 style="overflow:visible">
    </div>

### Erläuterung:

Mit `overflow:` können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:

`visible` = übergeordneter Bereich wird so weit vergrößert, daß inneres Element sichtbar ist.
`hidden` = Element wird abgeschnitten, Größe des übergeordneten Bereichs bleibt erhalten.
`scroll` = Der WWW-Browser sollte Scroll-Leisten anbieten; Größe des übergeordneten Bereichs bleibt erhalten.
`auto` = Der WWW-Browser sollte bei Bedarf Scroll-Leisten anbieten; Größe des übergeordneten Bereichs bleibt erhalten.

### Beachten Sie:

Wenn Sie die Angabe `overflow:visible` verwenden, können Sie außerdem bestimmen, in welche Richtung das innere, übergroße Element das übergeordnete Element aufbrechen soll. Ferner können Sie ein inneres, übergroßes Element selbst eingrenzen

Weder Netscape 4.x noch der MS Internet Explorer 4.x interpretieren diese Angabe.

## Richtung (direction)

Anzeigebeispiel: So sieht's aus

Mit dieser Angabe können Sie die Anordnung von Elementen innerhalb eines Bereichs bestimmen. Wenn ein übergroßes Element einen Bereich aufbrechen soll, können Sie bestimmen, in welcher Richtung.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      div.spezial { direction:rtl }
    </style>

### Erläuterung:

Mit `direction:` können Sie die Anordnung von Elementen innerhalb eines Bereichs bestimmen. Folgende Angaben sind möglich:

`ltr` = left to right (von links nach rechts) - Normaleinstellung.
`rtl` = right to left (von rechts nach links).
`ltr-override` = in CSS 2.0-Spezifikation noch unklar.
`rtl-override` = in CSS 2.0-Spezifikation noch unklar.

## Textumfluß (float)

Anzeigebeispiel: So sieht's aus

Sie können für einen Bereich oder ein Element bestimmen, daß nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="float:left; width:100px;">Kurztext</div>
    <p>Langer Text, der rechts um den Kurztext flie&szlig;t</p>
    <div style="float:right; width:2cm;">Kurztext</div>
    <p>Langer Text, der links um den Kurztext flie&szlig;t</p>

### Erläuterung:

Mit `float:` können Sie bestimmen, daß nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:

`left` = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
`right` = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
`none` = Kein Umfluß (Normaleinstellung).

### Beachten Sie:

Damit die Angabe bei Netscape und im Internet Explorer funktioniert, müssen Sie zumindest noch eine Angabe zu `width:` notieren, so wie in den obigen Beispielen.

## Fortsetzung bei Textumfluß (clear)

Anzeigebeispiel: So sieht's aus

Wenn Sie einen Textumfluß definieren, möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="float:left; width:300px;">
    <img src="grafik.gif">
    </div>
    <p>Text, der rechts um die Grafik flie&szlig;t</p>
    <p style="clear:left">Neuer Text unterhalb der Grafik</p>

### Erläuterung:

Mit `clear:` können Sie einen Umfluß abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind möglich:

`left` = Erzwingt bei `float:left` die Fortsetzung unterhalb.
`right` = Erzwingt bei `float:right` die Fortsetzung unterhalb.
`both` = Erzwingt in jedem Fall die Fortsetzung unterhalb.
`none` = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).

## Schichtposition bei Überlappung (z-index)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist sinnvoll in Verbindung mit mehreren Angaben zur Positionierung (position). Wenn Sie mehrere Elemente absolut positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Nummern vergeben. Elemente mit höherer Nummer überdecken Elemente mit niedrigerer Nummer.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="position:absolute; top:10mm; left:10mm; z-index:1">
    Dieser Text kommt als dritter
    </div>
    <div style="position:absolute; top:12mm; left:20mm; z-index:3">
    Dieser Text kommt als erster
    </div>
    <div style="position:absolute; top:14mm; left:30mm; z-index:2">
    Dieser Text kommt als zweiter
    </div>

### Erläuterung:

Mit `z-index:` können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne das Element, je niedriger, desto weiter hinten das Element.

## Anzeigeart bzw. Nichtanzeige ohne Platzhalter - (display)

Anzeigebeispiel: So sieht's aus

Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Ohne Platzhalter" bedeutet, daß bei Nichtanzeige des Elements auch kein Raum für das Element reserviert wird. In diesem Fall deutet bei der Anzeige also zunächst nichts darauf hin, daß das Element überhaupt existiert. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.

Ferner können Sie mit der hier beschriebenen Angabe bestimmen, wie ein Element angezeigt werden soll. Sie können bestimmen, daß es einen eigenen (absatzerzeugenden) Block bilden soll, oder daß es mitten im Text angezeigt werden soll. So können Sie beispielsweise absatzerzeugende Elemente wie Überschriften in Elemente umdefinieren, die keinen eigenen Absatz erzeugen.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p id="DynamischerAbsatz" style="display:none">Inhalt</p>
    Text <h1 style="display:inline">&Uuml;berschrift 1. Ordnung</h1> Text

### Erläuterung:

Mit `display:` können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Folgende Angaben sind möglich:

`block` = Erzwingt einen Block - das Element erzeugt einen eigenen Absatz.
`inline` = Erzwingt die Anzeige im Text - das Element erzeugt keinen eigenen Absatz.
`list-item` = wie `block`, jedoch mit einem Aufzählungszeichen (Bullet) davor.
`run-in` = in CSS 2.0-Spezifikation noch unklar.
`compact` = in CSS 2.0-Spezifikation noch unklar.
`none` = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

### Beachten Sie:

Netscape 4.0 und der MS Internet Explorer 4.0 interpretieren die Angabe `display:none` korrekt. Die übrigen Angaben werden von den 4eer-Versionen der beiden Browser jedoch nur unvollständig oder noch gar nicht interpretiert.

## Anzeige bzw. Nichtanzeige mit Platzhalter - (visibility)

Anzeigebeispiel: So sieht's aus

Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Mit Platzhalter" bedeutet, daß bei Nichtanzeige des Elements trotzdem Raum für das Element reserviert wird. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      #Text1 { position:absolute; top:100px; left:50px; width:200px; visibility:visible; }
      #Text2 { position:absolute; top:100px; left:50px; width:200px; visibility:hidden; }
      #Text3 { position:absolute; top:100px; left:50px; width:200px; visibility:hidden; }
    </style>
    <!-- und innerhalb von <body>...</body>: -->
    <div id="Text1">Das ist Text 1</div>
    <div id="Text2">Das ist Text 2</div>
    <div id="Text3">Das ist Text 3</div>

### Erläuterung:

Mit `visibility:` können Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht. Im obigen Beispiel wird zunächst nur Text 1 angezeigt. Mit Hilfe von Dynamischem HTML können Sie diesen Text dann z.B. beim Anklicken dynamisch durch Text 2 und weiter durch Text 3 ersetzen. Folgende Angaben sind möglich:

`hidden` = Der Inhalt des Element wird zunächst versteckt (nicht angezeigt).
`visible` = Der Inhalt des Element wird zunächst angezeigt (Normaleinstellung).

## Anzeigebereich eingrenzen - (clip)

Anzeigebeispiel: So sieht's aus

Sie können bestimmen, daß nur ein Ausschnitt eines absolut positionierten Elements sichtbar angezeigt wird, unabhängig davon, welche Angaben sonst zur Größe des Elements gemacht wurden und unabhängig von der automatischen Größe des Elements. Wenn das Element größer ist als so definierte Anzeigebereich, wird es an den Seiten entsprechend abgeschnitten. Derzeit können Sie nur ein Rechteck für den Ausschnitt definieren. In Zukunft sollen jedoch auch Polygone, Kreise bzw. Ellipsen möglich sein.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="clip:rect(50px 120px 150px auto)">Inhalt</div>

### Erläuterung:

Mit `clip:` können Sie einen Ausschnitt für die sichtbare Anzeige definieren. Dahinter folgt der Bezeichner `rect` (für rectangle, = Rechteck), und dahinter, in runde Klammern eingeschlossen, vier numerische Werte oder das Schlüsselwort `auto` zur Bestimmung des Ausschnitts.
Der erste der vier Werte bezeichnet den Wert für "oben", gemessen an der oberen Elementgrenze
Der zweite der vier Werte bezeichnet den Wert für "rechts", gemessen an der linken Elementgrenze
Der dritte der vier Werte bezeichnet den Wert für "unten", gemessen an der oberen Elementgrenze
Der vierte der vier Werte bezeichnet den Wert für "links", gemessen an der linken Elementgrenze

Damit überhaupt ein Ausschnitt sichtbar ist, muß der Wert für "unten" größer sein als der für "oben" und der Wert für "rechts" größer als der für "links". Das Schlüsselwort `auto` bedeutet: keine Angabe zu dem betreffenden Wert, das Element soll an der entsprechenden Seite bis zu seiner Elementgrenze angezeigt werden.

weiter: | Style-Sheet-Angaben: Mehrspaltiger Textfluß
zurück: | Style-Sheet-Angaben: Pseudo-Formate

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com