info-bulle masqué par un div en overflow

**speedev** · 13/10/2006, 08h16

Bonjour

Le titre de mon post est suffisament explicite je crois, mais voici une tite explication tout de même :
J'ai donc des info-bulles (css only) dans un div que j'ai fais passé en overflow-y:scroll. Le span en absolute ne passe plus par dessus ce div et reste contenu dans celui-ci, càd qu'il n'est visible que sur la surface du div (il est masqué à droite à partir du scrolling donc).

Mais ce problème n'apparait pas sur IE.
Seul momo me fait ce caprice.

Vous connaissez une feinte?
Merci

**trotters213** · 13/10/2006, 09h41

tu as essayé avec z-index ? qu'est ce qu'il y a dans tes div ? des select ?
Tu pourrais nous montrer le lien?
(Je sais ça fait beaucoup de question pour quelqu'un qui est censé répondre à ta question

)

**speedev** · 13/10/2006, 09h45

Salut trotters213 ^^
Ouep j'ai mis des z-index!
Je ne peux pas donner de liens vers cette appli car c'est pour un (très) gros client huhu.

Rien n'y fait avec les z-index, le overflow imbrique totalement tout élément en absolute, j'ai cassé tous les flux de positionnement et je m'en sors pas!

**Bisûnûrs** · 13/10/2006, 09h51

Ce membre avait le même problème que toi.
http://developpez.net/forums/showthread.php?t=220580

Il l'a résolu mais n'a pas mis sa solution.

Tu peux toujours regarder son code pour savoir comme il a fait, ou lui poser la question.

**speedev** · 13/10/2006, 10h03

Ben visiblement il n'utilise pas d'overflow.
Si je ne mets pas mes div en overflow il n'y a aucun problème sur les deux navigateurs.

Mais le overflow pose des soucis sur momo.

**Bisûnûrs** · 13/10/2006, 10h08

Avant il avait un overflow, en effet et il l'a supprimé.

Tu as essayé la solution Javascript ?

**Candygirl** · 13/10/2006, 10h33

Envoyé par speedev

J'ai donc des info-bulles (css only) dans un div que j'ai fais passé en overflow-y:scroll. Le span en absolute ne passe plus par dessus ce div et reste contenu dans celui-ci, càd qu'il n'est visible que sur la surface du div (il est masqué à droite à partir du scrolling donc).
Merci

Hello,

J'ai essayé de recréer ton problème avec un exemple basique, mais je n'y arrive pas (chez moi le span en absolu s'affiche en entier). Pourrais-tu, soit donner le bout de code qui te pose problème, soit dire ce que je dois rajouter dans mon exemple pour être conforme à ton problème (je n'ai peut-être pas compris exactement ta situation) ?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
div {width:100px; height:100px; background-color:#FFFF99; overflow-y: scroll;}
span {display:none;}
a:hover span {display:block; position:absolute; top:50px; left:20px;}
-->
</style>
</head>
 
<body>
<div><a href="#">test<span>information contenues dans le span</span></a></div>
</body>
</html>

**Bisûnûrs** · 13/10/2006, 10h54

Envoyé par Candygirl

J'ai essayé de recréer ton problème avec un exemple basique, mais je n'y arrive pas (chez moi le span en absolu s'affiche en entier). Pourrais-tu, soit donner le bout de code qui te pose problème, soit dire ce que je dois rajouter dans mon exemple pour être conforme à ton problème (je n'ai peut-être pas compris exactement ta situation) ?

En effet, en absolute ça fonctionne parfaitement.
Cependant, une infobulle pour être ... désignée comme telle ne peut pas être positionnée en absolute mais en relative.
Dans ce cas, le problème survient quand on laisse l'overflow mais disparait en même temps qu'on retire l'overflow.

Après, à speedev de nous préciser son code.

**speedev** · 13/10/2006, 11h13

scuzez moi j'ai poursuivi le dev, je n'ai que peu de temps pour finir lappli!
Je vous retape mon code en dessous version brouillon (identique dans le concept) :

Code :

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

1
2
3
 
<div class='classe1'>
<div style="margin-left:40px"><a href='#' class='bulle'>lien1<span>contenu de l'infobulle</span></a></div></div>

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
 
/*DIV SCROLLING*/
.classe1{overflow-y:scroll;}
 
/*INFOBULLE*/
a.bulle {
text-decoration: none;
position: relative;
color: #000000;
border-bottom: 1px gray dotted;
background-image:none; /*suppression de l'image en padding-left standart (a)*/
padding-left:0;/*réinit padding du (a)*/
}
a.bulle span {
display: none;
}
a.bulle:hover {
background: none; /* pour bug IE */
z-index: 500; /*essai*/
}
a.bulle:hover span {
display: inline; /*essai*/
position: absolute;
top: 2em;
left: 4em;
right:1em;
background: #FFFFFF;
text-align: left;
color: white;
padding: 2px;
font-size:0.75em;
width:auto;
}

**speedev** · 13/10/2006, 11h18

C'est rigolo, j'ai trouvé mon soucis en vous retapant mon code!
a{ position: relative}<-- mauvais!

**speedev** · 13/10/2006, 11h20

Oups...heu non c'est pas ça!

**Bisûnûrs** · 13/10/2006, 11h43

Ton code :

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
/*DIV SCROLLING*/
.classe1{overflow-y:scroll;}
 
/*INFOBULLE*/
a.bulle {
text-decoration: none;
position: relative;
color: #000000;
border-bottom: 1px gray dotted;
background-image:none; /*suppression de l'image en padding-left standart (a)*/
padding-left:0;/*réinit padding du (a)*/
}
a.bulle span {
display: none;
}
a.bulle:hover {
background: none; /* pour bug IE */
z-index: 500; /*essai*/
}
a.bulle:hover span {
display: inline; /*essai*/
position: absolute;
top: 2em;
left: 4em;
right:1em;
background: #FFFFFF;
text-align: left;
color: white;
padding: 2px;
font-size:0.75em;
width:auto;
}

Celui qui fonctionne :

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
/*DIV SCROLLING*/
.classe1{overflow-y:scroll;}

/*INFOBULLE*/
a.bulle {
text-decoration: none;
position:absolute;
color: #000000;
border-bottom: 1px gray dotted;
background-image:none; /*suppression de l'image en padding-left standart (a)*/
padding-left:0;/*réinit padding du (a)*/
}
a.bulle span {
display: none;
}
a.bulle:hover {
background: none; /* pour bug IE */
z-index: 500; /*essai*/
}
a.bulle:hover span {
display:block;
position: relative;
top: 2em;
left: 4em;
right:1em;
background: #FFFFFF;
text-align: left;
color: black;
padding: 2px;
font-size:0.75em;
width:auto;
}

**speedev** · 13/10/2006, 11h46

Hum, chez moi ton code fait un carnage lol
jv essayer d'adapter! merci

info-bulle masqué par un div en overflow

CSS

Vue hybride

Discussions similaires

Partager

Partager