Mise en Forme des Éléments de Menu
Objectifs
À la fin de cette vidéo, vous saurez comment :
- Utiliser des marges et des paddings pour espacer les éléments de menu.
- Appliquer des images de fond aux éléments de menu et les positionner correctement.
- Utiliser les pseudo-classes :hover et :focus pour améliorer l'accessibilité.
Résumé
Apprenez comment styliser des liens et des menus en CSS pour une meilleure accessibilité et un rendu visuel professionnel.
Description
Dans cette leçon détaillée, nous abordons les techniques de stylisation des liens et des éléments de menu en utilisant CSS. Nous commençons par ajouter des marges entre les éléments de liste pour garantir un espacement uniforme, évitant ainsi des marges supérieures pour maintenir l'alignement.
Ensuite, nous faisons passer les liens en affichage bloc, permettant de cliquer sur toute la hauteur et la largeur du lien. Nous utilisons également des images de fond non répétées, alignées en haut et à gauche, tout en appliquant des paddings spécifiques pour afficher différentes parties de l'image selon les besoins.
Nous abordons aussi l'utilisation de l'élément span pour des mises en forme CSS plus poussées. Le tout est complété par des ajustements de padding et de positionnement relatif pour s'assurer que les images de fond se chevauchent correctement, surtout dans les coins arrondis.
Enfin, nous appliquons des styles au survol et au focus en utilisant des pseudo-classes CSS, garantissant une meilleure navigation pour les utilisateurs utilisant le clavier par préférence ou par nécessité.
Je me perds toujours dans les marges, les paddings et les positionnements!
Beaucoup de petites astuces, bienvenues.
Gros défaut: tous les écrans sont flous, et le son est exécrable.