1. Einfaches Positionieren
In älteren Browsern war es nicht möglich Elemente unabhängig voneinander zu positionieren, jedes Element nahm den Platz ein, der sich durch den Dokument-Fluss ergeben hat. Wollte man Objekte exakt im Browser-Fenster positionieren blieb einem nichts anderes übrig als kunstvolle Tabellen zu bauen, die mittels des berühmten unsichtbaren 1x1-Pixel-Gifs auf exakte Grössen gebracht wurden.
Erster Schritt aus dieser Misere war der Layer in Netscape 4, dessen Inhalt ein vom übrigen Dokument unabhängiges Dokument definiert und welcher per Koordinaten exakt im Browser-Fenster plaziert werden kann.
Leider war die Einführung des layer-Tags in keiner Weise ein anerkannter Standard und Microsoft hatte natürlich bald darauf seine eigene Version Elemente zu positionieren, ebenso wenig auf Standards aufbauend wie Netscape.
Dennoch war der Ansatz von Micosoft der bessere und anerkanntere und die Spezifikationen des W3C zum heutigen Cascading Style Sheets Positioning folgen diesem Ansatz.
Cascading Style Sheets Positioning heisst: jedem Element, also Tag, kann per CSS eine Position zugewiesen werden, entweder absolut, also in bezug zur linken oberen Browser-Fenster-Ecke, oder relativ, d.h. relativ zu der Position die das Element im normalen Dokument-Fluss eingenommen hätte.
Leider ist Netscape in seiner Version 4 dem nicht vollständig gefolgt und man kann im wesentlichen nur span- oder div-tags per CSSP positionieren. Wollen wir also crossbrowser-konform programmieren, müssen wir Elemente in diese Tags packen, und anstatt der Elemente selbst, diese Container positionieren.
Welche Angaben dabei sonst noch möglich sind, kann man schön unter Style-Sheet-Angaben: Elemente positionieren in SELFHTML nachlesen.
Relatives Positionieren
Zum relativen Positionieren nehmen wir den span tag, da der div tag einen hier nicht erwünschten eigenen Absatz erzeugt.
Beispiel
Quellcode:
<html>
<body>
Text und dazwischen ein
<span style="position:relative;left:0px;top:5px;">relativ</span>
positionierter span.
</body>
</html>
|
Absolutes Positionieren
Um Objekte absolut zu positionieren packen wir sie in einen div tag und positionieren diesen, was auch für NS4 klaglos funktioniert.
Beispiel
Quellcode:
<html>
<head>
<style type="text/css">
<!--
#L1 {
z-Index:2;
position:absolute;
left:110px;top:110px;width:20px;height:20px;
background-color:#FF0000;layer-background-color:#FF0000;
border:none;}
#L2{
z-Index:1;
position:absolute;
left:20px;top:20px;width:200px;height:200px;
background-color:#0000FF;layer-background-color:#0000FF;
border:none;}
//-->
</style>
</head>
<body>
<div id="L1"></div>
<div id="L2"></div>
</body>
</html>
|
Ein paar Bemerkungen: Ich werde absolut positionierte div-Tags in Folge in Anlehnung an den Netscape Tag Layer nennen. In Netscape 4 werden diese Tags in das Layer-Array aufgenommen und können dort auch als solche behandelt werden.
Man kann Layer übereinanderlegen, wobei immer der zuerst definierte (in der Source-Code-Abfolge) der unterste ist. Will man das ändern kann man einen sogenannten z-Index angeben, der die Schichtung steuert: je höher der Index, desto weiter im Vordergrund ist der Layer.
Da für Netscape 4 ein absolut positionierter div-tag nichts anderes ist als ein Layer, ist auch die Syntax etwa für die Hintergrundfarbe für NS4 eine andere. Da jeder Browser aber ihm unbekannte Statements ignoriert, kann man einfach beide hinschreiben.
Noch eine Eigenart von Netscape 4: ein leerer div tag wäre für NS4 trotz Hintergrundfarbe und Höhen- und Breitenangabe nicht sichtbar, gäbe man nicht das "border:none" statement an.
Möchte man nun einen Layer relativ im Dokument anlegen und ihn aber nach dem Laden des Dokuments bewegen, so ist das für Netscape 4 nicht möglich, da man zu diesem Zeitpunkt nur noch Layer bewegen kann und relativ positionierte tags nicht im Layer-Array angelegt werden. Einen Ausweg gibt das von mir so genannte Fortgeschrittene Positionieren im nächsten Kapitel.
|
