probléme de hover

**leto02** · 30/05/2007, 15h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

...

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

**Nesmontou** · 30/05/2007, 16h36

Salut, il faut fermer tes balises <li>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

</li>

Bon développement

**leto02** · 30/05/2007, 16h51

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 ?

**1407.** · 30/05/2007, 22h54

deja, tu pourrais inscrire le code de la facon correcte...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

li{ list-style : none ; }

**leto02** · 31/05/2007, 15h25

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

**Candygirl** · 31/05/2007, 15h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

</head><head>

de trop avant ta déclaration de css et un html à la fin

**leto02** · 01/06/2007, 09h31

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

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?

**Candygirl** · 01/06/2007, 09h56

Envoyé par leto02

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

Ben non, le doctype est justement la solution

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**leto02** · 01/06/2007, 16h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**Candygirl** · 01/06/2007, 18h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

probléme de hover

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager