[CSS]Infobulle et div

**Crazyblinkgirl** · 16/01/2006, 14h59

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 :

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

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 :

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

**SpaceFrog** · 16/01/2006, 15h16

essaye de commencer à z-index 1 ??

**franculo_caoulene** · 16/01/2006, 16h25

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.

**Crazyblinkgirl** · 16/01/2006, 16h32

J'ai essayé vos deux solutions mais j'ai toujours le même problème

**franculo_caoulene** · 16/01/2006, 16h35

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

**Crazyblinkgirl** · 16/01/2006, 16h56

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 :

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

**franculo_caoulene** · 16/01/2006, 17h01

Pour info, je me suis trompé concernant position:relative et z-index, ils fonctionnent bien ensemble.

**Crazyblinkgirl** · 16/01/2006, 17h25

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

Par contre j'ai testé en supprimant la ligne

Code :

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

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