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;
}
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;
}
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;
}
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.
- changement de la couleur du fond
- espace gauche agrandi à 5px pour créer un décalage sur la droite
- 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 */
}
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 :
- une marge extérieure gauche de 2px pour alignement
- changement de la couleur du fond
- changement de la couleur de la police des caractères
- 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;
}
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;
}
