SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
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.
<div style="position:absolute; top:100px; left:45px; width:300px">Inhalt</div> |
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.
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.
<div style="position:relative; top:100px;"> <img src="grafik.gif"> </div> |
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.
<div style="position:relative; left:20%; top:30%;">Inhalt</div> |
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.
<span style="position:absolute; bottom:100px;quot;>Inhalt</span> |
Mit bottom: können Sie die Startposition von unten bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung.
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.
<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.
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.
<div style="position:absolute; top:10%; left:10%; width:80%;quot;>Inhalt</div> |
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.
<style type="text/css">
div.Verweise { min-width:6cm }
</style>
|
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.
<style type="text/css">
div.Infokasten { max-width:40% }
</style>
|
Mit max-width: können Sie die Maximalbreite eines Bereichs erzwingen. Erlaubt ist eine numerische Angabe.
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.
<div style="height:200pxquot;>Inhalt</div> |
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.
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.
<style type="text/css">
div.Zitat { min-height:2cm; vertical-align:middle; }
</style>
|
Mit min-height: können Sie die Mindesthöhe eines Bereichs erzwingen. Erlaubt ist eine numerische Angabe.
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.
<style type="text/css">
div.Infokasten { max-height:3.5cm; }
</style>
|
Mit max-height: können Sie die Maximalhöhe eines Bereichs erzwingen. Erlaubt ist eine numerische Angabe.
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.
<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> |
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.
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.
<style type="text/css">
div.spezial { direction:rtl }
</style>
|
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.
<div style="float:left; width:100px;">Kurztext</div> <p>Langer Text, der rechts um den Kurztext fließt</p> <div style="float:right; width:2cm;">Kurztext</div> <p>Langer Text, der links um den Kurztext fließt</p> |
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).
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.
<div style="float:left; width:300px;"> <img src="grafik.gif"> </div> <p>Text, der rechts um die Grafik fließt</p> <p style="clear:left">Neuer Text unterhalb der Grafik</p> |
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.
<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> |
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.
<p id="DynamischerAbsatz" style="display:none">Inhalt</p> Text <h1 style="display:inline">Überschrift 1. Ordnung</h1> Text |
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.
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.
<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>
|
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.
<div style="clip:rect(50px 120px 150px auto)">Inhalt</div> |
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
|
