jobo: feststehender header footer und menü

Beitrag lesen

Hallo,

Die könnten halt nicht position fixed, oder wie? Und dass der Inhalt dabei lesbar bleibt (padding/margin) muss ja auch sein...;

Genau - nutze einfach position: fixed und jeder Browser der das nicht kann wird mit normalem Textfluss gefüttert.

Das betrifft den Internet Explorer 6 und Geräte die mit Panning arbeiten und nicht scrollen (z.B. Tablets und Mobiltelefone) - auf denen wäre fixed ohnehin ein Hindernis, wenn man es nicht ordentlich macht.

Also so wie es im Artikel steht. Bzw. kann ich dann nicht nur die IE-Hacks weg lassen sondern auch die zustäzlichen header/footer_container.
Also:

  
<html>  
<head>  
<title>header footer test</title>  
<style type="text/css">  
[code lang=css]  
body  
{  
	position:absolute;  
}  
html, body  
{  
	top:0; left:0; right:0;  
	min-height:100%;  
	width:100%;  
	margin:0;  
	padding:0;  
}  
#header  
{  
	position:fixed;  
	top:0; left:0; right:0;  
	height:3em;  
	z-index:3;  
	background-color:green;  
}  
#menu  
{  
	position:fixed;  
	top:4em;  
	left:.5em;  
	width:9em;  
	border:1px solid red;  
	background-color:red;  
}  
#content  
{  
	margin:0;  
	padding-top:4.85em;  
	padding-left:12em;  
	padding-bottom:3em;  
	z-index:2;  
	background-color:yellow;  
}  
#footer  
{  
	position:fixed;  
	bottom:0; left:0; right:0;  
	margin:0;  
	height:2em;  
	z-index:3;  
	background-color:green;  
}  

</style>
</head>
<body>
<div id="header">
header
</div>
<div id="menu">
<ul><li>menu</li><li>menu</li><li>menu</li><li>menu</li><li>menu</li><li>menu</li><li>menu</li></ul>
</div>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<p>footer</p>
</div>

</body>
[/code]
Gruß

jobo