18073 sujets

Questions générales et questions de débutants

[Résolu] Rollover en CSS et rendus

Bonjour,

J'ai une question à laquelle je n'ai pas vraiment trouvé de réponse en parcourant le forum.
Je souhaite faire un menu horizontal avec un rollover qui provoque un changement d'image. Ce que j'ai écrit fonctionne bien sur Safari, Opera (Mac et Windows) et Firefox (Windows). En revanche, ça ne fonctionne bizarrement pas sur Firefox (Mac) et donc sur Camino - l'image "active" ne s'affiche pas, ni (moins bizarrement) sur Internet Explorer (Windows) - l'image "active" reste.

Je n'arrive pas trop à comprendre pourquoi, surtout que c'est la première fois que je vois une différence de rendu entre Firefox Mac et Firefox Windows...

Voici le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<style type="text/css" media="screen">
		/* <![CDATA[ */
			a {
				color: white;
				text-decoration: none;
			}
			
			ul, li {
				list-style-type: none;
				float: left;
				color: white;
				font-family: Verdana;
				text-align: center;
			}
			
			li {
				display: block;
				height: 40px;
				width: 120px;
				background: url(off.jpg) no-repeat;
				border: solid thin black;
				margin-right: 1em;
			}
			
			a:hover li {
				background: url(on.jpg) no-repeat;
			}
		/* ]]> */
		</style>
		
		<title>MENU HORIZONTAL</title>
		
	</head>
	
	<body>
		<ul>
			<a href="#"><li>MENU 1</li></a>
			<a href="#"><li>MENU 2</li></a>
			<a href="#"><li>MENU 2</li></a>
			<a href="#"><li>MENU 4</li></a>
		</ul>
	</body>
	
</html>


et la page en ligne : http://opentype.free.fr/menu.htm

Merci d'avance ! Smiley biggrin
Modifié par Opentype (17 Oct 2005 - 18:21)
Bonjour,

La première chose à faire quand quelque chose ne fonctionne pas est de prendre le temps de vérifier que le code html qu'on envoie est propre et sans erreur...

 
<ul>
<a href="#"><li>MENU 1</li></a>
<a href="#"><li>MENU 2</li></a>
<a href="#"><li>MENU 2</li></a>
<a href="#"><li>MENU 4</li></a>
</ul>


Ce code contiens: 6 erreurs

Ce qui t'aurais fais gagner beaucoup, beaucoup de temps

Jean-pierre
Oups, les balises sont effectivement inversées, sorry... C'est génial, ça ne marche plus nulle part une fois corrigé ! Smiley lol

Pas grave, je vais suivre soigneusement cette méthode.

Edit : il suffisait donc de remettre les balises dans le bon ordre, et d'écrire 
li a { ... }
et 
li a:hover { ... }

Une gentille réponse qui aurait tenu en une seule ligne... Smiley cligne
Modifié par Opentype (17 Oct 2005 - 18:40)
Sujet clos
Aller à