18041 sujets

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

Problème liste à puces CSS personnalisées.

Bonsoir, je tourne en rond depuis deux jours, j'ai de bonnes bases mais là, c'est un mystère.
Sous Dreamweaver en aperçu tout est ok, en ligne cela ne marche plus.
Le principe est simple, l'utilisation de "Sprites", un seul PNG et différentes coordonnées.
Dans l'exemple ci-dessous, même avec les mêmes coordonnées, seule la première puce est visible, une idée ? Merci d'avance.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/v2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="mcatalogue">
<li id="itemA"><a href="#"></a></li>
<li id="itemB"><a href="#"></a></li>
<li id="itemC"><a href="#"></a></li>
</ul>
</body>
</html>




@charset "utf-8";
/* CSS Document */
ul#mcatalogue {
	margin:0;
	padding:0;
	list-style-type:none;
	top: 9px;
	left: 9px;
	position: relative;
	z-index: 1;
}
ul#mcatalogue li {
	margin:0 0 5px 0;
	padding:0;
}
	
ul#mcatalogue li a {
	display:block;
	width:122px;
	height:70px;
}
#itemA a {
background:url('../images/Catalogue.png') no-repeat 0px 0px;
}
#itemA a:hover {
background:url('../images/Catalogue.png') no-repeat 0px -71px;
}
#itemB a {
background:url('/images/Catalogue.png') no-repeat 0px 0px;
}
#itemB a:hover {
background:url('/images/Catalogue.png') no-repeat 0px -71px;
}
#itemC a {
background:url('/images/Catalogue.png') no-repeat 0px 0px;
}
#itemC a:hover {
background:url('/images/Catalogue.png') no-repeat 0px -71px;
}

Vraiment je ne comprend pas...
Modifié par XFranck (26 Jan 2011 - 20:04)
Peut-être que le chemin vers ton image n'est pas toujours le même:

url('../images/Catalogue.png') != url('/images/Catalogue.png')

Si ce n'est pas ça, ce serait plus facile de voir le problème en ligne.
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
Finalement auprès avoir tourné en rond j'ai ma réponse, aussi étrange que cela parraise, la cause est mon hébergeur, chez X cela fonctionne parfaitement, chez Y problème.
Quelle en est la cause ? Je n'en sais rien du tout.
Je tais les noms car les deux me rendent des services différents.

Mes excuses au modérateur de ne pas avoir respecter les règles du forum sur la présentation du code.
Modifié par XFranck (26 Jan 2011 - 20:02)
Sujet clos
Aller à