Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de
Cascading Style Sheets, level 2
10. Positionierung I
Die Gestaltungsmöglichkeiten der bisher beschriebenen Style Sheet-Befehle geben dem Web-Autor bereits viel Freiheit bei der Umsetzung seiner Ideen.
Die Wundertüte CSS ist
damit allerdings noch nicht erschöpft. Mit den im Folgenden
beschriebenen Style Sheets zur absoluten, punktgenauen
Positionierung eröffnen sich völlig neue, bisher ungeahnte
Perspektiven. Elemente erscheinen im Browser nicht mehr zwingend
brav unter- oder nebeneinander, sondern an jeder beliebigen Stelle,
ganz so, wie Sie es befehlen. Dabei sind Sie auch in der Anordnung
der Elemente innerhalb der HTML-Datei frei. Im Textkörper an erster
Stelle angegebene Elemente können im Browser durchaus zuunterst
erscheinen. Elemente dürfen sich bei der Anzeige sogar überlappen,
wobei Sie die Schichtreihenfolge festlegen.
Für viele Anwendungsfälle von Dynamischem HTML ist das Positionieren
von Elementen eine wichtige Voraussetzung. Mit Hilfe entsprechender
Script-Unterstützung können Sie positionierte Elemente bewegen,
ein-/ausblenden, anders überlappen und so weiter.
Listing 31:
<style type="text/css">
div.a1 { position:absolute; top:100px; left:45px; width:300px; }
</style>
Mit position: bestimmen Sie für einen Bereich, ob dieser absolut
oder relativ positioniert werden soll. Gültige Werte sind: 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) und static (= keine spezielle Positionierung,
normaler Elementfluss, Voreinstellung). Die Angabe position: alleine
legt noch nicht fest, wo genau ein Element beginnen soll. Sie macht
nur im Zusammenhang mit einer Startposition Sinn.
Mit top: definieren Sie die Startposition, von der aus ein absolut
oder relativ positioniertes Element von oben beginnt.
Listing 32:
<style type="text/css">
div.a1 { position:relative; top:100px; }
</style>
Gültige Angaben sind numerische Werte oder auto für eine
automatische Positionierung. Analog dazu funktionieren die Style
Sheet-Formate bottom: für eine Positionierung von unten, left: für
eine Positionierung von links und right: für eine Positionierung von
rechts.
Mit width: können Sie bestimmen, wie breit ein Element oder Bereich
sein soll.
Listing 33:
<style type="text/css">
div.a1 { position:absolute; left:10%; width:80%; }
</style>
Erlaubt ist eine numerische Angabe oder der Wert auto für eine
automatische Bemessung der Breite. Analog dazu geben Sie height für
die Höhe eines Elements an.
Die Angabe min-width: bestimmt, wie breit ein Element oder Bereich
auf jeden Fall sein soll, auch wenn der Inhalt weniger Breite in
Anspruch nimmt.
Listing 34:
<style type="text/css">
div.a1 { min-width:300px; }
</style>
Zulässig ist ein numerischer Wert. Die Angabe min-height: legt
analog dazu die Mindesthöhe eines Bereiches fest.
Mit max-width: bestimmen Sie für ein Element oder einen Bereich,
dass dessen Breite einen bestimmten Wert nicht überschreitet, auch
wenn der Inhalt mehr Breite in Anspruch nimmt.
Listing 35:
<style type="text/css">
div.a1 { max-width:6cm; }
</style>
Überbreite Inhalte werden abgeschnitten. Zulässige sind numerische
Werte. Die Angabe max-height: begrenzt die Höhe eines Bereiches auf
eine maximale Ausdehnung. Mit float: definieren Sie, wie
nachfolgende Elemente das aktuelle Element, beziehungsweise den
aktuellen Bereich, umfließen.
Listing 36:
<style type="text/css">
img { float:right; width:2cm; }
</style>
Mögliche Angaben sind: 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 Umfluss, Voreinstellung). Verwenden sie float: zusammen
mit width:, damit Nestscape oder der MS Internet Explorer diese
Angabe korrekt interpretieren.
|
bezahlte Bannerwerbung:
|
|
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde
