Réalisation d'une barre de navigation fixe

A moins d'utiliser la technique des cadres (ce que certains s'obstinent à nommer "frames"), il est impossible d'écrire des pages en affichant tout à la fois leur contenu mais aussi tous les liens destinés à une navigation aisée.

Ici encore, la technique des feuilles de style offre la possibilité d'une réalisation parfaite.

Il reste néanmoins encore un obstacle majeur à cette atteinte de la perfection : l'interprétation propre à certains navigateurs qui n'implémentent pas totalement les règles fondamentales des CSS telles qu'elles sont édictées par le W3C. C'est ainsi que la solution que je propose ici est parfaitement traduite par le meilleur navigateur actuel, Mozilla (à partir de la version 0.9.4), accompagné (une fois n'est pas coutume) par Opera ... mais complètement loupée par Internet Explorer jusqu'à la version 5.5. Gageons toutefois que les prochaines versions de ce butineur prendront en compte une règle (car cette mise en page ne dépend effectivement que d'UNE seule règle !) de style bien pratique : la position FIXE (position:fixed) d'un calque.

Cette petite réalisation ne gêne toutefois pas les navigateurs graphiques "retardataires". Chez ces derniers, en effet, la différence principale consistera en la disparition des barres de navigation fixes lors de l'activation de la barre de défilement vertical (ascenseur) : elles continueront à faire du "yoyo" comme par le passé ... Autre petit inconvénient avec IE et ses semblables (si vous avez suivi pas à pas cette rubrique) : l'interprétation des règles concernant les propriétés padding et border ne permet pas d'obtenir des calques aux dimensions parfaitement identiques.

Ce petit préambule ayant bien mis les choses au point, voyons le résultat : une barre comportant plusieurs liens est bien "collée" au plafond de votre fenêtre de navigation. En lisant cette page, vous serez forcément obligé d'activer l'ascenseur afin de vous délecter de la totalité de ma prose ... Observez dès lors que (si vous utilisez Mozilla ou Opera !) cette barre tant convoitée (même s'il ne s'agit pas de chocolat ...) reste stoïquement fixée au "plafond" ! Si vous en activez les liens (oubliez pour le moment le bouton "Barre gauche"), vous constaterez qu'ils sont parfaitement fonctionnels. Le but recherché est donc atteint. Comment ? En écrivant simplement quelques règles de style dans quelques calques ... C'est désarmant de facilité ! Voyons l'écriture de la feuille de style :

Activez le lien Suite 1 de la barre de navigation !