Problem mit CSS-Layout

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ß,
Mike

MrJava

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

Ronald

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ß,
Mike

Sicherlich 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;

MrJava

Ronald hat recht, aber ich hab mal ein wenig rumgebastelt (Mir war danach):

HTML

<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>

Alles anzeigen

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.

Ed Home

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ß,
Mike

Du 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.

Tags