Vous voyez qu'il ne faut pas aller trop vite ! Allez jusqu'au bout de l'exposé et tout ira bien !
Heu ... si vous avez définitivement adopté Mozilla, vous ne vous êtes rendu compte de rien ... En effet, seuls les accrocs de Internet Explorer, notamment, ont eu (peut-être ...) une désagréable surprise s'ils n'ont pas fait appel aux différents calques dans un ordre logique. Il ne faut pas perdre de vue une règle fondamentale : si vous ne pratiquez pas un positionnement précis pour TOUS les éléments de la page (en mélangeant des position:relative, des position:fixed et/ou des position:absolute, si vous fermez des calques au mauvais endroit et insérez des paragraphes, par exemple), il est indispensable de respecter une architecture cohérente.
En effet, il n'est pas rare (et même fortement conseillé !) d'écrire des règles générales (génériques est plus approprié) dans un sélecteur afin de bénéficier de l'effet d'héritage dans d'autres sélecteurs inclus dans le premier. C'est notamment le cas pour les propriétés de police ou de texte. Vous devinez ... ou vous subirez sans doute les inconvénients du non-respect des conventions si vous n'y prenez garde.
Pour éviter ces problèmes, la structure de la page devra être la suivante
En somme, l'élément essentiel à retenir est de dissocier totalement le calque de la barre de navigation de celui de la page proprement dite. Cela signifie que la première peut aussi bien être écrite APRES le calque page qu'avant celui-ci. Dans ce dernier cas, il faudra faire appel à la propriété z-index pour déterminer l'ordre d'affichage : il faudra ajouter z-index:0 aux règles de page. Dans le cas où vous omettriez cette règle, le contenu de la page "glisserait" au dessus de la barre de navigation lors de l'utilisation de l'ascenseur. barresup comportant les propriétés top et left, il détermine son positionnement par rapport au bloc ou élément dans lequel il se trouve : le corps de la page (body) OU le calque (bloc) dans lequel il peut se positionner. Ici, il s'agit du calque centre.
Il reste deux réglages à écrire dans le body : en l'absence de ceux-ci, Internet Explorer (du moins jusqu'à la version 5.5) refuse obstinément de positionner la barre de navigation où elle est censée s'afficher. Cette obligation est d'autant plus gênante qu'il est dès lors impossible d'attribuer un DOCTYPE à ces pages qui sont, de ce fait, considérées comme non valides par le W3C ! La version 6 de ce navigateur implémente toutefois (enfin) les 2 propriétés (que Mozilla "connait" depuis longtemps !) nécessaire à un affichage correct et valide : margin-top et margin-left dont les valeurs seront réglées à 0 (zero). Celles-ci permettront enfin de "coller" les barres de navigation aux limites gauche et supérieure de la fenêtre.
Voilà, voilà ... !
Tout va bien jusqu'à présent ? Vous avez essayé et tout fonctionne comme vous l'espériez ?
Alors, vous pouvez passer à la Suite 3 qui va vous permettre d'apprendre comment faire
apparaître et disparaître à votre gré une ou plusieurs barres de navigation et de créer des menus
déroulants.