Div problem

[Jantz]

Hallo Leute,

da ich es leid bin mit Tabellen mein Layout zu erstellen (Pics), dachte ich mir, ich arbeite _ausnahmerweise_ WC3 Conform in dem ich DIV's verwende!

Das Design ist soweit in Div Tags eingefügt (als background).
Das Problem besteht nun da drin, das ich eine "Grafik Tabelle" mit Div Tags simulieren möchte.. das bedeutet also..

- ein Header
- ein Contentbereich
- ein Footer

Da das ganze auch dynamisch sein soll (in der Länge), möchte ich, das sich der Footer an den unteren Rand des Contentbereichs orientiert und positioniert. Derzeit bleibt leider der DIV Tag (footer) dort wo er ist .

Gibt ist diesbezüglich überhaupt eine Lösung? Ich hab leider bist jetzt nichts gefunden.

Ich danke.

Hier eben nochmal der Code:

<div id="Layer9" style="position:absolute; left:17px; top:100px; width:67px; height:34px; z-index:9; background-image: url(bilder/c_topic.jpg); layer-background-image: url(bilder/c_topic.jpg); border: 1px none #000000;"></div>
<div id="Layer10" style="position:absolute; left:84px; top:100px; width:345px; height:34px; z-index:10; background-image: url(bilder/c_top.jpg); layer-background-image: url(bilder/c_top.jpg); border: 1px none #000000;"></div>
<div id="Layer11" style="position:absolute; left:429px; top:100px; width:126px; height:34px; z-index:11; background-image: url(bilder/c_logo.jpg); layer-background-image: url(bilder/c_logo.jpg); border: 1px none #000000;"></div>
<div id="Layer12" style="position:absolute; left:17px; top:134px; width:538px; height:135px; z-index:12; background-image: url(bilder/content.jpg); layer-background-image: url(bilder/content.jpg); border: 1px none #000000;"></div>
<div id="Layer13" style="position:absolute; left:17px; top:269px; width:538px; height:20px; z-index:13; background-image: url(bilder/conten_unten.jpg); layer-background-image: url(bilder/conten_unten.jpg); border: 1px none #000000;"></div>

Dazu ist zu sagen, das die ersten 3 Divs den Header bilden. Der 4 ist der Content Div und der letzte logischerweise der footer


Thx a lot

 

[Jantz]

Hab auch schonmal an verschachtelung gedacht, was auch funktionert, das Problem ist jedoch, das der Footer abgerundete Ecken hat.

Klappt also auch nicht

 

[Tobias Menzel]

Hi,

ich bin auch nicht besonders fit in CSS, aber probier es doch einmal folgendermaßen:

<div id="header" style="left:84px; top:100px; width:538; height:34px; background-color: #0000FF; border: 1px none #000000;">header</div>
<div id="content" style="left:17px; top:134px; width:538px; height:135px; background-color: #FF00FF; border: 1px none #000000;">Content</div> 
<div id="footer" style="left:17px; top:269px; width:538px; height:20px; background-color: #0000FF; border: 1px none #000000;">footer</div>

Die 3 Bilder für den Header kannst Du einfach nebeneinander als img-Tags einbinden. (in diesem Beispiel habe ich die HG-Bilder entfernt und zum Testen Hintergrundarben gesetzt.

Gruß