28220 sujets

CSS et mise en forme, CSS3

Problème avec list-style-image: url() [resolu]

Hello a tous,

voila je suis en train de refaire un site en css et j'ai quelques problemes au niveau de l'affichage de mes puces dans mon menu :

voici la partie gauche de mon site avec les differents menu organisés en liste <dt><dl><dd>

à l'interrieur des balises hyperliens :


<br />
<table style="background:black; color:white;" width="250" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><dt><a href="#">Home Page</a></dt>
	<dt><a href="#">About H. Foreman</a></dt>
	<dt><a href="#">Some of our secrets</a></dt>
	<dt><a href="#">What the top chef say</a></dt>
	<dt><a href="#">What the food writers say</a></dt>
	&nbsp;</td>
  </tr>
  
  <tr>
    <td><dt><a href="#">Product listing</a>
	<dl><dd><ul><li><a href="#">Catering</a></li></ul></dd>
		<dd><ul><li><a href="#">Retail</a></li></ul></dd>
	</dl>
	</dt>	
	</td>
	  </tr>
	  
	  
  <tr>
    <td><dl><a href="#">Retail Pack</a>
	<dt><dd><ul><li><a href="#">Catering product</a></li></ul></dd>
		<dd><ul><li><a href="#">Retail Product</a></li></ul></dd>
		<dd><ul><li><a href="#">Bespoke kitchen products and traiteur</a></li></ul></dd>
	</dt>
	</dl></td>
  </tr>
  
  
  
  <tr>
    <td><dl><a href="#">Trade Reference</a></dl>
	<dl><a href="#">How to contact us</a></dl>
	<dl><dt><dd><ul><li><a href="#">Open an account</a></li></ul></dd></dt></dl></td>
  </tr>
</table>




ensuite la feuille de style : 






body {
font:Verdana 12px white;
}

header {
color:white;
}

a:hover {
color:red;
text-decoration:none;
}
	
a {
font-family: Verdana sans-serif;
font-size:12px;
color:#ffffff;
text-decoration:none;
}

li a {
list-style-image::url("pictures/button.gif");
list-type-type:none;
}
	 
li a:hover {
list-type-type:none;
list-style-image:url("pictures/button_on.gif");
}



Je ne comprends pas pourquoi mes puces personnalisees ne s'affiche pas ?
Modifié par Buzz (06 Apr 2005 - 12:51)
la forme exacte est :
<dl>
<dt>...</dt>
<dd>...</dd>
.........
</dl>

si tu met les balises n'importe comment, c'est normal que ça bug Smiley lol
en plus, je ne vois pas la raison qui te fait mettre une liste mal formée dans une liste mal formée Smiley lol

dans ton code HTML je dirais qu'il y a 80% de balises inutiles.
Smiley nimp ... Merci pour le compliment mais ce n'est pas vraiment cela qu'on attends d'un moderateur mais plutot essayer de me donner des pistes pour resoudre mon probleme d'affichage de puces
Administrateur
Buzz a écrit :
Smiley nimp ... Merci pour le compliment mais ce n'est pas vraiment cela qu'on attends d'un moderateur mais plutot essayer de me donner des pistes pour resoudre mon probleme d'affichage de puces

Ça tombe bien, il n'est pas modérateur.

Mais en passant, un modérateur est là pour "modérer" et pas (obligatoirement) pour répondre aux questions.

D'ailleurs, je ne vais pas avoir le temps non-plus. Par contre, je te modifie ton titre car là il ne signifie pas grand chose Smiley confus

PS : pourrais-tu montrer un exemple en ligne de ton problème, ou une capture-écran ? Parce que là il est difficile de se faire une idée du problème sans recopier le code chez soi... et peu de membres vont le faire Smiley ohwell
Modifié par Raphael (05 Apr 2005 - 18:09)
Bonsoir Buzz Smiley smile

anthony n'est pas modérateur, il a sérieusement répondu à ta question.
Si ta page est truffée d'erreurs, personne ne pourra t'aider. Commence par nettoyer tout ce qui ne va pas et si le bug persiste, il sera plus facile d'en trouver la cause.

Merci de bien vouloir passer par les règles du forum et de rester un minimum aimable avec les personnes qui tentent de t'aider Smiley cligne

Cordialement !
Un modérateur Smiley smile

Edité : Grillé Smiley lol
Modifié par dominique (05 Apr 2005 - 18:12)
Ok j'avais pas verifie (sorry pour les moderateurs .), a part savoir maintenant que j'ai un code pourri (je le savais deja puisque je bosse sur la version de quelqu'un d'auter donc je ne maitrise pas tout les parametres du projet) je ne suis pas plus avance ....

Bref, ben si tu as le temps raf regarde voir ce petit probleme, je suis sur que la solution n'est ps bien loin

plus
Buzz a écrit :


Je ne comprends pas pourquoi mes puces personnalisees ne s'affiche pas ?


sans dout parce que tu appliques ton style à des liens et pas à des item de liste


li a {
list-style-image::url("pictures/button.gif");
list-type-type:none;
}

li a:hover {
list-type-type:none;
list-style-image:url("pictures/button_on.gif");
}



Comme tu vois on essaye quand même de te répondre. Je trouve néanmoins ta réaction à la remarque d'anthony particulièrement mal venue.

++
D'un autre côté, si tu veux des puces qui changent de couleur au survol, tu n'auras pas le choix de le déclarer sur l'élément « a » puisque IE ignore le :hover appliqué à autre chose qu'un « a ».

Solution : une puce en background...

ul {
   list-style-type: none;
}

ul li a { 
   background: transparent url(images/bullet.gif) top left no-repeat; 
   padding: 0 0 0 18px; 
}

ul li a:hover { 
   background: transparent url(images/bullethover.gif) top left no-repeat; 
   text-decoration: none; 
}

Et si tu veux une liste imbriquée :

#nested ul ul li a { 
   background: transparent url(images/square.gif) top left no-repeat; 
}

#nested ul ul li a:hover { 
   background: transparent url(images/squarehover.gif) top left no-repeat; 
   text-decoration: none; 
}

Note : la propriété list-type-type n'existe pas.

li a {
list-style-image::url("pictures/button.gif"); [b][#red]/* ici, seulement deux points entre la propriété et sa valeur */[/#][/b]
[b][#red]list-type-type:none;[/#][/b]
}

li a:hover {
[b][#red]list-type-type:none;[/#][/b]
list-style-image:url("pictures/button_on.gif");
}
Administrateur
Stephan a écrit :
D'un autre côté, si tu veux des puces qui changent de couleur au survol, tu n'auras pas le choix de le déclarer sur l'élément « a » puisque IE ignore le :hover appliqué à autre chose qu'un « a ».

Voir exemple de menu ici Smiley cligne
Sujet clos
Aller à