TD3: Les Feuilles de Style en Cascade
Exercice :
- Recopiez le menu suivant dans une page avec comme couleur de fond:
E8F0F4
-
L'objectif est alors de créer à partir de ce menu un menu déroulant grâce à des feuilles de style. Pour ce faire, vous devez suivre les étapes suivantes et attribuer les valeurs correspondantes aux éléments suivants dans la feuille de style.
- Concernant le menu d'un point de vue général et le premier niveau (#menu, #menu ul)
- on ne souhaite pas de marge intérieure
- on ne souhaite pas de marge extérieure
- on souhaite supprimer le style par défault de la liste
- on défini une hauteur de 21 pixels pour chaque élément/ligne
- on souhaite centrer le texte qui se trouve dans la liste
- Concernant l'ensemble du menu (#menu)
- on met le texte en gras
- on utilise la police Arial
- on définit la hauteur du texte à 12 pixels
- Concernant le contenu des listes, c'est à dire les liens (a)
- on change le type d'élément affichés (display), les liens deviennent des balises de type block
- on ne souhaite pas de marge intérieure
- on fixe la couleur du fond à noir
- on fixe la couleur du texte à blanc
- on supprime le style par défault des liens
- on fixe la largeur de chaque élément à 144px
- Concernant les éléments de premier niveau des listes (#menu li)
- float : left;
/* pour ie qui ne reconnait pas "transparent" */
- on met une bordure blanche de 1 pixel de large à droite de chaque élément
- Concernant les sous-listes (#menu li ul)
- on souhaite utiliser une position absolue
- on fixe la largeur de chaque élément à 144px
- on fait sortir l'élément du champ de vision grace à left
- Concernant les éléments des sous-listes (#menu li ul li)
- on met une bordure blanche de 1 pixel de large en haut de chaque élément
- Concernant les éléments des sous-listes (#menu li ul ul)
- On décale les sous-sous-listes de 22 pixels vers le haut et de 144 pixels à droite afin qu'elles ne soient pas au dessus des sous-listes avec margin
- on met une bordure blanche de 1 pixel de large à gauche de chaque élément
- Concernant le passage de la souris sur un des liens (#menu a:hover)
- On passe le texte en noir
- et au contraire, le fond en blanc
- Concernant les sous-sous-listes lorsque la souris passe sur un élément de liste (#menu li:hover ul ul)
- on fait sortir l'élément du champ de vision grace à left
- Concernant les sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste (#menu li:hover ul, #menu li li:hover ul)
- repositionnement normal de l'élément grâce à left (auto)