Au man, das ist ja echt einfach!
Schon mal mit dem IE angesehen
Leider unterstützt der IE kein fixed
Für Microsoft-Browser muss man eine Extra-Wurst braten. Das geht so:
Zunächst das HTML:
Code:
...
<body>
<div id="menu"> ... menu-code hier ... </div>
<div id="hintergrund">
<div id="inhalt">
... inhalte kommen hier ...
</div>
</div>
</body>
</html>
Man benötigt einen Dummy-Container ("hintergrund"). Der Trick ist, dass man das Menu absolut positioniert und ihm einen höheren z-index zuweist. Den Hintergrund setzt man auf die komplette Fenstergröße.
Das CSS für den IE:
Code:
#menu {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 180px;
height: 300px;
}
#hintergrund {
z-index: 0;
width: 100%;
height: 100%;
overflow: auto;
}
#inhalt {
position: static;
margin: 0px 0px 30px 180px;
}
body {
overflow-y: hidden;
}
Das overflow-y gehört zwar nicht zum offiziellen CSS-Standard, da es nur vom IE unterstützt wird. Aber für den schreiben wir das CSS ja gerade. Es unterbindet das Scrollen.
Mit diesem Code scrollt man den Inhalt des #inhalt-divs nur relativ zum #hintergrund-div. Dieses ist jedoch exakt auf die Fenstergröße festgelegt. Das Menu liegt über diesem Hintergrund und bleibt immer am selben Fleck, da die Seite durch den Trick nie größer wird, als das Fenster.
Um dem IE das Skript zukommen zu lassen schreibt man im <head>-Bereich nach dem normalen StyleSheet-Link noch einen Conditional-Comment. Das ist ein HTML-Kommentar, der jedoch Code enthalten kann, der vom IE interpretiert wird:
Code:
<!--[if gte IE 5]>
<link rel="stylesheet" href="styles/stylesheet_fuer_msie.css" charset="iso-8859-1" />
<![endif]-->
Damit lädt der IE (und nur der IE) ab Version 5 (if gte (greater than or equal) IE 5) das zweite Stylesheet.
Für alle ordentlichen Browser kann man im ersten Stylesheet getrost beim fixed bleiben.
grüße
kaidoh
