Sujet Précédent Sujet Suivant

Problème : list-style-image

Résolu/Fermé
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 16 oct. 2013 à 00:34
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 17 oct. 2013 à 14:30
Bonsoir,

Entre autres images, j'en ai trois qui intéressent la question que je pose :
- une petite flèche bleue (en forme de triangle) : fleche.png
- une autre même taille mais verte : flechev.png
- une autre même taille mais grise : flecheg.png

fleche.png (bleue) est celle que j'utilise pour "pointer" les éléments de liste à différents endroits d'un site. Ça, c'est bon. Une liste particulière (récapitulative) recense les différents éléments possibles dont certains sont obligatoires (je voudrais la flèche verte) et d'autres optionnels (la grise).

j'ai essayé ça : 

<style type="text/css">
 ...
#recap ul {list-style-image: url(/img/fleche.png);}
 ...
</style>
</head>

<body>
...
<div id="recap">
   <script language="javascript" type="text/javascript">
     document.recap.ul.list-style-image = "url(/img/flechev.png)";
   </script>
   <ul>
      <li> texte...
      <li> texte...
      <li> texte...
      <li> texte...
      <li> texte...
      <script language="javascript" type="text/javascript">
        document.recap.ul.list-style-image = "url(/img/flecheg.png)";
      </script>
      <li> texte...
      <li> texte...
      <li> texte...
      <li> texte...
      <li> texte...
      <li> texte...
   </ul>
</div>

Et ça ne marche pas. A la place de javascript, j'ai essayé de redéfinir les styles avec 
<style type="text/css">
  #recap ul {list-style-image: url(/img/flechev.png);}
</style>

Ça ne marche pas non plus. Je suis sûr et certain de faire une erreur mais je ne sais pas comment je pourrais faire alors j'essaye en vain différents trucs.

Quelqu'un a-t-il une idée ?



3 réponses

Réponse 1 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
17 oct. 2013 à 01:13
Salut,

La façon de procéder a été donnée dans la première réponse : il faut plusieurs classes. C'est la base du css. 


<style>
li { list-style-type: disc; }
li.obligatoire { list-style-type: circle; }
li.optionnel { list-style-type: square; }
</style>

<div id="recap">
	<ul>
		<li> 0. texte... </li>
		<li class="obligatoire"> 1. texte... </li>
		<li class="optionnel"> 2. texte... </li>
		<li class="optionnel"> 3. texte... </li>
	</ul>
</div>
1
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 137
17 oct. 2013 à 14:30
Merci beaucoup, ça c'est une réponse claire.
J'appliquais les styles à UL et non à LI.
Merci. Question résolue.
0
Réponse 2 / 3
nocomplain
16 oct. 2013 à 06:00
Bonjour,
si vous voulez plusieurs types de flèches il faut plusieurs classes.
Je voit aucunement l'intérêt de votre javascript (à moins de faire quelque chose qui doit réagir en fonction d'un événement, dans ce cas il faut mettre cet événement ainsi que son listener) et de toute façon votre syntaxe est fausse: vous devez cibler un élément par son id(getElementById()) ou plusieurs par son nom de balise(getElementByTagName()).


Voici dess exemples:
http://www.coursweb.ch/javascript/dom-css.html

Mais bon si'l ne s'agit pas d'événementiel faites seulement plusieurs classes css ou id, éventuellement vous pouvez utiliser l'héritage en CSS pour avoir une classe parent et changer uniquement le curseur selon l'affichage désiré et tenant compte de l'ordre/organisation des balises.
0
Utilisateur anonyme
16 oct. 2013 à 07:28
+10
0
Réponse 3 / 3
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 137
16 oct. 2013 à 14:06
Merci pour votre réponse et, même après avoir lu la page correspondant au lien que vous m'avez indiqué, je ne vois toujours pas comment procéder.

Le code ci-dessous fonctionne normalement dans les autres listes du site. Or, le style s'applique à la balise UL et ce style va être rendu visible lors de l'affichage des LI. Là, plusieurs LI vont être affichées avec la flechev.png (admettons de 0 à 3 pour les éléments obligatoires) et pour les autres (de 4 à 9), il faudrait que ce soit flecheg.png (grise) qui soit utilisée pour désigner les éléments optionnels. Mais au moment où l'on passe du vert au gris, la balise UL est déjà définie et est en cours d'utilisation puisqu'on n'a pas encore, à ce niveau, rencontré de /UL.

C'est la raison pour laquelle j'avais pensé qu'à tel moment (le moment du changement de couleur) il fallait utiliser javascript pour modifier le style en cours d'utilisation afin que le reste de la liste utilise la même définition et les mêmes attributs (dont celui qui vient d'être nouvellement modifié : en gris).

Alors quant à la syntaxe, ce n'est pas un scoop qu'elle soit fausse, sinon je n'aurais pas dit que j'étais "sûr et certain de faire une erreur" et que mes essais étaient vains. Et je ne vois toujours pas, même en définissant plusieurs styles, comment déclencher le changement de couleur au sein d'une même balise UL ... /UL. 

<style type="text/css">
#recap ul {list-style-image: url(/img/flechev.png);}
</style>
</head>

<body>
...
<div id="recap">
   <ul>
      <li> 0. texte...
      <li> 1. texte...
      <li> 2. texte...
      <li> 3. texte...
      <li> 4. texte...
      <li> 5. texte...
      <li> 6. texte...
      <li> 7. texte...
      <li> 8. texte...
      <li> 9. texte...
   </ul>
</div>
0