Floating
Clearen
Positionieren
Mit StyleSheets gibt es eine elegante Möglichkeit, Text nebeneinander zu platzieren -
wie z.B. die Themen-Felder oberhalb.
Jedes dieser Themen-Felder trägt das CSS-Attribut float:left, welches bewirkt,
daß das nachfolgende Element rechts davon angeordnet wird, solange noch Platz in der Zeile ist.
float:left
float:right
Die beiden Textfelder links und rechts sind mit dem Attribut float:right
bzw. float:right definiert - der nachfolgende Text ohne Attribut steht dann dazwischen.
clear:left|right|both
Soll ein Text gezielt unterhalb eines Floating-Elements stehen,
so erhält dieser das Attribut clear:left clear:rigth bzw.
clear:both, wie z.B. der nachfolgende Text.
Mit width: margin: und padding:
läßt sich die Breite des Textfeldes bestimmen.
Bei entspechender Definition läßt sich so auch Fließtext in Spalten nebeneinander anordnen,
ohne daß man dafür eine Tabelle braucht.
Bei entsprechender Anordnung bleibt der Text auch dann sinnvoll lesbar, wenn die CSS-StyleSheets vom Browser nicht interpretiert werden - die Texte stehen dann eben untereinander.
Positionierung
Mit dem Attribut position:
und den Positionsbeschreibungen in den Attributen
top:, left:, bottom:, right:
läßt sich ein Element gezielt positionieren.
Die Größe des Elements muß dabei mit dem Attribut width: festgelegt sein.
(Die Definition des Falters steht hier!)
Position:absolute
Mit position:absolute bestimmt man den Ort der Darstellung eines Elementes
im Bezug auf das Browser-Fenster - "darunterliegende" Elemente werden dabei überdeckt.
Wird die Darstellungsgröße verändert, so paßt die Postition unter Umständen nicht mehr so recht.
(Die Definition des Falters steht hier!)
Position:relative
Mit position:relative bestimmt man den Ort der Darstellung eines Elementes
im Bezug auf seinen durch die Anordnung im HTML-Dokument bestimmten Platz.
Man bestimmt also einen "offset" - der ursprüngliche Platz bleibt leer erhalten.
Durch entspechende Schachtelung
kann man Elemente auch relativ zu anderen Elementen positionieren.
Dabei ist das "äußere" Element "relative" (ohne offset) zu deklarieren -
das "innere" Element erhält dann das Attribut position:absolute
und die entsprechenden Positions-Angaben relativ zum "äußeren" Element.
Auf diese Weise "flattert" der Schmetterling rechts aus der Box.
<p style="position:relative">
<img src="Falter.gif"
style="position:absolute;
top:5em; left:-6em;"/>
{
(Die Definition des Falters steht hier!)
</p>
Summary
Insgesamt ist die Positionierung mit float:, clear: und position:
sehr gut dazu geeignet, Text und Bilder nebeneinander anzuordnen, ohne dazu mühsam eine Tabelle definieren zu müssen.
Allerdings sollte man bei der Definition der Elemente trotzdem auf eine sinnvolle (lesbare) Reihenfolge achten -
für eine Darstellung ohne CSS, wie sie z.B. für Blinde notwendig ist.