[CSS]Infobulle et div

Version imprimable

Bonjour,

J'ai un petit problème d'affichage avec mes infobulles.

J'ai un tableau placé dans un div et pour avoir des cellules de même taille je n'affiche qu'une partie du texte, affichant le reste dans une infobulle quand on passe la souris sur le texte.

Jusque là pas de soucis mais le problème est que si l'infobulle est proche des bords du div, elle disparait sous lui malgré des valeurs de z-index différentes.

Je débute en css et je ne vois pas trop comment régler ce pb.

Merci d'avance pour votre aide!

Code de ma page :

Code:

1
2
3
4
5
6
7
8
 
<div id="divbureau">
  <table summary="" >
     <tr>
        <td><a class="infobulle" href="#" onclick="return false;">Texte<span><span id="cadrehaut">blabla</span><span id="cadrebas">blabla</span></span></a></td>
       ....
      </tr>
     </table>

Code de ma 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
54
 
#divbureau{
  position:relative; 
  left:5px; 
  height:28px; 
  width:800px; 
  overflow:auto; 
  border-top:2px solid black; 
  border-bottom:2px solid black; 
  z-index:0;
}
 
a.infobulle span{display: none;text-decoration:none;} 
 
a.infobulle{  
  position:relative; 
  text-decoration:none;
  color:#000000;
  cursor:help;
}
 
a.infobulle:hover{ 
  z-index:500;  
  background-color:white;
}
a.infobulle:hover span{
  display:block; 
  top:32px;
  left:10px;
  position:absolute;
  width:250px;
  height:auto;
}
 
span#cadrehaut{
  top:0;	
  padding-bottom:5px;
  padding-top:5px;
  padding-left:30px;
  border-bottom: 2px solid #006699;
  font-family:verdana;
  font-size:10px;
  }
 
span#cadrebas{
  top:24px;
  padding-bottom:10px; 
  padding-top:5px; 
  padding-left:10px;
  padding-right:20px;
  border:none;
  font-family:verdana;
  font-size:10px;
}

16/01/2006, 15h16
SpaceFrog

essaye de commencer à z-index 1 ??
16/01/2006, 16h25
franculo_caoulene

Juste comme ça essaye de mettre position:absolute plutôt que relative. Je crois (de mémoire) que position:relative ne prend pas en compte le z-index.
16/01/2006, 16h32
Crazyblinkgirl

J'ai essayé vos deux solutions mais j'ai toujours le même problème :oops:
16/01/2006, 16h35
franculo_caoulene

Aurais-tu ta page en ligne pour tester? Sinon est-il possible que tu la mettes?

Voilà ma page car je ne peux la mettre en ligne.

J'ai retiré pas mal de trucs donc ca parait tout moche mais le code pour le pb est là.

Merci encore!

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="Templates/css/Style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 
	<div id="divbureau">
 
		<!-- SCROLL-CONTENT START -->
		<table class="head" summary="" >
		<tr>
			<td><a class="infobulle" href="#" onclick="return false;">Texte affiché par défaut<span><span id="cadrehaut">Texte du cadre haut de l'infobulle</span><span id="cadrebas">Texte du cadre bas de l'infobulle</span></span></a></td>
			<td><a class="infobulle" href="#" onclick="return false;">Texte affiché par défaut<span><span id="cadrehaut">Texte du cadre haut de l'infobulle</span><span id="cadrebas">Texte du cadre bas de l'infobulle</span></span></a></td>
		</tr>
		<tr>
			<td><a class="infobulle" href="#" onclick="return false;">Texte affiché par défaut<span><span id="cadrehaut">Texte du cadre haut de l'infobulle</span><span id="cadrebas">Texte du cadre bas de l'infobulle</span></span></a></td>
			<td><a class="infobulle" href="#" onclick="return false;">Texte affiché par défaut<span><span id="cadrehaut">Texte du cadre haut de l'infobulle</span><span id="cadrebas">Texte du cadre bas de l'infobulle</span></span></a></td>
		</tr>
		<tr>
			<td><a class="infobulle" href="#" onclick="return false;">Texte affiché par défaut<span><span id="cadrehaut">Texte du cadre haut de l'infobulle</span><span id="cadrebas">Texte du cadre bas de l'infobulle</span></span></a></td>
			<td><a class="infobulle" href="#" onclick="return false;">Texte affiché par défaut<span><span id="cadrehaut">Texte du cadre haut de l'infobulle</span><span id="cadrebas">Texte du cadre bas de l'infobulle</span></span></a></td>
		</tr>
		....
 
</table>
<!-- SCROLL-CONTENT END --></div>
 
</body>
</html>
 
 
 
<style>
 
table.head{width:800px;}
 
#divbureau{
	position:relative; 
	left:5px; 
	height:80px; 
	width:800px; 
	overflow:auto; 
	border-top:2px solid black; 
	border-bottom:2px solid black; 
	z-index:0px;
}
 
a.infobulle span{display: none;text-decoration:none;} 
 
a.infobulle{  
  position:relative; 
  text-decoration:none;
  color:#000000;
  cursor:help;
 
}
 
a.infobulle:hover{ 
  z-index:500;  
  background-color:white;
}
a.infobulle:hover span{ 
  display:block; 
  top:32px;
  left:10px;
  position:absolute;
  width:250px;
  height:auto;
}
 
span#cadrehaut{
  	top:0;	
	padding-bottom:5px;
	padding-top:5px;
	padding-left:30px;
	border-bottom: 2px solid #006699;
	background-color: ivory; 
	font-family:verdana;
	font-size:10px;
  }
 
span#cadrebas{
	top:24px;
	padding-bottom:10px; 
	padding-top:5px; 
	padding-left:10px;
	padding-right:20px;
	border:none;
	background-color: ivory; 
	font-family:verdana;
	font-size:10px;
}
</style>

16/01/2006, 17h01
franculo_caoulene

Pour info, je me suis trompé concernant position:relative et z-index, ils fonctionnent bien ensemble.
16/01/2006, 17h25
Crazyblinkgirl

Apparemment oui et ca me soulage de ne pas avoir à reprendre le code.

Par contre j'ai testé en supprimant la ligne

Code:

overflow:auto;

et l'infobulle s'affiche bien par dessus le div donc est-il possible de la faire passer également par dessus l'ascenseur? J'en ai besoin dans plusieurs de mes pages :oops:
16/01/2006, 20h28
marsupix

pourquoi tu n'utilise pas l'attribut "title" qui affiche une info-bulle ?...
16/01/2006, 21h41
Crazyblinkgirl

J'y ai pensé mais je voudrais tout de même une infobulle personnalisée
17/01/2006, 09h56
franculo_caoulene

Citation:

Envoyé par Crazyblinkgirl

est-il possible de la faire passer également par dessus l'ascenseur?

Ascenseur??
17/01/2006, 10h02
Crazyblinkgirl

Que mon infobulle passe par dessus un div qui a un scroll