Position infobulle

2 participants

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

Résolu Position infobulle

Message par Feuille de Tilleul 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 : Position infobulle C0Z8OM6L.
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
avatar

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

Matriochka
Membre actif

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 Lun 11 Fév 2013 - 18:29

Super, je vais essayer ! Smile
avatar

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 Lun 11 Fév 2013 - 18:31

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

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

- Sujets similaires

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