Problème d'info-bulles

par Devilsova Mar 19 Mai 2015 - 15:31

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis que je suis revenue sur le forum, il y a à peu près une semaine, après plusieurs mois d'absence.
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
J'ai quitté mon forum depuis longtemps et suis revenue dessus il y a quelques jours et je remarque que les info-bulles du staff ne s'affichent plus correctement (https://2img.net/h/oi61.tinypic.com/jj74ow.jpg) sur Google Chrome. Sur Safari elles s'affichent normalement : https://2img.net/h/oi60.tinypic.com/mc6la8.jpg
J'ai optimisé le forum pour Chrome et ne comprends donc pas d'où ça vient.

par MlleAlys Mer 20 Mai 2015 - 15:36

Bonjour,
Serait-il possible d'avoir les codes en jeu (page d'accueil, css) et/ou un accès au forum s'il vous plait ? Par ce que juste avec une image, difficile de trouver l'origine du problème.... Razz

par Devilsova Mer 20 Mai 2015 - 21:02

Je viens seulement de voir la réponse, désolée.
Aucun soucis, voici les codes de la PA :

Code:: <center> <table style="width: 750px;"> </table> <table cellspacing="1"> <tbody> <tr> <td> <img class="gifpa" src="http://24.media.tumblr.com/ec613b27f4a64f69aef8da8f150d8bc4/tumblr_mha86eYYlA1s4ur6lo1_400.gif" /> </td> <td rowspan="1"> <div class="PAcontenu1"> Nomansland, pays au climat et à la géographie diversifiée par les millénaires, dévasté par l'épidémie virale où à la moindre morsure on contracte les premiers symptômes. On ne les voit pas immédiatement, mais on les sent, on les entend, derrière nous, errants dans la nuit à l'affut de chair. Tout l'horizon en est occupé. L'esprit aussi : au bout d'une semaine on n'a plus que les Prototypes en tête, le pays qui s'étend derrière, la fuite vers l'avant, et à force d'y penser, on y va. </div> </td> <td> <div class="PAcontenu2"> <center> <div class="systab"> <div> <span><img src="http://img4.hostingpics.net/pics/768045boxshockcopy.png" class="imgstaff" /></span> Cliquer sur une image pour découvrir l'équipe. </div> <div> <span><img src="http://img4.hostingpics.net/pics/730495002.png" class="imgstaff" /></span> <img src="http://38.media.tumblr.com/9d602e454b32e5d01d14aa0745d576df/tumblr_njo8o8cC6v1rotqbvo8_250.gif" class="staffgif" /> <span class="nomstaff">BONNIE</span><br /><span style="text-transform:uppercase;font-size: 8px;text-align:center;">Administratrice<br />profil . contacter</span> </div> <div> <span><img src="http://img4.hostingpics.net/pics/726494NBCDraculaThomasKretschmann.png" class="imgstaff" /></span> <img src="http://img15.hostingpics.net/pics/739132tumblrmdvipvpFdu1rl71uuo2r1500.gif" class="staffgif" /> <span class="nomstaff">NOM</span><br /><span style="text-transform:uppercase;font-size: 8px;text-align:center;">Administrateur<br />profil . contacter</span> </div> <div> <span><img src="http://img4.hostingpics.net/pics/989126TOMHARDYtomhardy10487322600786.png" class="imgstaff" /></span> <img src="http://img15.hostingpics.net/pics/770851Untitled5.gif" class="staffgif" /> <span class="nomstaff">NOM</span><br /><span style="text-transform:uppercase;font-size: 8px;text-align:center;">Administrateur<br />profil . contacter</span> </div> </div> </center> </div> </td> </tr> </tbody> </table> </center> <center> <table cellspacing="1"> <tbody> <tr> <td rowspan="2"> <table> <tbody> <tr> <td rowspan="1"> <div class="PAcontenu3"> <div style="border-bottom:1px solid; border-color:#CECDBC;"> </div><g>date date</g> › news news news news news news † <g>date date</g> › news news news news news news † <g>date date</g> › news news news news news † <g>date date</g> › news news news news news news † <g>date date</g> › news news news news news news † <g>date date</g> › news news news news news news † <g>date date</g> › news news news news news † <g>date date</g> › news news news news news † <g>date date</g> › 20 lignes de RP obligatoires et au moins 1 RP par semaine † <g>date date</g> › ouverture officielle du forum † <g>05/10/14</g> › design d'ouverture réalisé par Box&Shock. </div> </td> <td rowspan="1"> <div class="PAcontenu3"> <center> <div style="font-family: 'Tulpen One';font-size: 23px;letter-spacing: 2px;"> VOTEZ POUR LE FORUM </div><span style="text-transform:uppercase;font-size: 8px;">Toutes les deux heures</span><br /><br /><a href="http://norestforthewicked.forum.st/"><img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /></a> <img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /> <img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /> <img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /><br /><img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /> <img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /> <img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /> <img class="topsite" src="http://img4.hostingpics.net/pics/316479partenaires.png" /><br /><br /> <div class="partenaires"> <a href="http://norestforthewicked.forum.st/">DEVENIR PARTENAIRE</a><br /><a href="http://norestforthewicked.forum.st/">NOS PARTENAIRES</a> </div> </center> </div> </td> </tr> </tbody> </table> </td> <td rowspan="1"> <div class="PAcontenu3"> <div style="text-transform:uppercase;font-size: 8px;text-align:center;"> Nous sommes en 2014, <br />l'action se situe XXXXXX. </div><br /> Reproduction partielle ou intégrale interdite. Le forum est l'entière propriété de ses administrateurs. Forum ouvert le 00/00/2014. Forum optimisé pour Chrome. Pour profiter du design, installez <a href="https://www.google.fr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=adblock+plus">Adblock Plus</a>. Forum réservé à un public averti.<br /><br /> <center> <iframe style="border: none; width: 200px; height: 27px;" src="http://files.podsnack.com/iframe/embed.html?hash=a1n843mj&t=1411476536" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> </center> </div> </td> </tr> </tbody> </table> </center> <center> <img src="http://i39.servimg.com/u/f39/11/58/14/39/welcom10.png" /> </center>

Si besoin je peux aussi garantir un accès au forum, merci beaucoup Smile

par MlleAlys Mer 20 Mai 2015 - 22:13

Merci, c'est aussi simple pour moi d'avoir un accès oui ^^
Sinon, il faudrait également le code css Razz

par Devilsova Mer 20 Mai 2015 - 22:19

J'ai envoyé le lien du forum par message privé. Est-ce qu'il faut quand même que je poste le CSS? Very Happy

par MlleAlys Mer 20 Mai 2015 - 22:36

Postez le au cas où que je teste si ce n'est pas le fautif, on ne sais jamais, mais à première vue sur votre forum, le code javascript n'est pas pris en compte avec chrome, mais ça fonctionne bien chez moi quand je prend les codes par défaut du tutoriel...
Vérifiez que vous avez le dernier code du tutoriel et peut être si vous avez d'autres codes javascripts que ce n'est pas l'un deux qui comporte une erreur (désactivez les en décochant toutes les pages en éditant le code pour ne garder que celui des onglets)

par Devilsova Jeu 21 Mai 2015 - 16:49

Merci de la réponse rapide, voici le CSS concerné :

Code:: /* ONGLETS POUR LE STAFF */ /* .systab .tab => les onglet */ .systab .tab { padding: 2px 2px; margin-right: 5px; color: #000; background: #; border: 1px solid #; cursor: pointer; } /* .systab .tab:hover => les onglets survolés */ .systab .tab:hover { background: #; color: #487f31; border-color: #; } /* .systab .tab.selected => les onglets sélectionnés */ .systab .tab.selected{ color: #ccc; background: #; } /* .systab .contents => les conteneurs des contenus associés aux onglets */ .systab .contents { margin-top: 1px; margin-bottom: 1px; color: #CBBDB4; background: #; border: 1px solid #; padding: 10px; } /* style des onglets si ils sont à gauche ou à droite */ .systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px; } /* flottement des conteneurs si les onglets sont à gauche où à droite */ .systab.s_float .tabs,.systab.s_float .contents { float: left; }

Qu'entendez-vous par "désactivez les en décochant toutes les pages en éditant le code pour ne garder que celui des onglets"?

par MlleAlys Jeu 21 Mai 2015 - 17:15

Les onglets fonctionnent correctement sur mon forum test avec votre code html de PA, votre code css, et le javascript donné dans le tutoriel :

Code:: $(function() { // clic sur un onglet var d = function() { // si l'onglet est déjà actif, ne rien faire if ($(this).is(".selected")) return; // affiche le contenu correspondant et on met l'onglet en sélectionné var a = $(this).closest(".systab"); a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]); $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]) }; // pour chacun des systèmes d'onglets $("div.systab").each(function() { var a = $("> div", this).detach(), c = this, b; // on ajoute le conteneur d'onglet avant ou après ( si s_bottom ) $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ? "tabs" : "contents") + '"></div>'); $(a).each(function() { b = $(this).children(":first"); b.is("span") ? ( $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove() }); $("> div.contents", this).append(a); b = $(".content:first,.content.selected", this).last(); $(b).addClass("selected").siblings().hide(); $(b).data("tab").addClass("selected") }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d) });

Si ça ne fonctionne pas sur votre forum, une des hypothèse est que peut être vous avez un autre code javascript sur votre forum qui comporte une erreur, et qui donc empêche les autres de fonctionner correctement.
Pour désactiver un code javascript dans modules > javascript, vous pouvez soit le supprimer, soit l'éditer, et pour le champ "Placement" décocher toutes les cases. Enregistrez.
Le but étant de voir si c'est un autre code qui empêche celui des onglets de fonctionner : si vous désactivez tous les codes javascripts sauf celui des onglets et que là les onglets fonctionnent, c'est que le problème vient bien d'un des autres codes.
(Si vous avez mis d'autres codes javascript sur votre forum en les plaçant autre part, par exemple sur la PA, ou dans la description, ou dans un template, etc, vous pouvez aussi essayer de les supprimer temporairement le temps de voir l'un d'eux est à l'origine du beug)

par Devilsova Jeu 21 Mai 2015 - 17:24

Merci de la réponse. Effectivement j'ai enlevé un script et ça semble fonctionner à nouveau. Ce qui est étonnant c'est que tout fonctionnait ensemble quand je travaillais sur le forum et que je n'ai rien rajouté ni modifié depuis et en revenant il y a une semaine, ça ne fonctionnait plus. Mais c'est résolu, merci beaucoup !

Problème d'info-bulles