problème avec les infobulles

par plùmyts Mer 19 Aoû 2015 - 18:46

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://bed-of-roses.fr-bb.com/

Description du problème

Bonjour ! J'ai un soucis avec mon code d'infobulle pour ma page d'accueil. Je le modifie, je l'installe, mais dès que je clique sur éditer et que je reviens ensuite, le code s'est modifié et me rajoute des choses. Comment faire pour que cela n'arrive plus ?

Voici mon code CSS :

Code:: /*PA*/ .encad{width:210px;height:140px;background-color:#F5F2F3;padding:5px;text-align:justify;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;} .nouv{overflow:auto;width:210px;height:140px;text-align:justify;background-color:#F5F2F3;padding:5px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;} .imgstaff{background-color:#ffffff;padding:2px;border:1px solid #AB5E75;} .imgstaff:hover{border:1px solid #D49657;} .lien{font-size:14px;text-transform:lowercase;font-family:'UnifrakturMaguntia';text-align:center;padding:3px;} .infobulle{position:relative;z-index: 0;} .infobulle:hover{background-color:transparent;z-index:50;} .infobulle span{position:absolute;background-color:#FFF;padding:5px;left:-1000px;visibility:hidden;} .stf{border:1px solid #DB5C8F;width:90px;height:59px;} .psd{font-family:'Crushed';text-transform:lowercase;color:#DB5C8F;font-size:20px;text-align:center;} .infobulle:hover span{visibility:visible;top:70px;left:35px;width:150px;border:1px solid #E8DADF;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;} .titre1{text-align:center;text-decoration:none;font-size:20px;font-family:'Parisienne';text-transform:lowercase;} .titre1:hover{color:#D49657;}

Et voici le code de ma PA :

Code:: <br /> <center> <table style="width: 700px;" cellpadding="0px" cellspacing="8px"> <tbody> <tr> <td colspan="0" style="width: 33%;"> <div class="titre1"> l'équipe suprême </div> <div class="encad"> <center> <table> <tbody> <tr> <td> <div class="infobulle"> <img class="stf" src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" /><br /><span><div class="psd"> prénom nom </div><br /><em>bla bla bla</em> bla bla bla</span></div> </td> <td> <div class="infobulle"> <img class="stf" src="http://31.media.tumblr.com/abd3ed5e57b1dba2f58ac3acd9cc5908/tumblr_ne2yjyXGDY1sexuoko5_250.gif" /><br /><span><div class="psd"> prénom nom </div><br /><em>bla bla bla</em> bla bla bla</span></div> </td> </tr> <tr> <td> <div class="infobulle"> <img class="stf" src="lien image ou apparait l'infobulle" /><br /><span><div class="psd"> prénom nom </div><br /><em>bla bla bla</em> bla bla bla</span></div> </td> <td> <div class="infobulle"> <img class="stf" src="lien image ou apparait l'infobulle" /><br /><span><div class="psd"> prénom nom </div><br /><em>bla bla bla</em> bla bla bla</span></div> </td> </tr> </tbody> </table> </center> </div> <br /> <div class="titre1"> Nouveautés </div> <div class="nouv"> novueautés nouveautés nouveautés nouveautés... </div> </td> <td colspan="width=" 33%""=""> <div class="titre1"> Contexte </div> <div style="overflow:auto;" class="encad">bla bla bla bla bla bla bla bla bla bla bla bla contexte contexte contexte </div><br /> <div class="titre1"> Autres </div> <div class="encad"> <br /> <center> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><br /><a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><br /><br /> <a rel="nofollow" target="_blank" class="lien" href="http://">Nos Amis </a> | <a rel="nofollow" target="_blank" class="lien" href="http://">Nous lier </a> </center> </div> </td> <td style="width: 33%;" colspan="0"> <div class="titre1"> Ce Mois-ci </div> <div class="encad"> <br /> <table style="width: 100%;" cellpadding="0px" cellspacing="8px"> <tbody> <tr> <td colspan="width=" 50%""=""> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> <td colspan="width=" 50%""=""> <img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /> </td> </tr> </tbody> </table> <table style="width: 100%;" cellpadding="0px" cellspacing="8px"> <tbody> <tr> <td colspan="width=" 50%""=""> <img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /> </td> <td colspan="width=" 50%""=""> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> </tr> </tbody> </table> </div> <br /> <div class="titre1"> Crédits </div> <div class="encad"> <br />truc truc truc truc truc truc </div> </td> </tr> </tbody> </table> </center>

Cependant, maintenant que j'ai cliquer sur publié, et que je reviens dans mon code, voici ce qu'il est devenu (au niveau de l'équipe suprême)

Code:: <br /> <center> <table cellspacing="8px" cellpadding="0px" style="width: 700px;"> <tbody> <tr> <td style="width: 33%;" colspan="0"> <div class="titre1"> l'équipe suprême </div> <div class="encad"> <center> <table> <tbody> <tr> <td> <div class="infobulle"> <img src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" class="stf" /><br /><span></span> <div class="psd"> prénom nom </div><span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> <td> <div class="infobulle"> <img src="http://31.media.tumblr.com/abd3ed5e57b1dba2f58ac3acd9cc5908/tumblr_ne2yjyXGDY1sexuoko5_250.gif" class="stf" /><br /><span></span> <div class="psd"> prénom nom </div><span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> </tr> <tr> <td> <div class="infobulle"> <img src="lien image ou apparait l'infobulle" class="stf" /><br /><span></span> <div class="psd"> prénom nom </div><span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> <td> <div class="infobulle"> <img src="lien image ou apparait l'infobulle" class="stf" /><br /><span></span> <div class="psd"> prénom nom </div><span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> </tr> </tbody> </table> </center> </div> <br /> <div class="titre1"> Nouveautés </div> <div class="nouv"> novueautés nouveautés nouveautés nouveautés... </div> </td> <td 33%""="" colspan="width="> <div class="titre1"> Contexte </div> <div class="encad" style="overflow:auto;"> bla bla bla bla bla bla bla bla bla bla bla bla contexte contexte contexte </div><br /> <div class="titre1"> Autres </div> <div class="encad"> <br /> <center> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><br /><a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><br /><br /> <a href="http://" class="lien" target="_blank" rel="nofollow">Nos Amis </a> | <a href="http://" class="lien" target="_blank" rel="nofollow">Nous lier </a> </center> </div> </td> <td colspan="0" style="width: 33%;"> <div class="titre1"> Ce Mois-ci </div> <div class="encad"> <br /> <table cellspacing="8px" cellpadding="0px" style="width: 100%;"> <tbody> <tr> <td 50%""="" colspan="width="> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> <td 50%""="" colspan="width="> <img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /> </td> </tr> </tbody> </table> <table cellspacing="8px" cellpadding="0px" style="width: 100%;"> <tbody> <tr> <td 50%""="" colspan="width="> <img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /> </td> <td 50%""="" colspan="width="> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> </tr> </tbody> </table> </div> <br /> <div class="titre1"> Crédits </div> <div class="encad"> <br />truc truc truc truc truc truc </div> </td> </tr> </tbody> </table> </center>

Pouvez vous m'aider ? Sad

par demeter1 Mer 19 Aoû 2015 - 19:11

Compressez le code avant de l'installer dans la page d'accueil et conservez un duplicata décompressé sur un traitement de texte pour vous faciliter la vie si vous avez à le modifier de temps en temps.

Un compresseur pour le html
http://www.textfixer.com/html/compress-html-compression.php

par plùmyts Mer 19 Aoû 2015 - 19:14

Oui, merci, mais il n'y a pas de solution à mon problème...?

par Cyn Jeu 20 Aoû 2015 - 4:40

Yop ! ^^

L'éditeur de la PA corrige automatiquement ce qu'il croit être des erreurs. Par exemple, dans ton code voulu, tu as :

Code:: <img class="stf" src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" /><br /><span><div class="psd"> prénom nom </div><br /><em>bla bla bla</em> bla bla bla</span></div>

Sauf qu'il n'est pas logique de mettre une div (un élément bloc) à l'intérieur d'un span (un élément inline). L'éditeur ferme donc la balise span qui a été ouverte avant la div "psd" et réouvre une balise span après la fin de cette div. (D'ailleurs, pourquoi as-tu mis un span à cet endroit ? Quelle est son utilité ici ?)

par plùmyts Jeu 20 Aoû 2015 - 11:24

D'accord, je vois.
Eh bien, pour le span, j'ai suivi un code trouvé ici pour faire des infobulle, et le <span> c'est mon infobulle :s Enfin je pense, c'est la première fois que j'en fais.

J'ai essayé de changer les div class par des font class, et mon code continue de changer.. Voici ce qu'il est devenu après que j'ai éditer :

Code:: <br /> <center> <table style="width: 700px;" cellpadding="0px" cellspacing="8px"> <tbody> <tr> <td colspan="0" style="width: 33%;"> <div class="titre1"> l'équipe suprême </div> <div class="encad"> <center> <table> <tbody> <tr> <td> <div class="infobulle"> <img class="stf" src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" /><br /><span><span class="psd"> prénom nom </span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> <td> <div class="infobulle"> <img class="stf" src="http://31.media.tumblr.com/abd3ed5e57b1dba2f58ac3acd9cc5908/tumblr_ne2yjyXGDY1sexuoko5_250.gif" /><br /><span><span class="psd"> prénom nom </span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> </tr> <tr> <td> <div class="infobulle"> <img class="stf" src="lien image ou apparait l'infobulle" /><br /><span><span class="psd"> prénom nom </span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> <td> <div class="infobulle"> <img class="stf" src="lien image ou apparait l'infobulle" /><br /><span><span class="psd"> prénom nom </span><br /><em>bla bla bla</em> bla bla bla</span> </div> </td> </tr> </tbody> </table> </center> </div> <br /> <div class="titre1"> Nouveautés </div> <div class="nouv"> novueautés nouveautés nouveautés nouveautés... </div> </td> <td colspan="width=" 33%""=""> <div class="titre1"> Contexte </div> <div style="overflow:auto;" class="encad"> bla bla bla bla bla bla bla bla bla bla bla bla contexte contexte contexte </div><br /> <div class="titre1"> Autres </div> <div class="encad"> <br /> <center> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><br /><a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><a rel="nofollow" target="_blank" class="postlink" href="http://"><img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /></a><br /><br /> <a rel="nofollow" target="_blank" class="lien" href="http://">Nos Amis </a> | <a rel="nofollow" target="_blank" class="lien" href="http://">Nous lier </a> </center> </div> </td> <td style="width: 33%;" colspan="0"> <div class="titre1"> Ce Mois-ci </div> <div class="encad"> <br /> <table style="width: 100%;" cellpadding="0px" cellspacing="8px"> <tbody> <tr> <td colspan="width=" 50%""=""> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> <td colspan="width=" 50%""=""> <img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /> </td> </tr> </tbody> </table> <table style="width: 100%;" cellpadding="0px" cellspacing="8px"> <tbody> <tr> <td colspan="width=" 50%""=""> <img alt="" border="0" src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" /> </td> <td colspan="width=" 50%""=""> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> </tr> </tbody> </table> </div> <br /> <div class="titre1"> Crédits </div> <div class="encad"> <br />truc truc truc truc truc truc </div> </td> </tr> </tbody> </table> </center>

par plùmyts Jeu 20 Aoû 2015 - 13:55

Si jamais ce n'est pas possible de corriger ce problème, savez vous comment faire en sorte que l'image gif que j'ai, disparaisse doucement vers le haut pour laisser place à un cadre blanc où il y aurait toutes les informations sur le staff et où je pourrais mettre des div ? :/

Un peu comme ce forum (http://cold-case-love.forum-canada.com/), sur la PA du côté de LES SCENARIOS EN VEDETTE ? Embarassed

par Invité Jeu 20 Aoû 2015 - 23:32

bonsoir , de cette façon >>

infobulle* - problème avec les infobulles 2015-026

regardé içi si cela vous convient >> http://forum-test-r-max.forumactif.org/

bonne soirée ,

par plùmyts Jeu 20 Aoû 2015 - 23:42

Oui c'est exactement ça **
C'est possible de rajouter des div class dedans pour modifier la police du pseudo ? Smile

par Invité Ven 21 Aoû 2015 - 0:04

oui bien sur je rajoute une class pour le speudo, par contre les 2 image du haut s'affiche mais pas celle du bas , c'est pour cela que pour le test j'ai mise les 4 pareil ,

je replacérer les liens des gif a la fin de la modification du code .

par plùmyts Ven 21 Aoû 2015 - 10:33

Alors sur mon code de base c'est normal, car je n'ai pas encore trouvé les gifs des deux images du bas donc il n'y en a pas Smile

Pas de soucis pour les gifs, donc comment je peux faire ce rendu la ?

par Invité Ven 21 Aoû 2015 - 23:09

bonsoir , remplacé le code de votre PA dans generalité par celui ci

Code:: <br /> <center> <table cellspacing="8px" cellpadding="0px" style="width: 700px;"> <tbody> <tr> <td style="width: 33%;" colspan="0"> <div class="titre1"> l'équipe suprême </div> <div class="encad"> <center> <table> <tbody> <tr> <td> <div id="slide_avatar"> <div> <div style="width:94px;height: 63px;overflow: auto;"> <div class="profil_mess"> <span class="speudo_prenon"> prénom nom </span> <span class="texte"> bla bla bla bla bla bla </span> </div> <span id="postdetails poster-profile"> <img src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" class="stf" /></span> </div> </div> </div> </td> <td> <div id="slide_avatar"> <div> <div style="width:102px;height: 71px;overflow: auto;"> <div class="profil_mess"> <span class="speudo_prenon"> prénom nom </span> <span class="texte"> bla bla bla bla bla bla </span> </div> <span id="postdetails poster-profile"> <img src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" class="stf" /></span> </div> </div> </div> </td> </tr> <tr> <td> <div id="slide_avatar"> <div> <div style="width:102px;height: 71px;overflow: auto;"> <div class="profil_mess"> <span class="speudo_prenon"> prénom nom </span> <span class="texte"> bla bla bla bla bla bla </span> </div> <span id="postdetails poster-profile"> <img src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" class="stf" /></span> </div> </div> </div> </td> <td> <div id="slide_avatar"> <div> <div style="width:102px;height: 71px;overflow: auto;"> <div class="profil_mess"> <span class="speudo_prenon"> prénom nom </span> <span class="texte"> bla bla bla bla bla bla </span> </div> <span id="postdetails poster-profile"> <img src="http://33.media.tumblr.com/b086646ba45b8a3c137ca5e5b3b9966a/tumblr_n308rv5Lk11r3xthuo5_250.gif" class="stf" /></span> </div> </div> </div> </td> </tr> </tbody> </table> </center> </div> <br /> <div class="titre1"> Nouveautés </div> <div class="nouv"> novueautés nouveautés nouveautés nouveautés... </div> </td> <td 33%""="" colspan="width="> <div class="titre1"> Contexte </div> <div class="encad" style="overflow:auto;"> bla bla bla bla bla bla bla bla bla bla bla bla contexte contexte contexte </div><br /> <div class="titre1"> Autres </div> <div class="encad"> <br /> <center> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><br /><a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><a href="http://" class="postlink" target="_blank" rel="nofollow"><img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /></a><br /><br /> <a href="http://" class="lien" target="_blank" rel="nofollow">Nos Amis </a> | <a href="http://" class="lien" target="_blank" rel="nofollow">Nous lier </a> </center> </div> </td> <td colspan="0" style="width: 33%;"> <div class="titre1"> Ce Mois-ci </div> <div class="encad"> <br /> <table cellspacing="8px" cellpadding="0px" style="width: 100%;"> <tbody> <tr> <td 50%""="" colspan="width="> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> <td 50%""="" colspan="width="> <img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /> </td> </tr> </tbody> </table> <table cellspacing="8px" cellpadding="0px" style="width: 100%;"> <tbody> <tr> <td 50%""="" colspan="width="> <img src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/48/Wing-Heart-icon.png" border="0" alt="" /> </td> <td 50%""="" colspan="width="> <div style="width: 100px;height: 40px;overflow: auto;padding:5px;-moz-border-radius:10px;background-color:white;text-align:justify;"> <span style="font-size: 10px; line-height: normal">blablablabla</span> </div> </td> </tr> </tbody> </table> </div> <br /> <div class="titre1"> Crédits </div> <div class="encad"> <br />truc truc truc truc truc truc </div> </td> </tr> </tbody> </table> </center>

remplacé votre css que vous avez fourni plus haut par celui ci

Code:: /**=== modif PA R-max ===**/ /********* coin arrondie de img staff + taille automatique **********/ #postdetails.poster-profile a img { border-radius:0px; width:92px; /** ===img staff ===**/ height:61px; } /******* fond interieur noir avec les infos ******/ #slide_avatar div { border-radius: 0px; /*angle coin cadre interieur */ background: #333333; width:92px; /* Égal à la largeur de l'image */ height: 61px; /* Égal à la hauteur de l'image */ overflow: hidden; position: relative; } /****** début slide img ****R-max************/ #slide_avatar div img{ -webkit-transition:all 1.5s; /* fait glisser l img */ -moz-transition:all 1.5s; /* fait glisser l img autre navigateur */ -o-transition:all 1.5s; /* fait glisser l img autre navigateur */ -ms-transition:all 1.5s; /* fait glisser l img autre navigateur */ transition:all 1.5s; /* fait glisser l img autre navigateur */ top:0; /* ne pas toucher */ left:0; /* ne pas toucher */ width:90px; /* ne pas toucher */ height:59px; /* ne pas toucher */ position:absolute; /* ne pas toucher */ } #slide_avatar div:hover img{ margin-top:-61px; /** fait glisser l img en haut **/ } /**===non prenon texte dans fond noir ===**/ .speudo_prenon{font-family:arial;color:#ffffff;} .texte{font-family:arial;color:#f60000;} /*******************fin slide img ***********R-max*********/ /*PA*/ .encad{width:210px;height:140px;background-color:#F5F2F3;padding:5px;text-align:justify;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;} .nouv{overflow:auto;width:210px;height:140px;text-align:justify;background-color:#F5F2F3;padding:5px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;} .imgstaff{background-color:#ffffff;padding:2px;border:1px solid #AB5E75;} .imgstaff:hover{border:1px solid #D49657;} .lien{font-size:14px;text-transform:lowercase;font-family:'UnifrakturMaguntia';text-align:center;padding:3px;} /**===neutralisation de l infos bulle ===**/ /**.infobulle{position:relative;z-index: 0;} .infobulle:hover{background-color:transparent;z-index:50;} .infobulle span{position:absolute;background-color:#FFF;padding:5px;left:-1000px;visibility:hidden;}***/ /**===fin neutralisation infos bulle ===**/ .stf{border:1px solid #DB5C8F;width:92px;height:61px;} .psd{font-family:'Crushed';text-transform:lowercase;color:#DB5C8F;font-size:20px;text-align:center;} /**===.infobulle:hover span{visibility:visible;top:70px;left:35px;width:150px;border:1px solid #E8DADF;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;}===**/ .titre1{text-align:center;text-decoration:none;font-size:20px;font-family:'Parisienne';text-transform:lowercase;} .titre1:hover{color:#D49657;}

voila je pense que vous aller trouvé pour modifier les textes et couleur et image staff Very Happy

bonne soirée ,

par plùmyts Sam 22 Aoû 2015 - 10:47

Merci c'est parfait ! C'est résolu ! ♥

problème avec les infobulles