Problème d'info bulle

[MaxLiam]

Bonjour.

Alors voila mon info bull vas toujours derrière la PA alors que j'aimerais qu'elle passe devant pour être lisible.

- la version de votre forum : phpBB2
- une capture d'écran du problème : https://i.servimg.com/u/f75/16/96/43/49/pb10.png
- votre statut sur le forum je suis fondateur
- si vous avez du CSS personnalisé :

Code:

/*scenario pa*/
a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
 
a.info:hover{
z-index:25;
background-color:#FFFfff
}
 
a.info span{
display: none
}
 
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000000;
background-color:#FFFfff;
color:#000000;
text-align: justify;
font-weight:none;
padding:5px;
}


- votre ou vos navigateur(s): Safari, chrome , opera.

- Le code qui pose problème : bah justement je le trouve pas T-T , j'aimerais que l'info bull passe au dessus de tout pour être lu , contrairement a la capture ou on lit que la moitié et parfois on la lit pas du tout

Merci d'avance a la personne qui trouvera la solution .

Edité:
après quelque modification le problème reste le même , même après avoir retirer le scroll

https://i.servimg.com/u/f75/16/96/43/49/pb210.png

[MaxLiam]

Si ca peu aider

voici le code de la PA :

Code:

<div class="ctop"><table><tr><td>
                            <a class="info" href="http://the-golden-jail.max2forum.com/t118-actors-actress"><img src="http://3b.img.v4.skyrock.net/4235/86034235/pics/photo_86034235_1.jpg" class="tops"><span><center>jensen ackles<br><strong>Amant de Selene et acteur. </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t129-disney-star-s"><img src="http://27.mgl.skyrock.net/art/PRIP.84524227.35.0.jpg" class="tops"><span><center>Selena Gomez </strong> <br><strong>Chanteuse Ex de Justin B </strong></center></span></a>
                            <a class="info" href="http://the-golden-jail.max2forum.com/t117-singer"><img src="http://08.mgl.skyrock.net/art/PRIP.81652108.3.0.jpg" class="tops"><span><center>Matthieu Tota<br><strong>Feat M Pokora </strong> <br><strong>Chanteur francais </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t118-actors-actress"><img src="http://23.img.v4.skyrock.net/0707/75740707/pics/photo_75740707_1.jpg" class="tops"><span><center>ian somerhalder </strong> <br><strong>Acteur de série, amant de Nina </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t118-actors-actress"><img src="http://www.seriebox.com/people/img/0/68/paul-wesley_min100.jpg" class="tops"><span><center>Paul Wesley</strong> <br><strong>Acteur de série. </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t123-managers"><img src="http://illiweb.com/fa/pbucket.gif" class="tops"><span><center>Kristina Donf<br><strong>Feat Christina Ricci</strong> <br><strong>Manager de Angel </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t123-managers"><img src="http://static1.cinemovies.fr/articles/5/76/55/@/206248-ph76551478679922-100x100-1.jpg" class="tops"><span><center>Scoot Ryan Sporte<br><strong>Feat Ryan Reynolds </strong> <br><strong>Manager de Justin Bieber </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t123-managers"><img src="http://illiweb.com/fa/pbucket.gif" class="tops"><span><center>Jordan Diamond<br><strong>Feat Wentworth Miller</strong> <br><strong>Manager de Taylor </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t126-the-others"><img src="http://m.popstar.com/Gallery/Celebrity/S/Shemar+Moore/Thumbs/00000004-5115.jpg" class="tops"><span><center>Morgan Skins<br><strong>Feat shemar moore</strong> <br><strong>Garde du corps de justin </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t126-the-others"><img src="http://www.hollow-art.com/files/bases/20101006/colin_farrell_80_0.png" class="tops"><span><center>Léon J. Tales<br><strong>Feat Colin Farrell</strong> <br><strong>Ex de selene, ancien acteur </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t121-make-up-man"><img src="http://www.hollow-art.com/files/bases/Michelle_Trachtenberg_022.jpg" class="tops"><span><center>Daphné Blake<br><strong>Feat Michelle Trachtenberg</strong> <br><strong>Make Up professionnelle </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t126-the-others"><img src="http://8d.img.v4.skyrock.net/1485/78041485/pics/photo_78041485_7.jpg" class="tops"><span><center>Makena Lautner<br><strong>Feat Lucy Hale</strong> <br><strong>Soeur de taylor L  </strong></center></span></a>
                     <a class="info" href="http://the-golden-jail.max2forum.com/t127-fan-s"><img src="http://media.tumblr.com/tumblr_m9fry6w1aq1rooebp.png" class="tops"><span><center>Samantha Cofter<br><strong>Feat India Eisley</strong> <br><strong>Fan de justin B Et meilleur amie d'angel. </strong></center></span></a>
                     <a class="info" href="#"><img src="http://i75.servimg.com/u/f75/16/96/43/49/vierge10.png" class="tops"><span><center>NOM PRÉNOM<br><strong>Feat </strong> <br><strong>Résumer </strong></center></span></a>
                     <a class="info" href="#"><img src="http://i75.servimg.com/u/f75/16/96/43/49/vierge10.png" class="tops"><span><center>NOM PRÉNOM<br><strong>Feat </strong> <br><strong>Résumer </strong></center></span></a>
<a class="info" href="#"><img src="http://i75.servimg.com/u/f75/16/96/43/49/vierge10.png" class="tops"><span><center>NOM PRÉNOM<br><strong>Feat </strong> <br><strong>Résumer </strong></center></span></a>
                     </td> </tr></table>
                        </div>

et l'autre partie de la CSS:

Code:

/* bloc topsites */
.bloctop {
  width:230px;
  height:250px;
}
/* fin bloc topsites */

/* centre logo tops*/
.ctop{
  width:98%;
  height:195px;
  overflow:auto;
}
/* fin centre logo tops */

/* top sites aux formes automatiquement arrondis */
.tops {
  width:40px;
  height:40px;
  border:2px solid #E4DED6;
  opacity:0.8;
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px;
  border-radius: 120px;
  -webkit-transform: rotate(2deg) ;
  -moz-transform: rotate(2deg) ;
  -o-transform: rotate(2deg) ;
  -ms-transform: rotate(2deg) ;
  transform: rotate(2deg) ;
  max-width:40px;
}
/* fin top sites */


[MaxLiam]

Toujours d'actu , j'ai beau chercher j'arrive pas a trouver T-T

[angelsjenifer]

Bonjour,

C'est normal. Au fait, l'info bulle ne va pas se cacher derrière la PA.
Elle reste bien dans le bloc de petites images que vous avez, elle est juste cachée à certains moments car votre bloc est " trop petit ".

Solution : je penserais à agrandir cette zone d'images afin de ne plus avoir de " scrollbar ". Dans ce cas l'info bulle apparaîtrait correctement

[MaxLiam]

Même si j'agrandi elle ne sortira pas au dessus du reste . se que j'aimerais c'est que soit l'info bulle soit au milieux des PVs pour être toujours lisible soit este au dessus de sa case .

[angelsjenifer]

oui je vois, alors il faut revoir ces paramètres :

Code:

a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}

Pour moi cette ligne pose un problème, pourquoi " em " ? J'aurais mis " px ". Au lieu de left, j'aurais utilisé une position centrée que j'aurais placé dans mon code de la PA. A vous de voir...

Code:

top:2em; left:2em; width:15em;

Essayez et si rien ni fait, j'aurais besoin de votre code html de la PA et CSS correspondant pour pouvoir tester sur mon forum test.

[MaxLiam]

si je change Em en px ça ne change pas de position mais l’écrit se met sur une seul colonne ...

j'aurais besoin de votre code html de la PA et CSS correspondant pour pouvoir tester sur mon forum test.

tout se trouve dans les deux premiers messages .....

édité :
après quelque modification le problème reste le même , même après avoir retirer le scroll

https://i.servimg.com/u/f75/16/96/43/49/pb210.png

[angelsjenifer]

Je vais passer la main à quelqu'un d'autre car dans l'instant, je n'arrive à rien de concret.

[MaxLiam]

ok merci quand même

[MaxLiam]

quelqu'un aurais une solution T-T?

[MaxLiam]

Toujours d'actu T-T

[MaxLiam]

up

[MaxLiam]

Toujours d'actu

[MaxLiam]

up

[MaxLiam]

up

[Wave]

Bonjour,

Ajouter ce code à votre CSS:

Code:

.ctop {
  overflow: visible!important; // Afficher si ça dépasse
}

a.info span {
  left:-70px!important; // Décaler l'infobulle
}

Cordialement,

[MaxLiam]

OMG :youopi:

un grand merci enfin un solution

mille merci pour tout ça marche parfaitement ^^