Aide pour Menu simple "navTop"

Bonjour,
j'ai récupéré sur ce site un code simple pour faire un menu avec une image de survol qui fonctionne très bien, mais voilà, j'aimerais qu'une fois dans la bonne page mon image qui se cache en dessous apparaisse, et cela sans survol de la souris ... (voir les 2 images Ci-dessous.



Voici le code, je suis débutant en CSS, j'ai beau essayer d'ajouter du code mais point de résultats

PS : je suis dans la lecture du livre "CCS 2" de Raphaël...

d'avance merci pour m'aider à créer ce code

Philippe

/*  ------------------------------------------
/*  Navigation survol CSS
/*  ------------------------------------------
*/
#navtop {
	position: relative;
	width: 700px;
	height: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
	background: #F9D966 url(images/nav_survol.gif) left top no-repeat;
}

#navtop ul, #navtop li {
	margin:0;
	padding: 0;
	list-style: none;
	}
#navtop ul {
	position: absolute;
	height: 25px;
	width: 700px;
	left: 0px;
	list-style: none;
}

#navtop li {
	float: left;
	list-style: none;
}

#navtop li a { 
	display: block;  
	height: 25px;
	width: 135px;
	color: #333;
	font: 15px/18px "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	text-decoration: none;
	border-left: 1px solid #fff;
	text-align: center;

}
#navtop li a.last {
border-right: 1px solid #fff;
}

#navtop a:hover {
color: #fff;
background: transparent url(images/nav_survol.gif) top left no-repeat;
}

#navtop a#nav1:hover {
background-position: -1px -25px;
}
#navtop a#nav2:hover {
background-position: -136px -25px;
}
#navtop a#nav3:hover {
background-position: -271px -25px;
}
#navtop a#nav4:hover {
background-position: -406px -25px;
}
#navtop a#nav5:hover {
background-position: -541px -25px;
}

j'ai trouvé un menu bcp plus simple :

#menu a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 121px ;
	line-height: 26px ;
	color: #000 ;
	text-indent: 10px ; /* On décale le texte de 10px du bord gauche */

	text-decoration: none ;
	background: url(images/bg_menu.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px ;
}

#menu  a:hover
{
	background: url(images/bg_menu.gif) no-repeat 0 -27px ; /* Et ici on décale l'image du background de 27px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0px ;
}
#menuon
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 121px ;
	line-height: 26px ;
	color: #000 ;
	text-indent: 10px ; /* On décale le texte de 10px du bord gauche */

	text-decoration: none ;
	background: url(images/menu_on.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px ;
}

Mais je n'arrive pas à fusionner les 2 ...

Personnes ici pour m'aider ???
Modifié par Plaisir (03 Mar 2007 - 15:46)

Heu... ben disons que du code CSS ça ne se « récupère » pas comme ça, en prenant un bout de code, et en l'utilisant dans sa feuille de style. Les tutoriels qui proposent du code le font généralement à des fins pédagogiques. Si tu ne comprends pas bien le code, il ne te servira à rien de le copier pour le réutiliser tel quel...

Et puis, un scoop : les CSS ne se baladent jamais tout seuls dans la nature, mais s'appliquent à du code HTML (dans la plupart des cas). Où est le code en question ?

Au final, tu veux que la deuxième image de fond soit utilisée à la fois pour les items de menu au survol et pour l'item de menu correspondant à la page ou à la rubrique en cours ?

C'est simple : donne une classe à cet item de menu.

[b]HTML :[/b]
<ul id="menu">
	<li><a href="...">Page 1</a></li>
	<li><a href="..." class="courante">Page 2</a></li>
	<li><a href="...">Page 3</a></li>
</ul>

[b]CSS :[/b]
ul#menu li a {
	background-position: 0 0;
}
ul#menu li a:hover,
ul#menu li a:focus,
ul#menu li a:active,
ul#menu li a.courante {
	background-position: 0 -27px;
}

Note : la pseudo-classe :active ne désigne pas le lien « actif » (c'est à dire dont l'attribut href pointerait vers la page courante), mais l'état activé (clic de la souris, validation au clavier) du lien. On l'utilise pour obtenir le même effet que :focus, mais avec Internet Explorer.