suit: DIV - VerständnisProblem

Beitrag lesen

Ich hab derweil den Code von Suit (danke nochmal) etwas modifiziert, jedoch stoße ich auf das Problem, das sich alle Ebenen überlappen.

Das ist auch sinn der sache, das du die Dinger übereinanderpositionieren kannst - die Reihenfolge der Überlappung wird durch z-index (hast du ja bereits entdeckt) bestimmt. Ein höhrerer z-index ist aber nicht gleich eine höhere Position (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=Erläuterung lesen).

Daher frage ich mich ob es richtig/wichtig ist in einem tableless-design margin-left, right etc. zu nutzen um die Ebenen zu positionieren.

Aussenabstände sind ein wichtiges Werkzeug - man kann damit z.B. aufeinanderfolgende Elemente überlappen (mit negativen Außenabständen) ohne überhaupt position benutzen zu müssen - zur Positionierung selbst sind sie aber nicht wirklich geeignet (außer für gefinkeltere Tricks wo man eben aus z-index-Gründen kein Position einsetzen kann/darf) - da du ohnehin schon mit position: absolute arbeitest, ist es hier wesentlich schlauer die dafür gedachten Eigenschaften (top, right, bottom und left) zu verwenden.

Ich habe die CSS-Anweisung fürs erste in die HTML gelegt (export erfolgt später ;) )

Ein Online-Beispiel wäre komfortabler :)

<div id="container" style="width:850px; margin:auto; position:relative; background-color:#0FF;">

<div id="header" style="position:absolute; margin-left:370px; width:480px; height:200px; background-color:#09F;">

"left" anstatt "margin-left"

<div id="content" style="display:block; position:absolute; margin-top:200px; background-color:#0F6">

Auf die position-Angabe kannst du verzichten. - auch auf den Margin - das würde ich tendentiell mit einem Innenabstand oben im Element mit der ID "container" lösen.

<div id="footer" style="background-color:#009; position:absolute; bottom:0px;">
        footer
      </div>

das Ding braucht keine position-Angabe - ist später ohnehin im Textfluss.

Du hast übrigens ein Zeichencodierungsproblem - offenbar hast du UTF-8-Daten, der Quelltext sieht aber nach ANSI aus.