UNE ZONE FIGEE A L'ECRAN (en bas) 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 le
menu fixe sous IE */
body { /* redéfini les propriétés de toute la
page */
overflow-y: hidden ; /* fonction microsoft supprimant les ascenseurs
sous IE */
margin: 0; /* la marge du body est à 0 pixels */
padding:0} /* marge intérieure à 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 fixe*/
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 fixe
sous IE */
.menu1 { /* menu fixe en bas de l'écran */
position: absolute ; /* position du menu = par rapport à la
boite parent (ici le body) */
bottom: 0 ; /* Le bas du menu est à 0 pixels du bas de l'écran
*/
left: 0 ; /* La gauche du menu est à 0 pixels du bas de l'écran
*/
width: 98% ; /* largeur du menu = 98% de l'écran */
height: 20px ; /* hauteur du menu = 20 pixels */
background-color : red ; /* la couleur du menu */
border-top: solid black 1px} /* Bordure haute du menu */
body>.menu1 {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 fixe en bas de l'écran
-->
Contenu du menu
</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
La fonction position:fixed permet de fixer une boite ou une image à l'écran. Malgrès le défilement de la page, l'objet ainsi fixé ne bouge pas. Mais, encore un bug d'IE, position:fixed ne marche pas.
Il existe un "hack" émulant sous IE cette fonction bien pratique. Il est décrit ci-contre.
Son principe est assez simple : on force une boite à prendre tout l'écran, et on affiche le menu ou la zone qu'on veut fixer quelque part dans cette boite. Le début du "hack" (body { overflow-y: hidden ; margin: 0;} ) n'est pas indispensable, mais améliore l'affichage de la page. La partie .content { height: 100% ; overflow: auto} est par contre obligatoire.
Si on utilise overflow-y:hidden, il faut ensuite mettre un html>body {overflow-y:auto} pour l'annuler dans les autres logiciels que IE 6 et inférieur (lequel ne comprend pas html>body - voir ci-dessous). En effet, à partir de firfox 1.5, overflow-y est interprété, et le mettre en hidden dans firefox provoque des problèmes.
Enfin le body>.menu1 {position:fixed} ne fait pas partie du "hack". Mais il est obligatoire si on veut que la page fonctionne sous Mozilla ou Opéra. Il repasse en effet le menu de position:absolute en position:fixed. On écrit body>.menu1 car Internet Explorer ne comprend pas cette graphie (nouveau bug !) ce qui fait qu'il n'en fait rien, et que pour lui, position reste bien en absolute.
On peut fixer la zone, en haut, à gauche ou en bas. Il sufit de changer les positionnements indiqués dans .menu1. On utilise généralement ce genre de zone pour fixer un menu.
Attention, avec une DTD stricte, ce "hack" ne marche plus sous IE. Il faut alors cacher la DTD à IE en la faisant précéder d'un commentaire <!-- blabla -->, que IE ne comprend pas (encore un bug !).
Site sur ce hack : http://devnull.tagsoup.com/fixed/