Pour cet exercice, nous aurons :
- une feuille de style externe regroupant les styles de structure et de présentation communs à toutes les
pages (paragraphe de séparation, liens non soulignés pour a, padding-left:0 pour ul)
- une feuille incorporée à chaque page regroupant les styles particuliers aux différents menus.
Menu vertical simple sans liste
Le sélecteur de classe
.mVertic est flottant à gauche pour permettre d'avoir quelques
explications en regard. Ses dimensions sont adaptées au menu qu'il contient. Pour mieux le visualiser nous
appliquons une bordure blanche en pointillé.
Faire la liste à puces et les liens inactifs.
Nous donnerons à
.mVertic ul une marge haute convenable pour pouvoir le caler verticalement
dans la div.
Nous demandons pour la balise
a : aucune décoration et pour la balise
li pas
de puce.
Toute la mise en forme passe par la balise a.
Le sélecteur de classe
.mVertic a aura la propriété display:block pour pouvoir le
dimensionner. Largeur 120px, hauteur 30px, hauteur de ligne 30px, marge basse 5px pour séparer un peu chaque
bouton, couleur du texte jaune.
Les couleurs d'arrière plan seront différentes pour chaque item.
.mVertic a:hover { color: #ffffcc;}
.mVertic a.Accueil { background-color: #ff9966;}
.mVertic a.Accueil:hover { background-color: #ff6600;}
A l'état survolé la couleur du texte sera plus claire et la couleur d'arrière plan sera plus soutenue dans la
même teinte.
Menu horizontal simple sans liste
Nous donnerons à
.mHoriz li la propriété float:left pour aligner les boutons
horizontalement.
Nous donnerons à
.mHoriz ul une marge haute convenable pour pouvoir caler le menu
verticalement dans la div.