4haus-tips
4haus-tips
Ist bis jetzt die einzige Variante , die ich gefunden habe, die in Firefox/Opera und IE gleichermaßen funktioniert.
Der Hintergrund für body ist diesesmal so wie der von cont. Der Hintergrund von nav wird hier auch diesem Element zugewiesen.
head und nav werden absolut positioniert, cont bekommt einem Abstand links. Der Navigation muß overflow:auto; zugewiesen werden, sonst kommt man bei langer Navigation und kleinem Bildschirm nicht mehr an die unteren Menüpunkte.
Zum fixieren wird position:fixed verwendet, aber für IE wieder aufgehoben. Der bekommt position:absolute und noch ein paar overflows, damit es auch dort funktioniert.
body bekommt oben ein padding in der Höhe des header-divs. Dabei wieder beachten, daß IE eine andere Vorstellung von heigth hat.
html {margin:0; padding:0;}
body {margin:0; padding:80px 0 0 0; background: #FEFEFE;}
#head {position:fixed; top:0; left:0; height:60px; width:100%;}
#nav {position:fixed; top:80px; left:0; bottom:0;
width:20ex;
overflow:auto;
background:url("flowers.jpg") top left fixed #1F5F13;
border-right:2px solid #D5391F;}
#cont {margin-left:20ex;
padding:1px 30px; }
<!--[if IE ]>
<style type="text/css">
body {overflow-y: hidden;}
#cont {overflow:auto; height:100%;}
#head {height:80px; position:absolute;}
#nav {height:100%; position:absolute;}
</style>
<![endif]-->
Seite mit langen Inhalt
Seite mit langer Navigation
Kurze Seite