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 { /* redéfini les propriétés de toute la
page */
overflow-y: hidden ; /* fonction microsoft supprimant les ascenseurs
sous IE */
margin: 22px 0% 0% 10%; /* la marge du body est à 0 pixels,
sauf à gauche et en haut */
padding:0 } /* marge intérieur à
0 pixels */
html > body {overflow-y: auto} /* annule le overflow-y pour firefox 1.5 et supérieur */
.content { /* boite prenant toute la page sauf le menu rouge */
height: 100%; /* la hauteur de la boite occupe 100% de l'écran
*/
overflow: auto} /* on rajoute un ascenseur droit à la boite
*/
/* fin du hack "fixed" permettant de fixer le menu rouge
sous IE */
.menu1 { /* menu fixe en haut de l'écran */
position: absolute ; /* position du menu = par rapport à la
boite parent (ici le body) */
top: 0 ; /* Le haut du menu est à 0 pixels du haut de l'écran
*/
left: 0 ; /* La gauche du menu est à 0 pixels du bas de l'écran
*/
width: 110% ; /* largeur du menu = 110% de l'écran (pour bug
de IE) */
height: 20px ; /* hauteur du menu = 20 pixels */
background-color : #AFB7D3 ; /* la couleur du menu */
border-bottom: solid black 1px} /* Bordure basse du menu haut*/
.menu2 { /* menu fixe à gauche de l'écran */
position: absolute; /* idem menu1 */
top: 20px; /* Le haut du menu est à 20 pixels du haut de l'écran
(pour ne pas recouvrir la zone du haut) */
left: 0; /* idem menu1 */
width: 10%; /* largeur du menu */
height: 100%; /* hauteur du menu (toute la page) */
background-color:#AFB7D3; /* idem menu1 */
border-right: solid black 1px} /* bordure droite de la zone fixe */
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 */
.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="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 en rajoutant un menu gauche. Voir les explications données précédement.
Quelques remarques sur le fonctionnement des 2 zones fixes :
- Il faut augmenter la marge du gauche du body (ici 10%), pour que le nouveau menu gauche (qui fait 10%) ne recouvre pas le contenu de la page se trouvant à gauche.
- Il faut faire de même pour la marge haute du body (ici portée à 22 pixels), pour que le menu haut de 20 pixels ne recouvre pas le titre de la page.
- .menu2 (zone fixe à gauche) part à 20 pixels du haut, pour ne pas chevaucher la zone fixe du haut, qui fait 20 pixels.
- La largeur du menu fixe en haut faisait 98% dans l'exemple précédent. Elle fait ici 110%, comme pour compenser le fait que la marge gauche du body ait été portée à 10%. C'est absurde (et donc pas nécessaire dans Mozilla ou Opéra), mais c'est semble t'il un nouveau petit bug de IE, pas bien génant.
- La bordure noir des 2 zones fixes n'est pas très jolie, mais aide à bien voir leur frontière. N'hésitez pas à l'enlever.
Site sur ce hack : http://devnull.tagsoup.com/fixed/