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 ?

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

J'apprécie beaucoup ma classe css infobulle là et j'aimerai bien trouver une astuce pour que ça fonctionne en toute circonstance.
Non pas que passer par javascript me dérange puisque j'ai déjà développé toutes les fonctions pour ça, mais le traitement local est plus léger en CSS et ça m'arrange.

Je continue de chercher donc...

**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!

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

j'm'explique:
Si tu ne mets pas le position:relative dans ta classe "a" CandyGirl tes infos-bulles seront toutes situées au même endroit.

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
 
<!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><br /><br />
<a href="#">test<span>information contenues dans le span deux</span></a><br /><br />
<a href="#">test<span>information contenues dans le span trois</span></a>
</div>
</body>
</html>

Mais en fait c'est mozilla qui interprete correctement le code car un <span> en absolute sera en absolute dans son conteneur. Seulement les infobulle sont donc masquées.

**Candygirl** · 13/10/2006, 11h35

Oui, effectivement le position relative ratachant au a est handicapante. Dans mon exemple de base j'avais oublié de donner la position relative raport au conteneur, ce qui est idiot pour pouvoir le positionner correctement

Je vais faire 1-2 tests de mon côté et avec ton bout de code.

Edit: j'avais pas vu ton message. Oui, on est d'accord que l'interprêtation de FF a un côté logique, je dois avouer que le résultat de mon premier essai m'avait plutôt surpris

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

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

Opla j'avais pas vu!
BisounoursJos tu ne peux pas mettre le lien en position absolute sinon l'overflow devient inutile. Il faut pas rompre le flux de positionnement pour les liens!

^^

En gros, en mettant le "a" en absolute, tu le mets sur le même plan que le span, du coup le lien n'est plus contenu dans le div en overflow.

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

Envoyé par speedev

Opla j'avais pas vu!
BisounoursJos tu ne peux pas mettre le lien en position absolute sinon l'overflow devient inutile. Il faut pas rompre le flux de positionnement pour les liens!

^^

En gros, en mettant le "a" en absolute, tu le mets sur le même plan que le span, du coup le lien n'est plus contenu dans le div en overflow.

En effet, je n'avais testé qu'avec le code donné et je n'avais pas rajouté du texte ... X_x

**Candygirl** · 13/10/2006, 12h28

Envoyé par speedev

j'm'explique:
Si tu ne mets pas le position:relative dans ta classe "a" CandyGirl tes infos-bulles seront toutes situées au même endroit.

Effectivement, à moins de ne pas donner de position précise (sans top ni left de spécifiés) et garder le positionnement absolu par défaut et jouer sur la marge pour la hauteur et en imaginant que la largeur tolère que le positionnement en x soit toujours le même (genre pas 2 lien sur une même ligne et div étroit).

Enfin, très mauvaise option je pense. Perso je chercherais plutôt du côté du javascript ou alors utiliser l'infobulle de l'attribut title.

Bonne chance

**speedev** · 13/10/2006, 12h31

merci

info-bulle masqué par un div en overflow

CSS

Discussions similaires

Partager

Partager