Hallo,
Ich möchte das Layout unter http://www.hochstift-lokal.de/test/test.html ganz gerne soweit modifizieren, daß der Footer immer unten am Rand steht, oder falls es mehr Content ist, als auf die Seite passt, entsprechend aus dem Bild raus gedrückt wird und er somit am Ende des Contents steht. Also so, wie man es von Tabellen kennt, die auf 100% height stehen und dann durch mehr Content auseinander gedrückt werden. Geht das?
Besten Gruß,
Mike
Problem mit CSS-Layout
-
Dynamix -
15. Dezember 2004 um 18:58
-
-
Hi, wenn ich dich richtig verstanden hab sollte dir
Code<table style="height:100%">
weiterhelfen.
Der unteren Zeile musste dann halt eine feste Höhe geben. -
Na, aber dann bin ich ja wieder im Layout mit Tabellen. Da wollte ich doch gerade von weg und statt dessen die Elemente per DIV-Container mit CSS plazieren.
Dann kann ich ja gleich wieder alles per Tabellen-positionierung machen?!
Sollte doch eigentlich per CSS auch gehen, wenn man es mit Tabellen machen kann, oder geht das nicht?
Gruß,
Mike -
Zitat von Anonymous
Na, aber dann bin ich ja wieder im Layout mit Tabellen. Da wollte ich doch gerade von weg und statt dessen die Elemente per DIV-Container mit CSS plazieren.
Dann kann ich ja gleich wieder alles per Tabellen-positionierung machen?!
Sollte doch eigentlich per CSS auch gehen, wenn man es mit Tabellen machen kann, oder geht das nicht?
Gruß,
MikeSicherlich bekommt man das irgendwie hingebogen, aber was spricht den gegen Tabellen?
Warum willst du es kompliziert machen, wenn es eine einfache Lösung gibt?Fragt ....
Ronald
ach ja....
Code#footer { position:absolute; bottom:0px; -
Ronald hat recht, aber ich hab mal ein wenig rumgebastelt (Mir war danach):
HTML
Alles anzeigen<html> <style type="text/css"> <!-- body { } #box1 { position:relative; width:800; height:100% } #box2 { position:absolute; left:0px; top:0px; width:800px; height:100px; z-index:1 } #box3 { position:absolute; left:0px; top:100px; width:800px; z-index:2 } #box4 { position:absolute; left:0px; bottom:0px; width:800px; height:100px; z-index:3 } --> </style> <body style="text-align:center; margin:0px auto"> <div id="box1" style="background:blue; margin:0px auto"> <div id="box2" style="background:brown">Header</div> <div id="box3" >Content</div> <div id="box4" style="background:green">Footer</div> </div> </body> </html>
Edit: Mir fällt grad auf, optimal ist es noch nicht weil sich der Footer
Bereich natürlich nicht verschiebt wenn der Content größer wird.
Werd mich dann vielleicht morgen drum kümmer, oder jemand anderes.
-
Zitat von Dynamix
Hallo,
Ich möchte das Layout unter http://www.hochstift-lokal.de/test/test.html ganz gerne soweit modifizieren, daß der Footer immer unten am Rand steht, oder falls es mehr Content ist, als auf die Seite passt, entsprechend aus dem Bild raus gedrückt wird und er somit am Ende des Contents steht. Also so, wie man es von Tabellen kennt, die auf 100% height stehen und dann durch mehr Content auseinander gedrückt werden. Geht das?
Besten Gruß,
MikeDu gibst dem Eltern-Element (body) eine feste Größe (35em oder so), sagst dem IE:*height:100%; und für FF min-heigh:35em; für das Kind-Element.
