Travaux pratiques
TROISIÈME PARTIE
168
Créer un menu horizontal
La distinction claire entre le fond du code HTML et la forme de la mise en page
CSS rend possible un bouleversement complet de l’agencement du menu sans intervenir sur sa structure ou son contenu. Pour produire un menu horizontal tenant sur
une seule ligne, on pourra donc conserver le code HTML initial :
La plupart des styles CSS du menu vertical précédant pourront eux aussi servir tels
quels :
Cette construction aboutit au menu vertical simple déjà vu, dont l’affichage sous
forme de colonne est imputable à l’utilisation d’éléments de liste

de type bloc
(s’affichant par défaut les uns sous les autres).
La déclaration line-height: 25px n’a plus lieu d’être ; seules les marges latérales
nous concernent désormais. Pour placer les liens à la suite les uns des autres sur la
même ligne, les méthodes de positionnement les plus simples à mettre en œuvre sont
les propriétés display et float.
HTML

• Lien 1


• Lien 2


• Lien 3


• Lien 4

CSS
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-type: none;
}
#menu a {
color: green;
text-decoration: none;
line-height: 25px;
}
#menu a:hover, #menu a:focus {
color: orange;
}