18041 sujets

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

Menu avec sprite qui pose problème

J'ai crée un menu avec une image sprite. Ce menu s'affiche correctement lorsque je ne mets pas de doctype, mais très mal lorsque je mets n'importe quel doctype, du html 4.01 à xhtml strict ou html 5. Quelqu'un peut-il me dire d'où vient le problème ?

je joins le code html de ma page, et j'ai hébergé la photo sur un site pour que vous puissiez la tester en direct.

Concernant ce menu, pour une raison d'accessibilité, un autre menu sera dissimulé dessous s'il ne s'affiche pas au cas où l'utilisateur a désactivé les images, comme je l'ai lu ailleurs sur ce site très didactique.

Voici le code html de la page :


<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
 <link rel="stylesheet" media="screen" href="ecran.css" />



<style>
.menu-cl{overflow:hidden;width:800px;margin-left:0px;}

	.menu-cl a{
padding-left:0px;
	  width:160px;
	  height:40px;
	  float:left;overflow:hidden;

	  background:url("http://nsm04.casimages.com/img/2010/11/15//1011150923001218507119741.gif") ;background-repeat: no-repeat;}
	a.sh-qsn{background-position:-640px -40px;}
	a.sh-cgv{background-position:-480px -40px;}
	a.sh-articles{background-position:-320px -40px;}
	a.sh-contact{background-position:-160 -40px;}
	a.sh-accueil{background-position: 0px -40px;}
	a.sh-qsn:hover{background-position:-640px 0px;}
	a.sh-cgv:hover{background-position:-480px 0px;}
	a.sh-articles:hover{background-position:-320px 0px;}
	a.sh-contact:hover{background-position:-160 0px;}
	a.sh-accueil:hover{background-position:0px 0px;}
</style>


</head>
<body><div class="page">
<div class="header">
<div class="menu-cl" > 
<a class="sh-accueil" href="#"></a> 
<a class="sh-contact" href="#"></a> 
<a class="sh-articles" href="#"></a> 
<a class="sh-cgv" href="#"></a> 
<a class="sh-qsn" href="#"></a> </div></div>
<div class="separ"></div>
<div class="global">
<div class="content"></div>
<div class="sidebar"><div class="sharing-cl";><br>
<a class="sh-mail" href=""></a> 
<a class="sh-feed" href=""></a> 
<a class="sh-tweet" href=""></a> 
<a class="sh-face" href=""></a> 
<a class="sh-myspace" href=""></a> 
<a class="sh-favoris" href=""></a> </div></div></div>
<div class="footer"></div>
</div>
</body>
</html>

Modifié par boromir (21 Nov 2010 - 16:53)
ligne 20 tu as oublié de préciser l’unité en px

a.sh-contact{background-position:-160px -40px;}

ligne 40 supprime le ; pour que le code passe au w3c

<div class="sidebar"><div class="sharing-cl"><br>
ligne 20 tu as oublié de préciser l’unité en px

a.sh-contact{background-position:-160px -40px;}


ligne 40 supprime le ; pour que le code passe au w3c

<div class="sidebar"><div class="sharing-cl"><br>

Modifié par adrien881 (15 Nov 2010 - 10:13)
merci beaucoup, c'est un oubli très bête mais qui change tout et que je ne voyais pas.
Merci mille fois, on cherchait ailleurs alors que c'était devant nous.
Et bravo aux créateurs et contributeurs de ce site très didactique.
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
A la modératrice :
Oui, merci pour ces consignes que je suivrai rigoureusement à l'avenir.
Salutations Smiley cligne
Sujet clos
Aller à