Accueil Boite à Outils Positionnement fixe... même avec Internet Explorer !

Publié le : 14 avril 2006
Publication antérieure :
12 juin 2005

Imprimer Imprimer cet article

Auteur :
Alain Sichel

Alain Sichel
Positionnement fixe... même avec Internet Explorer !

Cet article décrit un moyen d’afficher un calque en positionnement fixe en bas de page pour tout navigateur moderne [1], ce qui n’est pas trop difficile pour un navigateur respectant les normes du Web, mais théoriquement impossible pour Internet Explorer pour PC [2] qui ne reconnaît pas le positionnement fixe.

Mise au point du 14/04/06 : J’étais content d’avoir mis au point la solution décrite dans cet article, mais je dois reconnaître maintenant qu’elle est dépassée par une technique bien plus élégante (tout CSS, pas de Javascript) qui est décrite ici : Fixed positioning, mais qui ne fonctionne pas avec Internet Explorer pour Mac pour lequel la technique décrite dans cet article reste pertinente.

 

 Pour quoi faire ?

Tout a commencé par une recherche pour améliorer la présentation du site du CYES, en remplaçant des éléments de mise en page utilisant des tableaux par une mise en page par feuille de style.

De nombreuses images réparties sur la hauteur des pages, avec un rollover [3] en Javascript permettaient le retour en haut de la page [4]. Plutôt que cette mise en page un peu lourde, j’ai donc cherché à avoir une seule image, toujours présente en bas à droite des pages.

 Rollover en CSS

Je commence par décrire le rollover qui n’utilise pas JavaScript, mais les feuilles de style.

Voici la partie "HTML" du code [5] :

<div id="haut"><a href="#top"><img src="/images/vide.gif" alt="Haut de la page" width="16" height="16" border="0" title="Retour en haut de la page, Accès clavier touche a" /></a></div>

Evidemment pour que cela marche, il faut avoir placé une ancre <a name="top"></a> en haut de chaque page. L’image vide.gif est transparente, elle va être remplacée par l’image du bouton simple ou survolé grâce aux indications de la feuille de style [6] :

#haut a {
        display: block;
        width: 18px;
        background: url(http://www.monsite.com/images/fleche.gif) no-repeat 0 0;
        margin: 4px 8px;
}
#haut a:hover {
        background: url(http://www.monsite.com/images/fleche.gif) no-repeat 0 -16px;
}

Vous aurez sûrement remarqué que c’est la même image qui est utilisée avec ou sans "survol", simplement ce n’est pas la même partie de l’image qui est visible (ainsi, pas de perte de temps au chargement d’une nouvelle image). Je ne détaille pas plus ce rollover en CSS, car pour ceux qui veulent plus d’explications, tout est parfaitement décrit dans Sprites CSS : Meurs, découpe d’images, meurs ! [7].

 Positionnement fixe

Voyons maintenant comment positionner le calque <div id="haut"> en bas à droite des pages. On place le code suivant dans la feuille de style :

#haut {
        position: absolute;
        top: 500px;
        right: 12px;
        width: 20px;
        z-index: 2;
}
html>body #haut {
        position: fixed;
}

Seule la première partie du style est comprise par Internet Explorer, le calque a alors un positionnement absolu. Par contre les navigateurs intelligents et respectueux des normes comprennent jusqu’au bout et le calque a un positionnement fixe, c’est-à-dire que même si on fait défiler le contenu de la page, l’image est toujours visible, à 500 pixels du haut de la fenêtre.

Oui, mais toutes les fenêtres ne seront pas hautes de 550 ou 600 pixels, alors comment faire pour que l’image soit toujours bien placée ? C’est là qu’intervient JavaScript [8] :

function getWindowHeight() {
 var windowHeight = 0;
   if (typeof(window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
   }
        else {
          if (document.body && document.body.clientHeight) {
            windowHeight = document.body.clientHeight;
        }
        else {
          if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
          }
        }
   }
 return windowHeight;
}
function setFooter() {
  if (document.getElementById) {
     var windowHeight = getWindowHeight();
     if (windowHeight > 0) {
         var footerElement = document.getElementById('haut');
         if (windowHeight - 25 >= 0) {
            footerElement.style.position = 'fixed';
            footerElement.style.top = (windowHeight - 25) + 'px';
         }
         else {
            footerElement.style.position = 'static';
         }
     }
  }
}
window.onload = function() {
        setFooter();
}
window.onresize = function() {
        setFooter();
}

Ce script est une adaptation de celui décrit dans l’article Les pieds (de page) dans le plat auquel je vous renvoie si vous voulez les explications complètes. Pour les navigateurs recents, la hauteur de la fenêtre est donnée par getWindowHeight(); [9] on a donc avec ce script un positionnement à 25 pixels du bas de la page,

- à l’ouverture de la page grâce à window.onload = function() { setFooter() }

- à chaque fois que la fenêtre est redimentionnée grâce à window.onresize = function() { setFooter() }

 Et Internet Explorer ?

Le script ci-dessus fonctionne avec Internet Explorer pour Mac, mais évidemment pas avec Internet Explorer 5 ou 6 pour PC. Que peut-on faire pour nos visiteurs qui utilisent encore ce navigateur ?

Internet Explorer connait le positionnement absolu. Il suffit de recalculer la hauteur du calque par rapport au haut de la page au fur et à mesure que la page défile. Le script à utiliser devient alors :

function setFooter() {
  if (document.getElementById) {
     var windowHeight = getWindowHeight();
     if (windowHeight > 0) {
         var footerElement = document.getElementById('haut');
         if (windowHeight - 25 >= 0) {
          if ((document.all) && (navigator.appVersion.indexOf("Mac",0)<0)) {
                footerElement.style.position = 'absolute';
                footerElement.style.top = (document.body.scrollTop + windowHeight - 25) + 'px';
                }
          else {
                footerElement.style.position = 'fixed';
                footerElement.style.top = (windowHeight - 25) + 'px';
                }
         }
         else {
            footerElement.style.position = 'static';
         }
     }
  }
}
window.onload = function() {
        setFooter();
}
window.onresize = function() {
        setFooter();
}
window.onscroll = function() {
        setFooter();
}

C’est presque le même script qu’avant, mais si le navigateur est Internet Explorer pour PC, on le reconnaît par ((document.all) && (navigator.appVersion.indexOf("Mac",0)<0)) et alors :

- on met le calque en positionnement absolu,

- on ajoute à la hauteur de la fenêtre la hauteur de la page qui a déjà défilée qui est donnée par document.body.scrollTop

- on refait ce calcul chaque fois que la page défile, grâce à window.onscroll = function() { setFooter() }

 Conclusion

Vous pouvez tester ce script en service en allant voir les pages du CYES.

J’ai passé beaucoup de temps pour mettre au point une solution qui prenne en compte tous les navigateurs modernes.

J’espère que ce script pourra être utile à d’autres, et j’espère aussi qu’à l’avenir Microsoft sera plus respectueux des normes (mais là, je rêve...).

 

[1] Pour utiliser le moyen décrit dans cet article un navigateur doit comprendre la norme CSS2, ce qui n’est pas le cas de Netscape 4 et d’Internet Explorer 4.

[2] Curieusement, Internet Explorer pour Mac, qui respecte mal les normes du W3C, se comporte mieux sur ce point là.

[3] Désolé pour les puristes du français, mais c’est plus rapide que de dire "Avec le remplacement par une autre image au survol de la souris".

[4] Je sais, certains vont dire que c’est idiot et qu’il n’y a qu’à utiliser la touche "Haut de page" présente sur la plupart des claviers. Je crois que beaucoup d’internautes ne connaissent pas cette touche, et on peut de toute façon utiliser l’astuce décrite ici pour d’autres choses bien plus utiles que le retour en haut de page.

[5] Pour simplifier les mises à jour, ce code est ajouté au menu de "Pied de page" qui est inclus dans chaque page du site.

[6] Ces indications peuvent être placés dans le <head> de chaque page, entre les balises <style type="text/css"><!-- et //--></style>, ou plus judicieusement dans une feuille de style externe appellée par le code <link title="test" type="text/css" rel="stylesheet" href="monstyle.css">

[7] Autre article sur le rollover en CSS : Zoom d’images avec les CSS.

[8] Comme pour les éléments de style, ce script peut être placé dans le <head> de chaque page, entre les balises <script language="JavaScript" type="text/javascript"><!-- et //--></script>, ou plus judicieusement dans une feuille externe appellée par le code <script language="JavaScript" type="text/javascript" src="monscript.js"></script>

[9] Pour retrouver la valeur d’un élément selon le navigateur, voyez la page Référence DHTML multi navigateurs.




Imprimer Imprimer cet article


Réactions à l'article :