Position infobulle

[Feuille de Tilleul]

Bonjour.

Alors, pour entrer dans le vif du sujet, je compte installer une nouvelle PA sur mon forum. Pour la mise aux couleurs, le remplissage, ect, je l'ai mise sur mon ancien forum, http://monsitevenez-gdc.forumgratuit.org. En cliquant, vous la verrez. Et si vous voulez voir l'originale, son auteure l'a mise sur cette page html. Ces deux fows sont en phpBB 2.
Bref, revenons à la PA, plus précisément dans la partie "Staff". Comme vous pouvez le constater, l'infobulle s'affiche à gauche de l'image : .
J'ai du CSS personnalisé, donc, et voici la partie dédiée aux infobulles, si je ne me trompe pas :

Code:

div.infobulle{
position: relative;
float: left;
margin-left:18px;
}

div.infobulle span{
display: none;
}

div.infobulle:hover{
background: none;
z-index: 999;
}
  div.infobulle:hover span
{
display: inline;
position: absolute;
top: 10px;
width: 80px;
height:80px;
  text-transform : capitalize;
  text-shadow: 1px 1px 3px #939191;
  text-align : center;
  line-height: 25px;
  color: black;
  padding: 5px;
  background-color : #fef0d1;
  border : 1px black dotted;
 -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
 border-radius: 20px;

}
.contexte.contenu {
color: white;
}

Ce qui m'intéresse, c'est la position, qui est bien là, je crois :

Code:

div.infobulle{
position: relative;
float: left;
margin-left:18px;
}

Mon problème, c'est que je voudrais que l'infobulle se trouve au-dessus de l'image. J'ai essayé

Code:

float: top;

, mais ça ne fait que me mettre les images les unes au-dessus des autres.

Pourriez-vous m'aider, si vous avez eu le courage exemplaire de tout lire ?

PS : j'ai :saf:

[Matriochka]

Bonsoir,

Dans ton CSS, il faut modifier ici :

Code:

  div.infobulle:hover span
{
display: inline;
position: absolute;
top: 10px;
width: 80px;
height:80px;
  text-transform : capitalize;
  text-shadow: 1px 1px 3px #939191;
  text-align : center;
  line-height: 25px;
  color: black;
  padding: 5px;
  background-color : #fef0d1;
  border : 1px black dotted;
 -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
 border-radius: 20px;
 
}

La valeur attribuée à top, mets une valeur négative comme -90px et ajouter left:0px; ou left:-5px; par exemple.

Ce qui donne :

Code:

  div.infobulle:hover span
{
display: inline;
position: absolute;
top: -90px;
left:-5px;
width: 80px;
height:80px;
  text-transform : capitalize;
  text-shadow: 1px 1px 3px #939191;
  text-align : center;
  line-height: 25px;
  color: black;
  padding: 5px;
  background-color : #fef0d1;
  border : 1px black dotted;
 -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
 border-radius: 20px;
 
}

À toi de modifier par la suite selon l'emplacement exact voulu

[Feuille de Tilleul]

Super, je vais essayer !

[Feuille de Tilleul]

Désolée du DP, mais c'est pour dire que ça marche ! Merci encore !