Div passant en-dessous d'une autre (z-index, css)
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:
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; ">
<div class="infoBulle">
Durée de l'arrêt : 20min<br>
texte
</div>
</div>
<div class="pourcentageJour" style="width:20px; left:100px; ">
<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; ">
<div class="infoBulle">
Durée de l'arrêt : 20min<br>
texte
</div>
</div>
<div class="pourcentageJour" style="width:20px; left:100px; ">
<div class="infoBulle">
Durée de l'arrêt : 20min<br>
texte
</div>
</div>
</div>
</div> |
Le code css:
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
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. :?
