CSS - Modifications Menu Gauche

 Blog4ever - CSS Modèle 5 
 Blog4ever - CSS Modèle 5 

Pour faire suite aux précédents articles je vous présente mes modifications personnelles apportées au code CSS du menu de gauche de BRIC A BRAC.
Ceci ne tient pas compte de la décoration de la page d'accueil à l'occasion du concours de Noël.



Mes modifications du menu de gauche




Création d'un espace intérieur gauche de 2px pour dégager le texte des éléments de la bordure.

#menu_gauche ul{
margin: 0 0 0 0;
padding: 0 0 0 2px;        /* 2px marge int Gche */
list-style-type : none;
}




Création d'un espace intérieur gauche de 2px pour dégager le texte des éléments de la bordure.

#menu_gauche ul li{
margin: -1px 0 0 0;
padding: 0 0 0 2px;         /* 2px marge int Gche */
border: 1px solid #415680;
background: #0E1A32;
width: 170px;
}




Création d'un espace intérieur gauche de 2px pour dégager le texte des éléments de la bordure.

#menu_gauche ul li a{
background: #0E1A32;
padding: 3px 0 3px 2px;    /* 2px marge int Gche */
margin: 0 0 0 0;
width: 170px;
line-height: 25px;
text-decoration: none;
font: 10pt Trebuchet MS;
}




Règle qui agit sur les éléments du menu quand ils sont survolés par la souris.
  1. changement de la couleur du fond
  2. espace gauche agrandi à 5px pour créer un décalage sur la droite
  3. changement de police des caractères

#menu_gauche ul li a:hover{
background: #FDD5A8;      /* change couleur du fond */
margin: 0 0 0 5px;                    /*5px marge int Gche */
line-height: 25px;
padding: 3px 0 3px 0;
font: 11pt Comic Sans MS;   /*changement police */
}




Modifications apportées à la régle des titres du menu de gauche :
  1. une marge extérieure gauche de 2px pour alignement
  2. changement de la couleur du fond
  3. changement de la couleur de la police des caractères
  4. ajustement de la largeur à 172 px

#menu_gauche h2{
margin: 0 0 0 2px;                     /* 2px marge ext. gauche */
background: #FCFE9C; >       /* modif. couleur de fond */
border: 1px solid #415680;
color: #FF6600;                       /* modif. couleur caractères */
width: 172px;                           /* +2px en largeur */
text-align: center;
font: bold 11pt Trebuchet MS;
padding: 5px 0 5px 0;
}















18/12/2007
1 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres