nicht angemeldet
wie wärs mit javascript?
wer den IE6 hat, hat meistens auch die javascripts ausgeschaltet und dann kommt die nervige warnung, für mich keine alternative.
auf die fixierung im ie6 ganz verzichten - die seite bleibt bedienbar, einige komfortfeatures sind weg
leider nicht ganz so einfach, da ich das padding des scrollbaren bereiches sehr hoch setze. sieht das ganze dann im IE6 sehr unschön aus
im übrigen: position fixed macht deine seite potentiell auf kleinen geräten mit kleinen displays mit geringer auflösung und kleinem browserviewport (zb. nintendo ds mit opera mini) unbedienbar
ist mir bewusst, aber man kann ja nicht alles haben
folgend meine ausführlicheren überlegungen sehr stark vereinfacht, dann wird mein problem auch klarer.
gruß bastian
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
color:#FFFFFF;
}
#center {
height: 100%;
width: 500px;
position: relative;
margin-right:auto;
margin-left: auto;
background-color: #FF0000;
z-index: 1;
}
#head {
background-color: #000000;
height: 110px;
width: 500px;
position: absolute;
top:0px;
z-index: 5;
}
html>body #head { /* nur fuer moderne Browser! */
position: fixed;
}
#nav {
background-color: #0000FF;
height: 20px;
width: 500px;
position: absolute;
top: 110px;
z-index: 5;
}
html>body #nav { /* nur fuer moderne Browser! */
position: fixed;
}
#foot {
background-color: #000000;
height: 110px;
width: 500px;
position: absolute;
bottom: 0px;
z-index: 4;
}
html>body #foot { /* nur fuer moderne Browser! */
position: fixed;
}
#inhalt {
width: 500px;
height: auto;
background-color: #FF0000;
padding-top: 130px;
padding-bottom: 110px;
z-index: 2;
}
</style>
<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#scroll {
height: 100%; width: 100%; overflow: auto;
}
#inhalt {
position: static;
}
}
</style><![endif]-->
</head>
<body>
<div id="center">
<div id="head">
<h1>ich rühr mich hier nicht weg</h1>
</div>
<div id="nav">
ich werde mal ne navi
</div>
<div id="scroll">
<div id="inhalt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</div>
<div id="foot">
<h1>ich rühr mich hier nicht weg</h1>
</div>
</div>
</body>
</html>