Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de
Cascading Style Sheets, level 2
11. Positionierung II und Cursoreinstellungen
Haben Sie mit float: einen Textumfluss definiert und
möchten aber nur zwei oder drei Zeilen kommentierenden Text neben
einer Grafik angeben und den folgenden Text dann unterhalb der
Grafik fortsetzen, können Sie dazu clear: verwenden.
Listing 37:
<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>
Mögliche Angaben sind: left (= bei float:left erfolgt die
Fortsetzung unterhalb), right (= bei float:right erfolgt die
Fortsetzung unterhalb), both (= Fall??? die Fortsetzung erfolgt in
jedem Fall unterhalb) und none (= es erfolgt keine Fortsetzung
unterhalb).
Absolute Freiheit durch absolute Positionierung
<div style="position:absolute; top:10mm;
left:10mm; z-index:1">
Dieser Text wird als dritter dargestellt.
</div>
<div style="position:absolute; top:12mm; left:20mm; z-index:2">
Dieser Text wird als zweiter dargestellt.
</div>
<div style="position:absolute; top:14mm; left:30mm; z-index:1">
Dieser Text wird als erster dargestellt.
</div>
Mit z-index: können Sie die Reihenfolge von sich überlappenden
Elementen bestimmen. Notieren Sie für jedes Element, für das Sie
eine eindeutige Schichtposition festlegen wollen, eine Zahl.
Elemente mit höherer Nummer überdecken Elemente mit niedrigerer
Nummer.
Listing 38:
<style type="text/css">
#Text1 { position:absolute; top:10px; left:10px; width:200px;
visibility:visible; }
#Text2 { position:absolute; top:10px; left:10px; width:200px;
visibility:hidden; }
#Text3 { position:absolute; top:10px; left:10px; width:200px;
visibility:hidden; }
</style>
...
<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: bestimmen Sie, ob ein Element angezeigt wird oder
nicht. Im Listing 39 wird zunächst nur Text 1 angezeigt. Mit Hilfe
von Dynamischem HTML können Sie diesen Text später dynamisch durch
Text 2 oder durch Text 3 ersetzen. Mögliche Angaben sind: hidden (=
Der Inhalt des Elements wird zunächst nicht angezeigt) und visible
(= Der Inhalt des Elements wird angezeigt).
Mit display: können Sie die Art der Anzeige festlegen.
Listing 39:
<p id="DynamischerAbsatz" style="display:none">Inhalt</p>
ein Text <h1 style="display:inline">Überschrift</h1>
noch ein Text
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) und none (= Element wird nicht angezeigt und es wird auch
kein Platzhalter freigelassen). Insbesondere im Zusammenhang mit
visibility: und DHTML können Sie interessante Effekte erzeugen.
"Ohne Platzhalter" bedeutet, dass 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, dass das Element
überhaupt existiert. Mit Hilfe von DHTML können Sie ein solches
Element nachträglich sichtbar machen und auch wieder verstecken.
Mit clip: definieren Sie einen Ausschnitt für die sichtbare Anzeige,
unabhängig davon, welche Angaben sonst zur Größe des Elements
gemacht wurden und unabhängig von der automatischen Größe des
Elements.
Listing 40:
<style type="text/css">
div.a1 { clip:rect(50px 120px 150px auto); }
</style>
Wenn das Element größer ist als der so definierte Anzeigebereich,
wird es an den Seiten entsprechend abgeschnitten. Derzeit steht nur
rect für rectangle (= Rechteck) zur Verfügung. Später sollen auch
Kreise, Ellipsen und Polygone möglich sein. Hinter rect, in runden
Klammern eingeschlossen, folgen vier numerische Werte oder
alternativ das Schlüsselwort auto zur Bestimmung des Ausschnitts.
Die erste Angabe bezeichnet den Wert für "oben", gemessen von der
oberen Elementgrenze, die zweite Angabe den Wert für "rechts", die
dritte Angabe den Wert für "unten" und die vierte Angabe den Wert
für "links". Bei auto soll das Element an der entsprechenden Seite
bis zu seiner Elementgrenze angezeigt werden.
Cursoreinstellungen
Das Aussehen des Mauszeigers lässt sich ebenfalls mit Hilfe von CSS
einstellen:
<p style="cursor:hand; color:blue" onClick="window.location.href='datei2.htm'">ein
nicht unterstrichener Verweis</p>
Weitere Möglichkeiten für den Mauszeiger:
auto automatischer Cursor
(Normaleinstellung).
default Plattformunabhängiger
Standard-Cursor.
crosshair Cursor in Form eines
einfachen Fadankreuzes.
pointer Cursor in Form eines Zeigers.
move Cursor in Form eines Kreuzes, das
die Fähigkeit zum Bewegen des Elements signalisiert.
n-resize Cursor in Form eines Pfeils,
der nach oben zeigt (Norden).
ne-resize Cursor in Form eines Pfeils,
der nach rechts oben zeigt (Nordosten).
e-resize Cursor in Form eines Pfeils,
der nach rechts zeigt (Osten).
se-resize Cursor in Form eines Pfeils,
der nach rechts unten zeigt (Südosten).
s-resize Cursor in Form eines Pfeils,
der nach unten zeigt (Süden).
sw-resize Cursor in Form eines Pfeils,
der nach links unten zeigt (Südwest).
w-resize Cursor in Form eines Pfeils,
der nach links zeigt (Westen).
nw-resize Cursor in Form eines Pfeils,
der nach links oben zeigt (Nordwest).
text Cursor in einer Form, die normalen
Text symbolisiert.
wait Cursor in Form eines Symbols, das
einen Wartezustand signalisiert.
help Cursor in Form Symbols, das Hilfe
zu dem Element signalisiert.
url([Datei]) Beliebiger Cursor, [Datei]
sollte eine GIF- oder JPG-Grafik sein.
|
bezahlte Bannerwerbung:
|
|
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde
