probléme de hover

Version imprimable

probléme de hover

Bonjour,

Afin de créer un systéme de developper/réduire j'ai créer une série de liste du modéle suivant :
Code:

1 2 3 4 5 6 7 <ul> <li class="liste ouvrir">Plus de détails :</li> <li class="liste objet">plan d action co,</li> <li class="liste objet">coaching.</li> <li class="liste fermer">moins de détails :</li> </ul>
chaque liste commence et se finis par un élément ouvrir et fermer, a terme ses deux éléments me servent de boutons...
j'ai donc créer un style rollover gràce au css avec une images qui change sur chacun de mes "boutons" :
Code:

1 2 3 4 5 6 7 8 9 10 <style type="text/css"> body { behavior : url(../../Scripts/csshover.htc) ; } li{ list-style : none ; } li.objet{ padding-left : 25px ; background : url(../../images/puce.gif) left 0.1em no-repeat ;} li.ouvrir{ padding-left : 25px ; font-size : 0.8em ; background : url(../../images/dev1.gif) left 5px no-repeat ;} li.ouvrir:hover { font-weight : bold ; background : url(../../images/dev2.gif) left 5px no-repeat ;} li.fermer{ padding-left : 25px; font-size : 0.8em ; background : url(../../images/red1.gif) left 5px no-repeat ;} li.fermer:hover { font-weight : bold ; background : url(../../images/red2.gif) left 5px no-repeat ;} </style>
Mon probléme, est que quel que soit l'élement que je survol (fermer ou ouvert), l'image qui apparait est toujour celle de fermer:evilred: ...

J'éspére que j'ai été clair, et qu'une solution existe.

30/05/2007, 16h36
Nesmontou

Salut, il faut fermer tes balises <li>

Code:

</li>

Bon développement ;)
30/05/2007, 16h51
leto02

Alors j'ai fermé mes balises <li></li> (j'ai éditer mon code ci-dessus), mais ça ne change rien a mon probléme...

sinon est-ce indispensable de fermé les balises <li>, juste mieux ou égale ?
30/05/2007, 22h54
1407.
deja, tu pourrais inscrire le code de la facon correcte... ;)
Code:

1 2 3 4 5 6 7 <ul> <li class="ouvrir">Plus de détails :</li> <li class="objet">plan d action co,</li> <li class="objet">coaching.</li> <li class="fermer">moins de détails :</li> </ul>
et t'as pas besoin de ca dans ton CSS puisque tu donne une classe a chaque partie de ta liste de toutes facons, tu peux donc supprimer

Code:

li{ list-style : none ; }
31/05/2007, 15h25
leto02

L'exemple que je donne est une simplifcation d'une page plus complexe, j'ai essayé de réduire le code au maximum histoire de ne garder que se qui concerne le probléme, a terme j'aurais besoins d'une classe du type "<li class="liste fermer">"...

Néanmoins, j'ai tester en surprimant liste de ma classe mais le probléme demeure.

je met un lien vers contenant mon petit essai http://www.groupe-arsenal.fr/test.zip
31/05/2007, 15h35
Candygirl

Citation:

Envoyé par leto02

Néanmoins, j'ai tester en surprimant liste de ma classe mais le probléme demeure.

je met un lien vers contenant mon petit essai http://www.groupe-arsenal.fr/test.zip

Euh, perso je ne constate pas le problème énoncé dans le zip qu tu donnes en lien ?! J'ai bien un over avec le +.

Enfin tu aurais du préciser que le problème n'apparaît que sur IE ;)

Ajouter un doctype valide tout en haut de ta page devrait aider IE à interpréter ton code et tes css de manière standard.

D'autre part tu as un

Code:

</head><head>

de trop avant ta déclaration de css et un html à la fin
01/06/2007, 09h31
leto02

alors, j'ai effectué les opérations conseillé (j'ai mis a jour mon zip), et constaté qu'effectivement le probléme est propre à ie :evilred: ce qui me fait craindre qu'il n'y est pas de solution ...
heu pour les doc types que je ne connaissait pas , lesquels sont les plus adapté a une page combinant css et javaScript?
01/06/2007, 09h56
Candygirl
Citation:

Envoyé par leto02

ce qui me fait craindre qu'il n'y est pas de solution ...

Ben non, le doctype est justement la solution ;)

Citation:

Envoyé par leto02

heu pour les doc types que je ne connaissait pas , lesquels sont les plus adapté a une page combinant css et javaScript?

C'est ta manière de coder le contenu de ton document qui va déterminer le doctype: html, xhtml, utilisation d'un frameset,...

Si tu as toujours coder un html "traditionnel" l'utilisation du doctype
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
sera probablement le moins contraignant et le plus adapté.

A l'autre extrêmité, si tu es prêt à aller vers un codage plus rigoureux tu as le xhtml1.0 strict :
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
A toi de voir... Mais de toute manière, quelque soit le doctype choisi, tu peux tester tes pages sur le validateur, t'assurer que ton codage soit conforme aux prescriptions du doctype choisi et ce qui te permettra de détecter bien des erreurs qui peuvent être source de disfonctionnement.

Malgrés tous vos conseil et les nouveau trucs qu'ils m'ont appris, mon probléme demeure, voici donc ma nouvelle page compléte :
ce code est passé avec succés a tous les validateurs (css et XHTML 1.0 Transitional),

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title> test </title>
		<style type="text/css">
			body { behavior : url(csshover.htc) ; }
			li{ list-style : none ; }
			li.objet{ padding-left : 25px ; background : url(puce.gif) left 0.1em no-repeat ;}
			li.ouvrir{ padding-left  : 25px ; font-size : 0.8em ;  background : url(dev1.gif) left 5px no-repeat ;}	
			li.ouvrir:hover { font-weight : bold ;  background : url(dev2.gif) left 5px no-repeat ;}
			li.fermer{ padding-left : 25px; font-size : 0.8em ;  background : url(red1.gif) left 5px no-repeat ;}
			li.fermer:hover { font-weight : bold ;  background : url(red2.gif) left 5px no-repeat ;}
		</style>
	</head>
	<body>	
		<ul>
			<li class="liste ouvrir">Plus de details :</li>
			<li class="liste objet">plan d action co,</li>
			<li class="liste objet">coaching.</li>
			<li class="liste objet">plan d action co,</li>
			<li class="liste fermer">moins de details :</li>
		</ul>
	</body>
 
</html>

Bon j'ai supposé d'aprés se que j'ai lu que je code en xhtml 1.0...

Citation:

Envoyé par leto02

mon probléme demeure

Sur IE6, mais sur IE7, le doctype a permis de règler le problème.

Donc, vraisemblablement, le csshover.htc doit gérer mal quelque part le problème.

En donnant un poids plus élevé à la règle du ouvrir:
Code:

1 2 3 ul li.ouvrir{ padding-left : 25px ; font-size : 0.8em ; background : url(dev1.gif) left 5px no-repeat ;} ul li.ouvrir:hover { font-weight : bold ; background : url(dev2.gif) left 5px no-repeat ;}
on s'aperçoit que c'est alors ce style qui est appliqué aussi au "fermer". Donc vraissemblablement le csshover.htc ne fait pas la différence entre les deux li :(

Perso, je rajouterais un lien autour de mon texte et ferais l'effet du hover dessus plutôt que de me prendre la tête avec le csshover.htc