Discussion :

[stars333]

Bonjour,

J'ai récupéré le code d'une infobulle en css sur le net.
Je l'ai utilisé pour afficher le commentaire d'une image mais j'ai un petit problème sur son positionnement car lorsqu'elle s'affiche elle le fait au milieu de l'image. Je souhaiterais donc que l'infobulle s'affiche plus bas.
J'ai essayé de modifier le z-index mais l'infobulle ne bouge pas.

voici mon code 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
a.info{
    position:relative; 
    z-index:24;
    color:#000;
    text-decoration:none}
 
a.info:hover{z-index:25;background-color:#ff0}
 
a.info span{display: none}
 
a.info:hover span{ 
/*le contenu de la balise span ne 
sera visible que pour l'état a:hover */
display:block; 
position:absolute;
top:2em; left:2em; width:200px;
border:1px solid #6699cc;
background-color:#eeeeee; color:#6699cc;
text-align: justify;
font-weight:none;
padding:1px;
}

Je remercie d'avance celui qui m'aidera

[E.Bzz]

Bonjour,
le z-index sert à gérer l'empilement.
Essaye plutôt de remplacer

Code :

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

top:2em;

par

Code :

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

bottom:2em;

2em à modifier ...

A+

[stars333]

merci, c'est la bonne solution

cela résoud mon probléme mais bottom fait que l'infobulle s'affiche en haut et top la fait s'afficher vers le bas.

[E.Bzz]

cela résoud mon probléme mais bottom fait que l'infobulle s'affiche en haut et top la fait s'afficher vers le bas.

Je sais pas si c'est une question, mais si oui :
Non
top positionne par rapport au bord supérieur et bottom par rapport au bord inférieur.
En 800X600, en théorie, un top:100px serait équivalent à un bottom:500px

A+