Menu horizontal a images réactives en CSS

daoro — Sat, 03 Nov 2007 21:29:38 +0000
/* Pour le code xhtml voir plus tout en bas */
/******** MENU ********/
#nav {
height: 25px !important;  /* Hauteur de la barre de menu*/
background: url(images/bg_barre.png) repeat-x; /* Fond d'écran de la barre' */
padding: 0 0 0 12px; /* Marge interne pour décaler les boutons et afficher la barre. Taille = (largeur totale - largeur des boutons)/2 */
border-right: 1px #e7e2cb solid; /* Liaison header <--> contenu */
border-left: 1px #e7e2cb solid;
}
 
#menu {
margin: 0;
width: 776px; /* Taille des boutons */
height: 25px; /* Hauteur de mes boutons */
list-style: none; /* Ne pas afficher les puces */
display: inline; /* Mode en ligne */
overflow: hidden; /* Si le texte sort du cadre, ne pas l'afficher*/
text-indent: -1000px; /* On fait disparaitre le texte en décalant de 1000px la première ligne. Il sort du cadre, et disparait */
}
 
#menu li {
margin: 0; 
padding: 0;
list-style: none; /* cf. ci-dessus, nécessaire pour un affichage correct */
display: inline;
}
 
#menu a {
float: left;
padding: 0;
overflow: hidden;
width: 194px !important; 
}
 
#menu a:hover {
background-position: 0 -25px; /* Décalage pour faire réagir l'image au survol de la souris */
}
 
 
/******* ITEMS DU MENU ******/
#home a {
height: 25px; /* Hauteur du bouton */
width: 194px; /* Largeur du bouton */
background: url(images/home.png) top left no-repeat; /* Image du bouton */
}	
 
#about a {
height: 25px;
width: 194px;
background: url(images/about.png) top left no-repeat;
}	
 
#time a {
height: 25px;
width: 194px;
background: url(images/time.png) top left no-repeat;
}
 
#date a {
height: 25px;
width: 194px;
background: url(images/date.png) top left no-repeat;
}


/* Le menu lui-même (sémantiquement correct) 


Home
About
Time
Date


*/
[css] [html] [images réactives] [menu] [xhtml]
Posteet: Menu,css

Menu horizontal a images réactives en CSS
