intensivstation

Fixe Menu IE6

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

css template Dowload alle Fix-Menu-Beispiel-Templates

Creative Commons License This work is licensed under a Creative Commons License