La barre supérieure prend ici l'identité barresup et comporte la valeur fixed afin d'avoir une position ... fixe au sommet de la fenêtre grâce aux propriétés top et left. Elle prend dans cet exemple la largeur totale de l'écran (100 %) et l'on pourra ajouter, comme ici, la propriété d'alignement du texte.
Le calque appbarr va comporter un lien faisant appel à la barre de navigation qui est destinée à être affichée sur la gauche de l'écran, comme s'il s'agissait d'un cadre conventionnel. Nous verrons le résultat plus loin. Si je le cite déjà ici, c'est qu'il est destiné à être intégré dans le calque barresup afin d'en occuper les 100 % prévus. Remarquez que ses réglages sont destinés à une mise en valeur, tout comme un bouton traditionnel. La différence fondamentale entre les deux techniques est que dans le cas présent, il n'est fait appel qu'à du HTML pur et dur et non à une image. Jusqu'ici, on pourra donc se passer de JavaScript ... qui sera toutefois votre allié pour la suite de son usage.
Vient ensuite l'écriture des règles permettant la mise en valeur des différents liens lien1, lien2, etc... dont les raisons d'être sont les mêmes que pour le précédent faux bouton. Ces règles seront complétées par un dimensionnement précis afin qu'ils puissent être "casés" correctement dans la barre de navigation. Rien ne vous oblige à créer des calques de liens dont toutes les dimensions de largeur sont identiques : vous les dimensionnerez selon l'importance du texte qu'ils contiendront. Evidemment, pour les raison évoquées dans le début de l'exposé, il ne sera pas possible de créer ces faux boutons sans qu'il n'y ait de différence d'affichage entre les navigateurs. Si vous voulez obtenir un résultat identique dans tous les cas, passez-vous des propriétés padding et border. Ce sera un peu moins joli, voilà tout ! La propriété float est destinée a aligner les différents boutons de liens. Ici, ils le sont à partir de la gauche ; vous pouvez naturellement les aligner à partir de la droite MAIS l'ordre dans lequel ils sont écrits devra alors être modifié. Faites un essai : ce sera plus parlant qu'un long discours !
Enfin, le dimensionnement du calque page permettra de réserver l'emplacement précis de la partie de l'écran qui comportera le texte et/ou les images des pages de votre site. La propriété padding est uniquement destinée à prévoir, d'ores et déjà, un espacement permettant d'éviter que le contenu ne colle disgrâcieusement à une éventuelle barre de navigation gauche (vous verrez plus loin) et au bord droit de l'écran.
Il est certain que le dimensionnement et le positionnement précis dépendent d'une résolution d'affichage arbitraire si vous ne prévoyez rien ! Si le visiteur utilise une résolution d'écran de 800 x 600, les règles reprises ci-dessus permettront une mise en page correcte. Il n'en sera plus de même si celui-ci visionne la page en 1024 x 768 ! Pour pallier à cet inconvénient, "enveloppez" le tout dans un calque principal, de préférence centré. L'idéal est de prévoir le premier visiteur et de créer un calque dimensionné à 760 pixels que vous déclarerez comme ceci :
<div style="width:760px;margin-left:auto;margin-right:auto"> contenu de TOUTE la page </div>
Ce sélecteur et ses règles sont naturellement écrits dans la feuille de style externe. Identifiée ici sous le nom centre, sa déclaration est située juste après la balise body.
Tout va bien jusqu'ici ?
Apparemment non ... Impatient, vous avez écrit votre feuille de style, édité votre page, inséré son contenu
et ... catastrophe : l'intérieur de la page est quelque peu chamboulé !
Suivez le guide en activant le lien Suite 2 !