Evolution de la maquette

Avec la création automatique des pages web du site grâce à cet « AutoIt-CMS », j'ai pu ajouter quelques petites fonctionnalités comme une navigation par "mois suivant" et "mois précédent" dans les pages de brèves archivées mensuellement ou l'affichage de l'identifiant de chaque sous-titre d'article lorsque le l'on passe la souris dessus. J'en ai aussi profité pour corriger quelques bugs de maquette.

J'ai d'abord replacé le style switcher en début de page, simplement parce que lorsque l'on désactivait les styles, il se retrouvait en fin de document, donc difficile de s'en resservir. Ce faisant, j'ai "encombré" le début de page avec des liens supplémentaires, ce qui ne facilite pas la navigation en mode texte où l'on passe d'un lien à l'autre avec la touche tab. D'où l'ajout de trois liens: les deux derniers permettent de sauter directement soit vers le menu de navigation, soit vers le contenu principal de la page visitée. Le premier renvoie vers la page standards et accessibilité.

Un deuxième bug, beaucoup plus problématique celui-là, impliquait l'héritage de la largeur pour une liste imbriquée (le sous-menu du menu de navigation) et son affichage avec le navigateur Opera: une largeur de 100% attribuée à la liste fille donnait une largeur équivalente au 100% de la li parente, et non du ul parent. J'ai donc trouvé une astuce qui vaut ce qu'elle vaut: définir la largeur de la liste imbriquée avec les propriétés min-width et max-width fixée toutes deux à 100%. Le sous-menu de navigation prend ainsi toute la largeur du conteneur.

Enfin, la dernière correction apportée à la maquette concerne le menu déroulant des articles. L'automatisation de l'écriture du code m'a permis d'enrichir ce menu en ajoutant aux titres de niveau 2 (h2) ceux de niveau 3 (h3) dans un sous-menu dédié, lui aussi déroulant. J'ai par ailleurs remplacé la technique mise au point par Eric Meyer et utilisant la pseudo-classe hover alliée à la propriété display (le menu s'affiche lorsque l'on passe la souris au dessus du titre de l'article), par celle de Patrick Griffiths et Dan Webb, Son of Suckerfish Dropdowns. Le principe est sensiblement le même, sauf que le menu est masqué non par un display: none mais par un positionnement gauche de la boîte avec une valeur négative très grande (left: -999em). L'affichage en passant la souris au-dessus du titre se fait ensuite en rétablissant un positionnement gauche plus classique. Patrick Griffiths explique très bien les avantages de sa méthode en terme de lisibilité; pour ma part, la technique a permis de résoudre certains problèmes d'affichage que je n'arrivais pas à surmonter (mais, pour être honnête, je n'ai pas vraiment compris comment :-).

D'autres modifications, concernant notamment les "notes de bas de page" des articles, feront l'objet d'un texte plus complet.