Discussion :

[youna]

Bonjour à tous,

Cela faut 2 jours que je butte sur ce problème, j'ai chercher sur le web... mais rien ne fonctionne.

Je travaille en local, voici ci-joint le code.
Voici mon problème :
Je souhaite faire un tableau avec 2 colonnes. La 1ere représente des titres de lignes et la 2nde, une ligne graduée. Nous voulons afficher des zones rouges à diverses endroits de cette ligne graduée. Et une infobulle s'affiche au survol de ces zones rouges.

J'ai tenté plusieurs approches : tableau et div. Mon problème reste le même.

L'info-bulle s'affiche correctement sous firefox mais sous ie6, elle passe sous les div (représentant les autres lignes graduées du tableau)

Tentatives :
- j'ai mis des z-index sur divers blocs mais le problème persiste sous ie et se répercute sous firefox.
- j'ai mis .pourcentageJour en relative : toujours pareil

le .pourcentageJour représente la zone rouge à survolée. et l'infobulle se trouve dedans.

Le code html :

Code html :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div id="tableau">
 
		<div class="titre1">TC - SAULIRE 1</div>
		<div class="ligneImpaire">
			<div class="pourcentageJour" style="width:20px; left:0px; ">
				&nbsp;
				<div class="infoBulle">
					Durée de l'arrêt : 20min<br>
					texte
				</div>
			</div>
			<div class="pourcentageJour" style="width:20px; left:100px; ">
				&nbsp;
				<div class="infoBulle">
					Durée de l'arrêt : 20min<br>
					texte
				</div>
			</div>
		</div>
 
		<div class="titre1">TC - RHODOS</div>
		<div class="lignePaire">
			<div class="pourcentageJour" style="width:20px; left:0px; ">
				&nbsp;
				<div class="infoBulle">
					Durée de l'arrêt : 20min<br>
					texte
				</div>
			</div>
 
 
			<div class="pourcentageJour" style="width:20px; left:100px; ">
				&nbsp;
				<div class="infoBulle">
					Durée de l'arrêt : 20min<br>
					texte
				</div>
			</div>
		</div>
 
	</div>

Le code css:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@CHARSET "ISO-8859-1";
 
/* Style général */
body {
    position:relative;
    font-size:12px;
   	behavior:url(styles_csshover.htc);
}
 
#tableau {
	position: relative;
	width: 980px;
	background-color: pink;
}
 
.titre1  {
	position: relative;
	width: 200px;
	background-color: yellow;
	float: left;
}
 
.ligneImpaire, .lignePaire{
	position:relative;
	width: 780px;
	height:17px;
	float:left;
	background-color:#ccc;
	background-image:url(images/trait03.gif);
	background-repeat:repeat;
	background-position:left bottom;
}
 
.pourcentageJour {
	position:absolute;
	background-color:red;
}
 
.infoBulle {
	display: none;
}
.pourcentageJour:hover {
	/*background: none; */
}
.pourcentageJour:hover .infoBulle, pourcentageJour:focus .infoBulle, pourcentageJour:active .infoBulle {
 
	position:absolute;
	display: block;
	background-color:gray;
	z-index: 1000;
	zoom:1;
 
}

Voilà, ce serait bien si vous pouviez m'aider.

[Bovino]

Si je ne me trompe pas, sous ie6, le z-index ne s'applique que sur et par rapport à des éléments positionnés.
En gros, un élément avec un z-index n'aura pas d'influence sur un élément en position static (style par défaut).