nicht angemeldet
Hallo Christian,
ein kurzer Test: OP6 zeigt die Seite korrekt an fixiert die Kopfleiste aber nicht. Bei IE6 gerät einiges durcheinander. Kopfleiste und Inhalt rutschen ineinander. Da ist also noch einiges im argen.
Die Sache mit der css-Positioniererei ist am Anfang ziemlich frustrierend. Das liegt zum einen daran, daß selbst die aktuellen Browser die css-Eigenschaften sehr uneinheitlich interpretieren,
zum anderen daran daß, bei der Positionierung eine css-Angabe nicht für sich allein funktioniert sondern im Zusammenspiel mit Angaben im Eltern- Kinder- oder im eigenen Element.
Hier ein paar allgemeine Tipps: (ohne Anspruch auf Vollständigkeit)
----
-Browser:
NN6, Moz: konform
OP5/6, IE6: ziemlich konform
IE5: halbwegs konform
NN4: reine Glückssache
-position:
bei 'postition:' spielt die Definition der Eigenschaften 'float:' und 'clear:' im Elternelement und den Geschwisterelementen. Je nach Eigenschaft müssen ausserdem Angaben zu top, left oder width dazu.
Die Beschreibung in Self ist da ganz gut und nach ein paar mal lesen und ein wenig experiementieren werden die Zusammenhänge dann klarer.
Mach dir auch den Unterschied zwischen block- und inline-Elementen nochmal klar.
Am einfachsten machst du es dir, wenn du dich auf der ganzen Seite für eine Positionierungsart entscheidest. Möchtest du mischen, dann empfiehlt es sich verschiedene Positionierungsarten in einem "neutralen" div zu kapslen um Nebeneffekte zu vermeiden.
-margin: & padding:
Wie im Forum schon mehrfach erwähnt tanzt hier IE5/5.5 aus der Reihe weil er die Angaben zu padding nicht standardkonform interpretiert und damit ganz gern mal das gesamt Layout zerschießt.
Am besten verteilt man auch hier die Angaben zu Breite einerseits und den Rändern andererseits auf zwei verschachtelte div und vermeide es padding und margin gleichzeitig zu setzen.
Beispiel:
<div style="width:200px; padding:0px; margin:0px;">
<!-- Aussen: festlegen von Größe, Position und Fluss --//>
<div style="padding:20px; margin:0px;">
<!-- Innen: festlegen von Anständen und Rändern --//>
Inhalt
</div>
</div>
----
Natürlich kann man das ganze auch anders machen, aber so vermeidest du nach meiner Erfahrung viele typische css-Problemchen.
Viel Geduld und Spaß beim probieren
Paul