18041 sujets

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

Rollover css

Bonjour,
je tente de faire un rollover en css, mais celui ci ne fonctionne pas parfaitement...
http://www.netonly.net/test/
les image de rollover ne sont pas callées...

Voici mon html : 
<?xml version="1.0" encoding="UTF-8"?>
<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" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="nav-box">
        	<ul>
        	  <li><a href="index.html" id="accueil"><img src="_images/header/logo_gris.gif"></a></li><li><a href="index.html?concept" id="concept"><img src="_images/header/concept_rollout.gif"></a></li><li><a href="index.html?conseils" id="conseils"><img src="_images/header/conseils_rollout.gif"></a></li><li><a href="index.html?videos" id="videos"><img src="_images/header/videos_rollout.gif"></a></li><li><a href="index.html?prestataires" id="prestataires"><img src="_images/header/prestataires_rollout.gif"></a></li><li><a href="index.html?faq" id="faq"><img src="_images/header/faq_rollout.gif"></a></li><li><a href="index.html?contact" id="contact"><img src="_images/header/contact_rollout.gif"></a></li>
        	</ul>
    	</div>
	</body>
</html>


Voici mon css :
body {
	margin-left: 0px;
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 0px;
}
img {
	padding: 0px;
	margin: 0px;
}

#nav-box {
	background-image: url('_images/header/fond.gif');
	background-repeat: repeat-x;
	list-style-type: none;
	line-height: 50px;
	height: 50px;
	text-align: center;
}
#nav-box li {
	padding: 0px;
	margin: 0px;
	
}
#nav-box ul li {
	display: inline;
}
#nav-box ul li a#concept {
	background-image: url('_images/header/concept_rollover.gif');
}
#nav-box ul li a#concept:hover {
	visibility: visible;
}
#nav-box ul li a#concept:hover img {
	visibility: hidden;
}
#nav-box ul li a#conseils {
	background-image: url('_images/header/conseils_rollover.gif');
}
#nav-box ul li a#conseils:hover {
	visibility: visible;
}
#nav-box ul li a#conseils:hover img {
	visibility: hidden;
}
#nav-box ul li a#prestataires {
	background-image: url('_images/header/prestataires_rollover.gif');
}
#nav-box ul li a#prestataires:hover {
	visibility: visible;
}
#nav-box ul li a#prestataires:hover img {
	visibility: hidden;
}
#nav-box ul li a#videos {
	background-image: url('_images/header/videos_rollover.gif');
}
#nav-box ul li a#videos:hover {
	visibility: visible;
}
#nav-box ul li a#videos:hover img {
	visibility: hidden;
}
#nav-box ul li a#faq {
	background-image: url('_images/header/faq_rollover.gif');
}
#nav-box ul li a#faq:hover {
	visibility: visible;
}
#nav-box ul li a#faq:hover img {
	visibility: hidden;
}
#nav-box ul li a#contact {
	background-image: url('_images/header/contact_rollover.gif');
}
#nav-box ul li a#contact:hover {
	visibility: visible;
}
#nav-box ul li a#contact:hover img {
	visibility: hidden;
}


merci pour votre aide !
merci pour ta réponse mais en fait je suis obligé de fonctionner avec des images différentes pour le rollover...
Je ne peux faire autrement...

encore merci
Juste une précision,
en fait cela marche très bien sous ie.
Par contre sur safari... les images sont toutes décalées vers le bas.
Savez vous d'ou ça peut provenir?

Merci
Bonjour,

1. Virer le prologue XML.
2. Rajouter un Doctype en bonne et due forme.

Une fois ces deux étapes réalisées, on a une page HTML valide qui sera rendue en mode Standard (et non pas en mode Quirks) par les navigateurs. On pourra alors passer à la suite:

3. Rajouter les attributs alt qui vont bien sur les images.

À ce stade on a une page de test avec un menu accessible (pour peu qu'on ne flingue pas l'accessibilité par la suite Smiley cligne ).

4. Simplifier le code CSS en virant tout ce qui concerne le rollover bricolé:

#nav-box {
	background-image: url('_images/header/fond.gif');
	background-repeat: repeat-x;
	height: 50px;
	text-align: center;
}
#nav-box li {
	padding: 0px;
	margin: 0px;
	display: inline;
}


5. Faire les rollovers (changement d'image) en Javascript.

Et voilà un rollover propre.


Il y a aussi une solution très classique et largement documentée sur le Web pour des rollovers «full CSS», mais que je ne détaille pas car ils sont moins accessibles et pas tellement plus rapides à mettre en place.
Modifié par Florent V. (09 Feb 2008 - 17:04)
ok, merci bcp pour ton aide.
Les modifs sont faites.
Je verrai plus tard pour le javascript ! Je pensais que c'etait mieux en css.

Je rencontre 1 nouveau probleme :
- j'observe un decallage suppérieur un 1px en haut sur les navigateurs firefox et safari.

upload/1669-Image2.png

voici un lien : http://www.netonly.net/test/

voici mon code HTML : 
<!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" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="nav-box">
        	<ul>
        	  <li><a href="index.html" id="accueil"><img src="_images/header/logo_gris.gif" alt="accueil"></a></li><li><a href="index.html?concept" id="concept"><img src="_images/header/concept_rollout.gif" alt="concept"></a></li><li><a href="index.html?conseils" id="conseils"><img src="_images/header/conseils_rollout.gif" alt="conseils"></a></li><li><a href="index.html?videos" id="videos"><img src="_images/header/videos_rollout.gif" alt="vidéos"></a></li><li><a href="index.html?prestataires" id="prestataires"><img src="_images/header/prestataires_rollout.gif" alt="prestataires"></a></li><li><a href="index.html?faq" id="faq"><img src="_images/header/faq_rollout.gif" alt="faq"></a></li><li><a href="index.html?contact" id="contact"><img src="_images/header/contact_rollout.gif" alt="contact"></a></li>
        	</ul>
    	</div>
	</body>
</html>


Voici ma feuille de style :
body {
	margin-left: 0px;
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 0px;
}
img {
	padding: 0px;
	margin: 0px;
	border: 0px;
}

#nav-box {
	background-image: url('_images/header/fond.gif');
	background-repeat: repeat-x;
	height: 50px;
	text-align: center;
}

#nav-box li {
	padding: 0px;
	margin: 0px;
	display: inline;
}


De plus quand je fait un retour ligne dans mon code html de la maniere suivante, j'observe un décalage horizontal entre les images est ce normal ?
<ul>
        	  <li><a href="index.html" id="accueil"><img src="_images/header/logo_gris.gif" alt="accueil"></a></li>
        	  <li><a href="index.html?concept" id="concept"><img src="_images/header/concept_rollout.gif" alt="concept"></a></li>
        	  <li><a href="index.html?conseils" id="conseils"><img src="_images/header/conseils_rollout.gif" alt="conseils"></a></li>
        	  <li><a href="index.html?videos" id="videos"><img src="_images/header/videos_rollout.gif" alt="vidéos"></a></li>
        	  <li><a href="index.html?prestataires" id="prestataires"><img src="_images/header/prestataires_rollout.gif" alt="prestataires"></a></li>
        	  <li><a href="index.html?faq" id="faq"><img src="_images/header/faq_rollout.gif" alt="faq"></a></li>
        	  <li><a href="index.html?contact" id="contact"><img src="_images/header/contact_rollout.gif" alt="contact"></a></li>
        	</ul>


Merci encore !
Pour le décalage que tu observes, je ne suis pas sûr d'avoir cerné de quoi tu parles. Par contre, quelque chose qui risque de te jouer des tours ce sont les styles par défaut de la liste ul. Tu pourrais utiliser:
#nav-box ul {margin:0; padding: 0;}

Pour le dernier point, lire ceci:
Impact sur le rendu de la mise en forme du code HTML
Modifié par Florent V. (09 Feb 2008 - 18:21)
Sujet clos
Aller à