18041 sujets

Questions générales et questions de débutants

Souci avec la position d'infobulles

Bonsoir,

J'essaie de faire des infobulles pour mon site mais impossible de bien les positionner ...
Etat actuel des infobulles :
http://img11.hostingpics.net/pics/300457Sanstitre1.png

Les infobulles sont en bas mais je voudrais qu'elles soient à droite de l'image et que je puisse changer sa position au pixel près par le css.
Mais impossible !
Voici mon code :

a.infobulle {
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
 
a.infobulle:hover{
z-index:25;
background-color:#FFF
}
 
a.infobulle span{
display: none
}
 
a.infobulle:hover span{
display:block;
top:-100px;
left:2em; 
width:200px!important;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}


J'ai essayé de mettre : position:absolute dans a.infobulle:hover span. Je peux bien faire varier la position mais elle est fixe. Or je voudrais que l'infobulle se positionne par rapport à l'image et non pas par rapport à la page entière ...
Que faire ?

Merci pour votre aide !
Quand tu mets quelques chose en position absolute et une des propriété top, left, bottom ou right le bloc va se positionner en fonction de l'élément parent en position relative.
Mon code HTML est le suivant :

<a href="#" class="infobulle"><img src="lien de l'image"><span>le texte dans l'infobulle</span></a>
bzh a écrit :
Quand tu mets quelques chose en position absolute et une des propriété top, left, bottom ou right le bloc va se positionner en fonction de l'élément parent en position relative.


Comment faire pour que l'élément parent soit l'image ?
Bonsoir Edelweiss,
corrige ceci qui selon moi pose un 'prob (mince) :
width:200px!important;
par :
width:200px !important;

Par ailleurs je procéderais autrement, en créant dans ton css un
#id, #id:hover, #id span et enfin #id:hover span
Là, c'est certain que cela fonctionnera pour parler de parent et d'enfant (ici uniques). Et tu pourras même y appliquer des effets de transition douce ... tout en css3.

Tiens, je t'ai créé un exemple tout simple mis en ligne :
http://sentrais.eu/test-info-bulle//test-info-bulle.html
où tu comprendras que l'#id est déclaré en position:relative afin que son span puisse ensuite "s'y accrocher" en position:absolute effective.
Modifié par pictural (20 Nov 2016 - 02:04)
pictural a écrit :

Par ailleurs je procéderais autrement, en créant dans ton css un
#id, #id:hover, #id span et enfin #id:hover span
Là, c'est certain que cela fonctionnera pour parler de parent et d'enfant (ici uniques). Et tu pourras même y appliquer des effets de transition douce ... tout en css3.


Le fait d'utiliser des ID au lieu de classes n'a aucune incidence sur le fonctionnement d'un tel code. Hormis la limitation à un élément par page.
@ Bzh,
tu l'avais pressenti : le css de Edelweiss a manqué d'attribuer position:absolute au span.

Fallait pas aller chercher plus loin ...
J'avais bien mis "position:absolute" mais ça ne fonctionnait pas c'est pour ça que je l'ai enlevé après.


Le problème venait du top. J'ai mis margin-top, ça fonctionne Smiley smile
Modifié par Edelweiss (20 Nov 2016 - 17:21)
Sujet clos
Aller à