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>

 

Pour tester ce script


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/