Travaux pratiques
TROISIÈME PARTIE
192
Variante : habillage d’un menu
Cette technique convient parfaitement pour habiller un menu de navigation, qu’on
codera comme à l’accoutumée sous forme d’une liste non ordonnée (

) d’éléments
(
• ) correspondant à ses entrées. Appliquer à ces balises les styles désirés produit
  alors le résultat de la figure 14-5.
  div#bloccadre { /* bords et pied de l’arrière-plan */
  background: url(bas.png) left bottom no-repeat;
  padding-bottom: 30px;
  }
  div#bloccadre p {
  margin: 0 30px 0 20px;
  }
  HTML
  
  
  

  
  

  Mon menu joli

  
  

  
  
  • Lien 1
  
  
  • Lien 2
  
  
  • Lien 3
  
  
  • Lien 4
  
  
  • Lien 5
  
  

  
  

  
  
  
  CSS
  body {
  font: 1em black verdana, sans-serif;
  }
  div#cadre { /* conteneur global et chapeau de l’arrière-plan */
  width: 230px;
  padding-top: 30px;
  background: url(haut.png) top left no-repeat;
  }
  div#bloccadre {/* bords et pied de l’arrière-plan */
  background: url(bas.png) bottom left no-repeat;
  padding-bottom: 30px;
  }