Bonjour,

petit problème avec mes infobulles. Elles appartiennent à des images qui sont dans plusieurs DIV :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<div id="box"> 
			<div class="categorie">
 
				<div class="photo"><a ...class="info" />
					<span> Bébé tigre
						<dl class="table"> 
							<dt>Auteur:</dt> <dd> dsjdf</dd>
							<dt>Date: </dt> <dd>2009 </dd>
							<dt>Taille: </dt> <dd> ... </dd>
							<dt>Mots-clés: </dt> <dd> ... </dd>
						</dl>
					</span></a> </div> ...
Donc mon infobulle est tout ce qu'il y a entre <span>.
Pour le CSS du span :

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
a.info {
   position: relative;
}
a.info span {
   display: none; /* on masque l'infobulle */
}
a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* valeur pour l'ordre d'affichage */
}
a.info:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;
 
   top: -40px; 
   left: 20px;
 
   background: white; 
 
   color: #a67938;
   padding: 3px;
 
   border: 2px solid #a67938;
}
Et en fait sur les premières images, tout va bien, mais dès que je suis sur l'image tout à droite ou tout en bas elles sont coupées par le DIV.

Comment puis-je faire pour que l'info bulle se mette "en dessus" de tout ?
merci beaucoup