Travaux pratiques
TROISIÈME PARTIE
170
Plus visuel : prévoir un élément de séparation physique entre deux liens successifs (ce
pourra être un trait d’union ou un trait vertical (|). Ce délimiteur clair, lu par les
outils de synthèse vocale, faciliterait la navigation des non voyants. Cette fonctionnalité, illustrée par la figure 12-9, implique une modification de la structure HTML :
Cette méthode suppose que le contenu des objets de liste, transformés en éléments
en ligne, ne comporte aucun bloc. Elle interdit donc la création de menus graphiques
sous forme de boutons, avec bordures, dimensions, couleurs de remplissage, etc. Tous
les liens de la liste sont astreints à ne contenir que du texte.
Pour concevoir un menu horizontal plus élaboré, il faut conserver une structure sous
forme de blocs, alignés par positionnement flottant.
Alignement avec la propriété float
Reprenons les styles précédents en changeant la déclaration appliquée sur les listes :
display: inline devient float: left :
L’effet produit est le même. Au lieu de transformer les éléments des listes en balises
en ligne, nous les positionnons en flottants à gauche. Ils prennent donc place à la
suite les uns des autres… tout en conservant leur structure de type bloc. Ceci leur
permet de renfermer des liens convertis en blocs et dotés de dimensions.
À nouveau, nous créons des boutons en transformant les liens en blocs ce qui permet
de leur attribuer dimensions, bordure, couleur de fond et marges latérales (respectivement 120 pixels de large, cadre noir d’un pixel de large, orange #fc0, et 5 pixels sur
HTML
Figure 12–9
Un menu horizontal (II)
#menu li {
float: left;
}
TROISIÈME PARTIE
170
Plus visuel : prévoir un élément de séparation physique entre deux liens successifs (ce
pourra être un trait d’union ou un trait vertical (|). Ce délimiteur clair, lu par les
outils de synthèse vocale, faciliterait la navigation des non voyants. Cette fonctionnalité, illustrée par la figure 12-9, implique une modification de la structure HTML :
Cette méthode suppose que le contenu des objets de liste, transformés en éléments
en ligne, ne comporte aucun bloc. Elle interdit donc la création de menus graphiques
sous forme de boutons, avec bordures, dimensions, couleurs de remplissage, etc. Tous
les liens de la liste sont astreints à ne contenir que du texte.
Pour concevoir un menu horizontal plus élaboré, il faut conserver une structure sous
forme de blocs, alignés par positionnement flottant.
Alignement avec la propriété float
Reprenons les styles précédents en changeant la déclaration appliquée sur les listes :
display: inline devient float: left :
L’effet produit est le même. Au lieu de transformer les éléments des listes en balises
en ligne, nous les positionnons en flottants à gauche. Ils prennent donc place à la
suite les uns des autres… tout en conservant leur structure de type bloc. Ceci leur
permet de renfermer des liens convertis en blocs et dotés de dimensions.
À nouveau, nous créons des boutons en transformant les liens en blocs ce qui permet
de leur attribuer dimensions, bordure, couleur de fond et marges latérales (respectivement 120 pixels de large, cadre noir d’un pixel de large, orange #fc0, et 5 pixels sur
HTML
Figure 12–9
Un menu horizontal (II)
#menu li {
float: left;
}