Fixe Menu Firefox / Safari / Opera / IE7
Alle Intensivstation Templates sind XHTML 1.0 und CSS2 validiert.
Dieses Template wurde auf folgenden Browsern getestet:
MAC: Safari, Firefox | PC: IE6, IE7, Firefox
background
Der Menubalken soll 100% der Browserfenstershöhe ausfüllen. Am einfachste ist dies mit einem Hintergrundbild im body zu erreichen, da height:100%; nicht in allen Browsern richitg dargestellt wird.
body {
background:url(images/bg-menu.jpg) repeat-y top left #f5f5f5;
}
position: fixed; für sensitive Browser
Fixe Positionen sind für alle neuen Browser ein Kinderspiel.
#menue {
position: fixed;
left: 0;
top: 0;
width: 220px;
padding: 40px 0;
margin: 0;
}
Das Menu links wird mit position: fixed; aus dem Fluss des HTML genommen und liegt über den static positionieren Elementen.
position: fixed; braucht immer eine Breitenangabe.
siehe Beispiel für neue Browser
position: fixed; for old IE6 Browser
Intenet Explorer 6 ignoriert position fixed und braucht eine Spezialbehandlung.
IE6 versteht position: absolute;.
html, body {
height: 100%;
overflow: hidden;
}
Mit overflow: hidden; wird im HTML und im BODY der Scrollbalken entfernt.
#container{
width: 100%;
height: 100%;
overflow: auto;
}
Mit overflow: auto; wird dem #container div der Scrollbalken mitgegeben.
#menue {
position: absolute;
left: 0;
top: 0;
width: 220px;
padding: 40px 0;
margin: 0;
z-index: 100;
}
Mit position: absolute; wird der #menu div plaziert. position: absolute; braucht eine Breitenangabe.
siehe Beispiel für Internet Explorer 6
position: fixed; Cross Browser
<link href="css/fixedmenue.css" rel="stylesheet" type="text/css" />
Für die Cross Browser Version wurden externe Stylesheets verlinkt. Angaben, die für alle Browser gleich bleiben, stehen im fixedmenue.css
<!--[if lte IE 6]> <link href="css/fixedmenu-ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
IE6 bekommt eine Browser Weiche mit Conditional Comments.
Mehr dazu bei bueltge.de/conditional-comments-effizient-nutzen.
Im IE6 CSS werden nur die Änderungen mitgegeben, siehe fixedmenue-ie6.css.
Alle anderen Angaben kommen vom fixedmenue.css.
Siehe Beispiel für neue Browser
Dowload alle Fix-Menu-Beispiel-Templates
This work is licensed under a Creative Commons License