/* 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;
}
</style>
/* Le menu lui-même (sémantiquement correct)
<div id="nav">
<ul id="menu">
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About</a></li>
<li id="time"><a href="#">Time</a></li>
<li id="date"><a href="#">Date</a></li>
</ul>
</div>
*/
