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


Style-Sheet-Angaben: Elemente positionieren

Diese Seite ist ein Dokument mit Informationstext

 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.

 

CSS2.0MS IE4.0Netscape 4.0 Positionsart (position)

Beispiel 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.

 

CSS2.0MS IE4.0Netscape 4.0 Startposition von oben (top)

Beispiel 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.

 

CSS2.0MS IE4.0Netscape 4.0 Startposition von links (left)

Beispiel 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.

 

CSS2.0 Startposition von unten (bottom)

Beispiel 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.

 

CSS2.0 Startposition von rechts (right)

Beispiel 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.

 

CSS2.0MS IE4.0Netscape 4.0 Breite (width)

Beispiel 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.

 

CSS2.0MS IE4.0Netscape 4.0 Mindestbreite (min-width)

Beispiel 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.

 

CSS2.0 Maximalbreite (max-width)

Beispiel 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.

 

CSS2.0MS IE4.0 Höhe (height)

Beispiel 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.

 

CSS2.0 Mindesthöhe (min-height)

Beispiel 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.

 

CSS2.0 Maximalhöhe (max-height)

Beispiel 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.

 

CSS2.0 Elementbereich mit übergroßem Inhalt (overflow)

Beispiel 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.

 

CSS2.0 Richtung (direction)

Beispiel 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.

 

CSS2.0Netscape4.0MS IE4.0 Textumfluß (float)

Beispiel 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.

 

CSS2.0MS IE4.0Netscape 4.0 Fortsetzung bei Textumfluß (clear)

Beispiel 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).

 

CSS2.0MS IE4.0Netscape 4.0 Schichtposition bei Überlappung (z-index)

Beispiel 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.

 

CSS2.0MS IE4.0Netscape 4.0 Anzeigeart bzw. Nichtanzeige ohne Platzhalter - (display)

Beispiel 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.

 

CSS2.0MS IE4.0 Anzeige bzw. Nichtanzeige mit Platzhalter - (visibility)

Beispiel 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).

 

CSS2.0MS IE4.0Netscape 4.0 Anzeigebereich eingrenzen - (clip)

Beispiel 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