Frage stellen
Positonierung mit 'position'
Die bisher besprochenen Eigenschaften dienen hauptsächlich der Formatierung von Elementen und nicht der Positionierung (mit Ausnahme des Boxenmodells, welches einfache Positionierungen zuläßt). Dieser Teil des CSS-Kurses versucht auch die Positionierung mit CSS zu erläutern. Wer bisher mit Tabellen zur Positionierung von Elementen gearbeitet hat, muß hier umdenken. CSS kann Pixelgenau positionieren, kennt aber nicht die Struktur eines "unsichtbaren Musters" welchen dem Layout wie bei einer Tabelle zugrundeliegt. Die Art von CSS zu positionieren läßt sich eher mit einem "verschieben" von Elementen an ihren Platz gedanklich nachvollziehen.
Position
Die wichtigste Art der Positionierung erfolgt in CSS mit einer Kombination einiger Eigenschaften: position bestimmt die Art der Positionierung und kann die Werte: absolute (absolut zum Browerfenster), relative (relativ zur Position die das Element eigentlich einnehmen würde), fixed (wie absolute, aber nicht scrollbar, sozusagen am seinem Punkt bleibend) und static (normal, Voreinstellung). Diese Angaben wird mit folgenden Angaben kombiniert: top (Abstand von Oben), left (Abstand von links), bottom (Abstand von unten) und right (Abstand von rechts). Als Wert für diese Angaben muß ein nummerischer Wert mit einem der in CSS verwendeten Maßeinheiten angegeben werden. Es muß dabei keineswegs (und wird auch meistens nicht) alle 4 Positionierungsangaben gemacht werden. Sinnvolle Kombinationen können z. B. sein top und left oder top und right. Netscape 4 versteht allerdings nur die Angaben top und left. Die Positionierungsart fixed wird weder von Netscape 4 noch vom Internet Explorer bis einschließlich 6.0 verstanden. Das folgende Beispiel verwendet genau den Code mit dem auch das Menü auf dieser Seite positioniert wurde:
#menu { position:absolute; top:120px; left:10px; }
Das Element mit der ID: menu wird also vom Fensterrand aus gesehen an folgender Stelle absolut poitioniert: von oben 120 Pixel und von links 10 Pixel. Netscape 4 und zum Teil auch der Internet Explorer interpretieren absolute Positionierungen nicht für alle HTML-Elemente. Es empfiehlt sich daher solche Positionierungen vor allem auf das div-Element anzuwenden und andere Elemente in entsprechende div-Tags zu schachteln. Vom Internet Explorer werden die Angaben top und left seit Version 4.0 und die Angaben bottom und right seit Version 5.0 verstanden.
Breite
Vor allem wenn Elemente nebeneinander positioniert werden sollen, muß auch ihre Breite kontrolliert werden können um Überlappungen zu vermeiden. Dazu dient die CSS-Eigenschaft width. Als Wert muß eine nummerische Maßangabe zugewiesen werden. Wer den oben angegeben Code zu der Positionierung des Menüs mit dem tatsächlichen in der CSS-Datei dieser Website verglichen hat wird festgestellt haben, daß er nicht ganz vollständig war. Eine Breitenangabe gehört auch noch hinzu:
#menu { position:absolute; top:120px; left:10px; width:170px; }
Breitenangaben können auch Relativ in Prozent bezogen auf die Breite des Elternelementes sein.
Höhe
Ebenso wie für die Breite gibt es auch für die Höhe von Elementen eine CSS-Eigenschaft, die sich height nennt und ebenfalls eine nummerische Maßangabe erwartet. Bedenken Sie dabei: Wenn sie für ein Element sowohl die Breite als auch die Höhe festlegen, kann das Problem enstehen, das der Elementinhalt zu groß für die Anzeige wird. Damit der Browser weiß wie er mit diesem Konflikt umgehen soll, gibt es noch die CSS-Eigenschaft overflow. Dieser lassen sich folgende Werte zuweisen: visible (Inhalt wird in jedem Fall angezeigt), hidden (Inhalt wird abgeschnitten), scroll (Element wird abgeschnitten, es wird jedoch eine Scrollleiste angeboten) und auto (der Browser wählt das Verfahren selbst). Netscape 4 interpretiert diese Eigenschaft nicht (interpretiert aber sowohl width, wie auch height). Ein vollständiges Beispiel:
div.box { position:absolute; top:200px; left:35px; width:10em; height:8em; overflow:scroll; }
Textumfluß
Ein Element kann auch von umgebenden Text umfloßen werden. Damit lassen sich sehr schöne Effekte als Textkästen in Zusammenhang mit Hintergrundfarben, Innenabständen und Rahmen erreichen. Auch auf Bilder die von Text umfloßen werden sollen läßt sich diese Eigenschaft anwenden. Die entsprechende Eigenschaft heißt: float. Als Wert muß die Richtung des Umflußes angegeben werden: left (Element steht links, andere Elemente fließen rechts vorbei) und right (Element steht rechts, andere Elemente fließen links vorbei). Diese Angabe sollte unbedingt mit einer Breitenangabe kombiniert werden. Ein Beispiel:
div.textkasten { float:right; width:10em; margin-right:1em; margin-bottom:0.8em; background-color:#003300; padding:10px; }
Obige Angabe bewirkt einen Kasten der rechts steht und links von anderen Text umfloßen wird. Der Kasten erhält eine andere Farbe, Innenabstand, sowie entsprechenden Abstand zum anderen Fließtext. Netscape 4 interpretiert zwar die Angabe float hat aber in vielen Fällen deutliche Probleme mit der Darstellung. Eine saubere Darstellung von float ist mir im Netscape 4 bislang nur in Zusammenhang mit Bildern gelungen, also wenn float direkt auf das img-Element angewandt wird.
Unterbrechung von Textumfluß
Sollen Elemente keinesfalls mehr an einem Textumfluß beteiligt sein, sondern in jedem Fall unterhalb des umflossenen Elementes stehen, so kann die CSS-Eigenschaft clear verwendet werden. Mögliche Werte für clear können sein: right (unterbricht rechten Umfluß), left (unterbricht linken Umfluß) und both (unterbricht beide Umflüße). Ein Beispiel:
<p style="clear:both;">Dieser Absatz steht in jedem Fall unter einem eventuellen Umfluß.</p>
Es gibt darüber hinaus noch einige weitere CSS-Eigenschaften in Zusammenhang mit der Positionierung, aber ich habe mich hier auf die wichtigsten beschränkt.