Retour

Faire un menu simple horizontal réactif

Enregistrer-sous la page en lui donnant un titre et un nom de fichier

Structure HTML

  1. Faire les blocs structurants, leur donner un id (menu, content), une couleur d'arrière plan et une hauteur pour menu
  2. Mettre du contenu 
    • dans menu une suite d'items qui seront des liens 
    • dans content du texte, paragraphes, titres, listes ol et ul,  listes imbriquées, liens...
  3. Repositionner les blocs

CSS

  1. Règles à appliquer partout
    • Supprimer le soulignement pour tous les liens
    • Mettre tous les margin et paddings à zéro pour toutes les listes ol et ul
  2. Règles pour la div menu
    • Supprimer les puces dans  ul
    • Faire flotter à gauche les li
  3. Travailler dans menu a
    • type block
    • dimensions 100x22 px
    • bordure provisoire plein 1 px, ce qui nous permet de voir pour centrer ul par un margin gauche
    • padding haut et gauche de 5px pour centrer le texte
    • couleurs texte et arrière plan
  4. Travailler l'état survolé du menu a:hover en changeant les couleur de texte et d'arrière plan
  5. Travailler les bordures de a et a:hover (ici cannelure 3px pour a et arrête 3px pour a:hover de la couleur du texte)
  6. Règles pour la div content
    • Donner un padding gauche de 40 px aux listes ol et ul
    • Justifer le texte des paragraphes
    • Donner un padding de 10px partout