UNE ZONE FIGEE A L'ECRAN SOUS IE
CODE SOURCE CSS ET HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
/* début du hack "fixed" permettant de fixer les
menus sous IE */
body {
overflow-y: hidden ;
margin: 22px 0% 0% 10%;
padding:0 }
html > body {overflow-y: auto} /* annule le overflow-y pour firefox 1.5 et supérieur */
.content {
height: 100%;
overflow: auto}
/* fin du hack "fixed" permettant de fixer le menu sous
IE */
.menu1 { /* menu fixe en haut de l'écran */
position: absolute ;
top: 0 ;
left: 0 ;
width: 110% ;
height: 20px ;
background-color : #AFB7D3 ;
border-bottom: solid black 1px}
.menu2 { /* menu fixe à gauche de l'écran */
position: absolute;
top: 20px;
left: 0;
width: 10%;
height: 100%;
background-color:#AFB7D3;
border-right: solid black 1px}
.menu-coin { /* cache les barres en haut à gauche */
position: absolute;
top: 0px;
left: 0;
width: 10%;
height: 21px;
background-color:#AFB7D3;
body>.menu1 {position:fixed} /* annule le hack "fixed"
pour les autres navigateurs que IE */
body>.menu2 {position:fixed} /* annule le hack "fixed" pour les autres navigateurs que IE */
body>.menu-coin {position:fixed} /* annule le hack "fixed" pour les autres navigateurs que IE */
.boite {width:20% ; height:800px ; border:2px solid black} /* boite servant à faire défiler l'écran, en débordant de la page */
</style>
</head>
<body>
<div class="menu1"> <!-- menu en haut de l'écran
-->
ZONE FIGEE EN HAUT DE L'ECRAN
</div>
<div class="menu2"> <!- menu à gauche de
l'écran -->
ZONE FIGEE A GAUCHE DE L'ECRAN
</div>
<div class="menu-coin"> <!- cache les barres en
haut à gauche de l'écran -->
</div>
<div class="content"> <!- début du contenu
de la page -->
<div class="boite">Contenu quelconque de la
page</div>
</div> <!- fin du contenu de la page -->
</body>
</html>
COMMENTAIRES
Cet exemple reprend l'exemple précédent, mais la bordure noir des 2 zones fixes n'est pas très jolie quand elle déborde d'une zone sur l'autre. On peut l'effacer, ou cacher ce débordement avec une 3ième (petite) zone fixe. C'est .menu-coin. C'est la seul différence dans le script, ce qui explique que les commentaires du code ont presque disparus : ils étaient redondants.
Site sur ce hack : http://devnull.tagsoup.com/fixed/