<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Sparkassenakademie Bayern</title>
<meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="http://localhost/praktikum/HP_SPKAKAD/LOKAL/css/akalayout.css"/>
<!--conditionaly load css-fix for IE 5+ to patch for lack of fixed positioning-->
<!--[if gte IE 5]>
<LINK rel="stylesheet" type="text/css" href="http://localhost/praktikum/HP_SPKAKAD/LOKAL/css/iefix.css"/>
<![endif]-->
</head>
<body>
<div id="borderleft"></div>
<div id="logo">
<img src="http://localhost/praktikum/HP_SPKAKAD/LOKAL/images/headerleft.jpg" alt="headerlinks" border="0"/>
</div>
<div id="menue">
hier ist das Menü
</div>
<div id="header">
<img src="http://localhost/praktikum/HP_SPKAKAD/LOKAL/images/header1024-1h.jpg" alt="header" border="0"/>
</div>
<div id="ie-content-background">
<!-- hier wird die Seite angezeigt -->
<div id="content"></div>
</div>
</body>
</html>
die CSS dazu:
akalayout.css
/* Styles für die DIVs */
#borderleft{
z-index: 0;
position: fixed;
border-right: 1px solid #666666;
padding: 0px;
top: 0px;
left: 0px;
height: 100%;
width: 24px;
background-color: #F0eee5;
}
#logo {
z-index: 0;
position: fixed;
top: 10px;
left: 30px; /*25*/
width: 200px;
height: 90px;
}
#menue {
z-index: 1;
position: fixed;
left: 22px;
top: 100px;
width: 200px;
padding: 10px;
margin: 0px;
}
#header {
z-index: 1;
position: fixed;
top: 0px;
left: 225px;
height: 90px;
width: 800px;
background-color:#EEEEEE;
border-bottom: 20px solid #EEEEEE;
}
#ie-content-background {
overflow: visible;
}
#content {
z-index: 0;
position: static;
overflow: visible;
margin: 130px 10px 10px 220px;
}
iefix.css:
html {
/*äußere Scrollbars entfernen */
overflow: hidden;
}
body {
/* wichtig für linke Randleiste (id: borderleft)*/
height: 100%;
margin: 0;
padding 0;
/* auch hier Scrollbars entfernen, es darf nur der content Scrollbars besitzen */
overflow: hidden;
}
#logo, #borderleft, #menue, #header {
/* da der IE keine fixed-Positionierung versteht, müssen die feststehenden Bereiche auf absolute gestellt werden */
z-index: 1;
position: absolute;
}
#ie-content-background {
position: static;
z-index: 0;
overflow: hidden;
margin: 120px 0px 0px 230px;
}
#content {
margin: 0px 0px 0px 20px;
height: 100%;
overflow: auto;
}