info-bulle masqué par un div en overflow

Version imprimable

13/10/2006, 08h16
speedev

info-bulle masqué par un div en overflow

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
13/10/2006, 09h41
trotters213

:salut:
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 :mrgreen: )
13/10/2006, 09h45
speedev

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!
13/10/2006, 09h51
Bisûnûrs

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.
13/10/2006, 10h03
speedev

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.
13/10/2006, 10h08
Bisûnûrs

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

Tu as essayé la solution Javascript ?
13/10/2006, 10h11
speedev

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

Citation:

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:

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">  </style> </head> <body> <div><a href="#">test<span>information contenues dans le span</span></a></div> </body> </html>

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

Citation:

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.

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:

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:

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;
}

13/10/2006, 11h18
speedev

C'est rigolo, j'ai trouvé mon soucis en vous retapant mon code!
a{ position: relative}<-- mauvais!
13/10/2006, 11h20
speedev

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

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:

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.

13/10/2006, 11h35
Candygirl

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

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 ;)

Ton code :

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

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;
}

13/10/2006, 11h46
speedev

Hum, chez moi ton code fait un carnage lol
jv essayer d'adapter! merci
13/10/2006, 11h49
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.
13/10/2006, 11h57
Bisûnûrs

Citation:

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
13/10/2006, 12h28
Candygirl

Citation:

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 :)
13/10/2006, 12h31
speedev

merci :)