Position infobulle

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Position infobulle

Message par Feuille de Tilleul le Lun 11 Fév 2013 - 18:22

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


Dernière édition par Feuille de Tilleul le Lun 11 Fév 2013 - 18:32, édité 1 fois

Feuille de Tilleul
*

Féminin
Messages : 34
Inscrit(e) le : 03/12/2012

http://ga-hoole-loups.forumgratuit.org
Feuille de Tilleul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Position infobulle

Message par Matriochka le Lun 11 Fév 2013 - 18:26

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 Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Position infobulle

Message par Feuille de Tilleul le Lun 11 Fév 2013 - 18:29

Super, je vais essayer ! Smile

Feuille de Tilleul
*

Féminin
Messages : 34
Inscrit(e) le : 03/12/2012

http://ga-hoole-loups.forumgratuit.org
Feuille de Tilleul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Position infobulle

Message par Feuille de Tilleul le Lun 11 Fév 2013 - 18:31

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

Feuille de Tilleul
*

Féminin
Messages : 34
Inscrit(e) le : 03/12/2012

http://ga-hoole-loups.forumgratuit.org
Feuille de Tilleul a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum