Si ces photos vous inspirent, n'hésitez pas : faites une visite virtuelle du nord de la Bretagne dans la rubrique "Côtes d'Armorique" de ce site. Vous ne le regretterez pas !
Cette remarque ne signifie pas que, comme dans les exemples qui précèdent, le texte soit centré par rapport à son propre calque mais bien par rapport à sa position dans le "calque-mère". Vous pouvez choisir un texte justifié, centré à gauche ou centré à droite : les propriétés text-align servent à cela ! Le résultat sera toutefois plus difficile à parfaire en raison des différences d'affichage des navigateurs utilisés. Voyez pour cela la remarque en fin de cet exposé.
La réalisation de telles présentations n'est pas plus difficile à mettre en oeuvre que pour les diptyques : il suffit d'ajouter un calque supplémentaire en observant bien les dimensions d'ensemble. Voyons la feuille de style :
Ces 3 blocs sont installés dans un "calque-mère" et l'ensemble est intégré (dans ces exemples) de la manière suivante :
<div style=" width : 710px ; height : 170px "> <div class="Gauche"> contenu </div> <div class="Centre"> contenu </div> <div class="Droit"> contenu </div> </div>
Vous aurez remarqué la répétition des propriétés et valeurs relatives à la police affichée. Elle n'est pas indispensable si vous n'utilisez qu'une seule et même police dans un triptyque ou tout autre ensemble de blocs de données : il suffit dans ce cas de les déclarer dans le "calque-mère" : les calques internes en hériteront automatiquement.
Cette méthode est un "passe-partout" qui permettra d'écrire ces règles de style dans une feuille dite "générique" afin de pouvoir l'utiliser sur plusieurs pages. Les puristes n'apprécieront sans doute pas : il existe une différence de quelques petits pixels selon les navigateurs .... Elle a toutefois l'avantage d'être (presque) parfaitement affichée tant par IE5 que par Mozilla.
Les pointilleux trouveront sans doute leur bonheur dans un autre exposé qui traitera du positionnement précis des objets et blocs de données.
