Menu CSS en ligne avec roll-over

Bonjour,

J'essaye en vain d'avoir une image en roll over sur mon menu en ligne.
Voici le code de la feuille de style

#menuh {
	width: 770px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position:absolute;
	left: 0px;
	background-image: url(img/bg-menuh.jpg);
	background-repeat: no-repeat;
	background-position: left;
	
	}
#menuh ul {

	list-style-type: none;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px 0 0 270px; 
	margin: 0px;
	}
#menuh li {
display:inline;
	line-height: 40px;
	width: 120px;
	padding: 0;
	margin:0;
	text-decoration: none;
	color: #FFFFFF;
	padding: 0px 0 0 30px;

}

#menuh li a{
	width: 187;
	text-decoration: none;
	height: 40px;
	padding: 0;
	margin:0;
	text-decoration: none;
	color: #FFFFFF;
	padding: 0px 0 0 0px;
}

#menuh li a:link, #menuh a:active, #menuh a:visited {
color: #FFFFFF;
}

#menuh li a:hover {
	width: 100%;
	height: 40px;
	text-decoration: none;
	padding: 0px 0 0 0px;
	background-image: url(/img/menu_horizon_1pix.jpg);
	background-repeat: repeat-x;
	
}

et le code html

 <div id="menuh"> 
    <ul>
      <li><a href="http://www.google.com">Lien 1</a></li>
      <li><a href="http://www.google.com">Lien 2</a></li>
      <li><a href="http://www.google.com">Lien 3</a></li>
      <li><a href="http://www.google.com">Lien 4 plus long</a></li>
     
    </ul>
</div>

Sur l'image jointe, on voit les 4 liens (dont le 4ème plus large).
Le lien 2 est en rollover (c'est le résultat que je voudrais obtenir)

Je n'arrive pas à trouver mon erreur.

Pouvez-vous m'aider ?

Merci par avance

Lisa
Modifié par Lisa (16 Sep 2008 - 02:34)

Salut,

Difficile de constater avec uniquement ça comme éléments. Tu ne nous dis pas quel est le problème, donc difficile de t'aider. Aurais tu une page en ligne pour constater de visu ?

Sinon, tu as une petite erreur dans ta css :

#menuh li a{
	width: 187[#red]px[/#];

Mais pas sur que cela vienne de là.

Salut !

En fait, non je n'ai pas d'exemple en ligne.
Le problème est que le rollover ne s'affiche pas : pas d'image lorsque je passe la souris sur le lien.

Le seul exemple est sur l'image jointe (cliquer sur l'image rouge).

Merci par avance

Lisa

Question bête : ton problème d'affichage ne serait-il pas dû à une faute de frappe tout bête ?

#menuh li a:hover { background-image: url([#red][b]/[/b][/#]img/menu_horizon_1pix.jpg); }

Bonjour !

Oui, super !
C'est un premier bins de régler.

J'ai pas mal modifier le code, et j'ai mis en ligne la page html avec le code css intégré.
On voit bien ce que ça fait :
http://gitedureveur.com/tests/essaimenu.html

et ce que j'aimerai que ça fasse, c'est l'image jointe à ce message :

(je parle du roll over toujours).

Merci par avance pour votre aide.

Lisa

Bonjour,

Je ne sais pas à quoi sert la deuxième image en rollover de la même couleur qui pose problème et qui dépasse lors du survol mais pourquoi tu ne t'inspires pas du tutoriel d'Alsacréation car ton exemple lui ressemble étrangement ICI à moins bien sûr que tu ne l'ais pas vu, bien plus léger en code CSS d'ailleurs Je m'en suis inspiré aussi pour apprendre à mettre mes rollover image en ligne dans un bloc
Juste aussi pour te signaler qu'il te manque un <!Doctype...> en entête de ton code HTML
Modifié par Gil88 (17 Sep 2008 - 14:39)