Comment utiliser les CSS pour obtenir une mise en page avec un menu fixe
sur tous les navigateurs
Solution sans utilisation de Javascript
Faire en sorte de conserver un menu fixe, même lorsque l'internaute fait défiler le texte de la page, est le rêve de beaucoup de concepteurs de site. Cette disposition facilite grandement la navigation en proposant à l'internaute un repère fixe et toujours présent.
Nous proposons une première solution trés générale à ce problème sur la page alan2_zapman2.htm que nous vous conseillons de consulter pour comprendre les principes généraux à mettre en oeuvre.
Voici la description d'une variante de ce principe, mise au point par Alan, du forum Alsacréation.
Solution avec superposition de blocs, sans utilisation de Javascript
Le système de positionnement des blocs à l'aide du CSS permet, si on le souhaite, de les superposer les uns aux autres. Cela présente rarement un intérêt, mais dans certains particuliers, on peut utiliser cette possibilité pour obtenir un menu fixe, compatible avec Internet Explorer 6.x, sans recourir au Javascript.
Ce type de mise en page est cependant assez délicat et demande une bonne compréhension des mécanismes en jeu pour parvenir au résultat souhaité. Qui plus est, la solution très "spéciale" utilisée ici pour contourner les limitations d'Internet Explorer limite les possibilités de mise en page (voir en fin de paragraphe).
La page que vous êtes en train de lire met cette solution en oeuvre. Voici comment nous avons procédé :
- Feuille de style standard :
a) le bloc fixe qui contiendra le menu est créé à l'intérieur de <body> avec une hauteur fixe et une largeur de 100%. Son positionnement est défini comme "absolute" avec top: 0px.
b) le bloc qui contiendra le texte de la page est créé à l'intérieur de <body>. Son positionnement est défini comme " absolute " avec bottom: 0px; et top: xxpx ou xx correspond à la hauteur du menu.
c) on désactive l'ascenseur du bloc <html> et on active l'ascenseur du bloc texte.
Dans cette configuration, les deux blocs sont positionnés côte à côte et les principes de positionnement sont exactement les mêmes que pour la solution générale décrite sur notre page alan2_zapman2.htm.
- Feuille de style destinée à Internet Explorer
a) le bloc fixe qui contiendra le menu est créé à l'intérieur de <body> avec une hauteur fixe et une largeur de 100%. Son positionnement est défini comme "absolute" avec top: 0px.
b) le bloc qui contiendra le texte de la page est créé à l'intérieur de <body> avec un positionnement défini comme "static". Ce bloc va donc occuper le bloc <body> à 100%, en hauteur et en largeur.
c) l'ascenseur du bloc <body> est défini comme overflow: auto; c'est donc cet ascenseur qui permettra de faire défiler le contenu du bloc texte (un bloc positionné en "static" ne peut pas avoir d'ascenseur).
Dans cette feuille de style, on a une superposition du bloc texte qui occupe la totalité de l'espace <html> et du bloc menu qui est positionné au sommet de <html> et qui le recouvre. Le haut du bloc texte est donc masqué par le bloc menu.
Deux solutions peuvent être envisagée pour "dégager" la partie supérieure du bloc texte :
a) la solution la plus évidente consiste à lui attribuer un "padding-top" (marge intérieure haute) égal à la hauteur du menu. Cette solution comporte cependant un piège plutôt ennuyeux qui se manifeste uniquement si vous utilisez les "ancres" du type <a name="nom_de_l_ancre"> : en cas de clic sur un lien vers cette ancre ( <a href= "#nom_de_l_ancre"> ), Internet Explorer va déplacer l'ascenseur de façon à positionner l'ancre en haut de page, c'est à dire sous le menu. L'ancre ne sera pas visible ! Cette solution n'est donc pas la bonne. >>> Tester cette solution.
b) la deuxième solution consiste à attribuer un "padding-top" au bloc <html> plutôt qu'au bloc texte. Du coup, comme on peut le constater avec notre exemple, l'ascenseur vertical du bloc texte est restreint à sa hauteur exploitable et les ancres redeviennent utilisables. C'est cette solution qui a été utilisée pour la page que vous êtes en train de lire.
Les limites de cette solution :
a) Avec Internet Explorer 6.0 et 5.5, lorsque l'on tente de réduire la largeur de la fenêtre au delà d'une certaine valeur, l'ascenseur vertical finit par disparaître. Cet inconvénient devient trés gênant si votre bloc principal contient des images de largeurs importantes car l'ascenseur disparaît dés que la taille de la fenêtre est inférieure à la taille de ces images. Vous pouvez faire un essai avec la présente page.
b) L'ascenseur vertical est positionné à droite. Cela ne conviendra pas si vous souhaitez réaliser une mise en page en 3 colonnes avec le texte principal en colonne centrale.
b) Si l'on souhaite réaliser un décors fixe (en fond de page) pour l'habillage du site, on se retrouve assez limité par la configuration d'Internet Explorer : on ne peut loger qu'une image fixe dans le background du bloc <body> ou <html>. Impossible de positionner une autre image sous le bloc principal.
c) Les limites de la solution "alan2_zapman2.htm" s'appliquent également à celle-ci, excepté pour les points cités ci-dessous :
Les avantages de cette solution :
a) Les utilisateurs équipés de Internet Explorer 5.5 et 6.x ayant désactivé le Javascript pourront naviguer exactement comme les autres et continuent à bénéficier des menus fixes.
b) La navigation (déplacement de l'ascenseur vertical) par clavier et souris est parfaitement opérationnelle sous Explorer 5.5 et 6.x.
