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;
}


Sommaire

 Pages 
8












Article ajouté le 2007-12-18 , consulté 161 fois

Commentaires


lafaucheuse site : apreslamort.blog4ever.com/blog/index-179133.html | le 05/03/2008 à 20:37:06
Et bien moi ce blog, il me met le moral à -12... il est trop top! Ca fait 20 jours que j'ai crée le mien, et quand je vois celui-là ça me déprime. J'espère un jour arriver à faire le quart de ce que tu fais. Chapeau!

Poster un commentaire





http://
Merci de recopier le nombre présent à gauche dans la case de texte ci-dessous ( Pourquoi ? )



Liens

Voir les articles de la catégorie " Blog4ever "

Afficher une version imprimable de cet article
Retour aux articles