onglet images staff qui remontent

par Lilynufare Dim 16 Juin 2024 - 16:30

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, 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 : 16/06/2024
Lien du forum : https://vampiresbloodslaves.forumactif.com/

Description du problème

Bonjour,

Je me suis aperçue qu'il y avait un bug sur le codage des onglets du staff sur ma page d'accueil alors que ça ne le faisait pas. On ne voit plus les icons des onglets car les images du staff remontent dessus et on ne peut plus cliquer sur les icons.

C'est une page HTML. Je n'ai rien modifié depuis et je ne comprend pas pourquoi les images remontent sans arrêt.

Code:: <link href="http://fonts.googleapis.com/css?family=Unica+One" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Petit+Formal+Script" rel="stylesheet" type="text/css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /><link href="https://fonts.googleapis.com/css2?family=Elsie&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet" /><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /><link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" /><link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&display=swap" rel="stylesheet" <link="" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Economica:wght@700&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /><link href="https://fonts.googleapis.com/css2?family=Aladin&family=Pirata+One&family=Rye&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Economica:wght@700&family=Elsie&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Economica:wght@700&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Bahianita&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@100&family=Montserrat&family=Open+Sans&family=Ubuntu&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&family=Raleway&family=Ubuntu&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" /><link href="https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC&display=swap" rel="stylesheet" /> <style> .pseudostaff { font-family: 'Petit Formal Script', cursive; font-size: 13px; text-align:center; color:#ae7f59; font-weight:bold; margin-bottom:-15px; } .infostaff { font-weight : bold; text-transform: lowercase!important; font-family: 'Elsie',sans-serif;color: #8A908D; font-weight: bold; font-size: 10px;text-shadow: 0px 0px 1px #00000; text-decoration:none; text-decoration:none; text-align:center; padding-left: 20px; margin-top:-25px; margin-left: 49px; } .infostaff a {text-decoration: none!important; font-weight : bold;text-decoration:none; text-transform: lowercase!important; font-family: 'Elsie',sans-serif; color: #7E1F17; font-weight: bold; font-size: 10px;text-shadow: 0px 0px 1px #00000; } .infos {margin-top:-1px; text-decoration:none :} .pa_racoon .staff { margin: 10% 0 0; text-align: center; letter-spacing: 0px; width:220px; } .paonglet { position:relative;left:52px; display: inline-block; cursor: pointer; } .paonglets span { margin: 0 3%; font-size: 18px; text-align:center; color:#c0885c; } .paonglet_0 {} .paonglet_1 { color: #dcb079; } .contenu_paonglet { display: none; height: auto; padding: 1%; width: 180px; margin: 2% auto; } .contenu_paonglet div { float: center; width: 100%; padding: 0 0 0 0; box-sizing: border-box; } .contenu_paonglet::after { content: ""; clear: both; display: block; } </style> <div style="width:180px;height: 160px;" class="textpa"> <div class="staff"> <script type="text/javascript"> // </script> <div class="paonglets"> <center> <span class="paonglet_0 paonglet" id="paonglet_staff1" onclick="javascript:change_paonglet('staff1');"><img src="https://i.ibb.co/84GB2p6/miniminiboutonold.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff2" onclick="javascript:change_paonglet('staff2');"><img src="https://i.ibb.co/BNmt44d/miniminiboutonnew.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff3" onclick="javascript:change_paonglet('staff3');"><img src="https://i.ibb.co/84GB2p6/miniminiboutonold.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff4" onclick="javascript:change_paonglet('staff4');"><img src="https://i.ibb.co/BNmt44d/miniminiboutonnew.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff5" onclick="javascript:change_paonglet('staff5');"><img src="https://i.ibb.co/84GB2p6/miniminiboutonold.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff6" onclick="javascript:change_paonglet('staff6');"><img src="https://i.ibb.co/BNmt44d/miniminiboutonnew.png" style="" /> </span> </center> </div> <div class="contenu_paonglets"> <div class="contenu_paonglet" id="contenu_paonglet_staff1"> <center> <img src="https://i.ibb.co/8NMFG8b/imagestaffdracula.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis présent ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u1">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=1">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff2"> <center> <img src="https://i.ibb.co/CBSYF40/imagestaffevangeline.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis présente ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u4">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=4">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff3"> <center> <img src="https://i.ibb.co/DK9XPcV/imagestaffniko.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis absente ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u3">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=3">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff4"> <center> <img src="https://i.ibb.co/mqzTjLM/imagestaffestela.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis présente ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u2">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=2">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff5"> <center> <img src="https://i.ibb.co/fMTDBqm/imagestaffmodo.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> RECRUTEMENT EN COURS <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/t1040-recrutement-de-moderateur-trice">ICI</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff6"> <center> <img src="https://i.ibb.co/fMTDBqm/imagestaffmodo.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> RECRUTEMENT EN COURS <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/t1040-recrutement-de-moderateur-trice">ICI</a> </div> </div> </div> <script type="text/javascript"> // </script> </div> </div> </div>

Merci de votre attention

par **Toryudo** Dim 16 Juin 2024 - 18:29

Bonjour !

A priori, c'est une règle dans une extension bloqueuse de publicités qui est à l'origine de la disparition des boutons.
Ne me demandez pas pourquoi c'est comme ça, mais vous pouvez changer toutes les occurrences de :

Code:: change_paonglet

par

Code:: changePaonglet

Et tout refonctionnera.

C'est le fait qu'il y ait un _ dans un onclick qui a l'air de déranger.

par Lilynufare Dim 16 Juin 2024 - 21:49

Bonsoir

Merci beaucoup pour ton aide, ça fonctionne mais du coup je rencontre un nouveau soucis, la première image ne s'affiche pas, elle s'affiche uniquement au clic de l'icon, alors qu'à l'accueil, la première doit rester.

Actuellement avec la modification, elle est ainsi : https://zupimages.net/up/24/24/jdlv.png
Et ça devrait être ainsi tout le temps : https://zupimages.net/up/24/24/re8e.png

Je remets le code modifié

Code:: <link href="http://fonts.googleapis.com/css?family=Unica+One" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Petit+Formal+Script" rel="stylesheet" type="text/css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /><link href="https://fonts.googleapis.com/css2?family=Elsie&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet" /><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /><link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" /><link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&display=swap" rel="stylesheet" <link="" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Economica:wght@700&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /><link href="https://fonts.googleapis.com/css2?family=Aladin&family=Pirata+One&family=Rye&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Economica:wght@700&family=Elsie&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Economica:wght@700&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&family=Langar&family=Rancho&family=Trade+Winds&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Bahianita&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@100&family=Montserrat&family=Open+Sans&family=Ubuntu&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&family=Raleway&family=Ubuntu&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" /><link href="https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC&display=swap" rel="stylesheet" /> <style> .pseudostaff { font-family: 'Petit Formal Script', cursive; font-size: 13px; text-align:center; color:#ae7f59; font-weight:bold; margin-bottom:-15px; } .infostaff { font-weight : bold; text-transform: lowercase!important; font-family: 'Elsie',sans-serif;color: #8A908D; font-weight: bold; font-size: 10px;text-shadow: 0px 0px 1px #00000; text-decoration:none; text-decoration:none; text-align:center; padding-left: 20px; margin-top:-25px; margin-left: 49px; } .infostaff a {text-decoration: none!important; font-weight : bold;text-decoration:none; text-transform: lowercase!important; font-family: 'Elsie',sans-serif; color: #7E1F17; font-weight: bold; font-size: 10px;text-shadow: 0px 0px 1px #00000; } .infos {margin-top:-1px; text-decoration:none :} .pa_racoon .staff { margin: 10% 0 0; text-align: center; letter-spacing: 0px; width:220px; } .paonglet { position:relative;left:52px; display: inline-block; cursor: pointer; } .paonglets span { margin: 0 3%; font-size: 18px; text-align:center; color:#c0885c; } .paonglet_0 {} .paonglet_1 { color: #dcb079; } .contenu_paonglet { display: none; height: auto; padding: 1%; width: 180px; margin: 2% auto; } .contenu_paonglet div { float: center; width: 100%; padding: 0 0 0 0; box-sizing: border-box; } .contenu_paonglet::after { content: ""; clear: both; display: block; } </style> <div style="width:180px;height: 160px;" class="textpa"> <div class="staff"> <script type="text/javascript"> // </script> <div class="paonglets"> <center> <span class="paonglet_0 paonglet" id="paonglet_staff1" onclick="javascript:changePaonglet('staff1');"><img src="https://i.ibb.co/84GB2p6/miniminiboutonold.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff2" onclick="javascript:changePaonglet('staff2');"><img src="https://i.ibb.co/BNmt44d/miniminiboutonnew.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff3" onclick="javascript:changePaonglet('staff3');"><img src="https://i.ibb.co/84GB2p6/miniminiboutonold.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff4" onclick="javascript:changePaonglet('staff4');"><img src="https://i.ibb.co/BNmt44d/miniminiboutonnew.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff5" onclick="javascript:changePaonglet('staff5');"><img src="https://i.ibb.co/84GB2p6/miniminiboutonold.png" style="" /> </span><span class="paonglet_0 paonglet" id="paonglet_staff6" onclick="javascript:changePaonglet('staff6');"><img src="https://i.ibb.co/BNmt44d/miniminiboutonnew.png" style="" /> </span> </center> </div> <div class="contenu_paonglets"> <div class="contenu_paonglet" id="contenu_paonglet_staff1"> <center> <img src="https://i.ibb.co/8NMFG8b/imagestaffdracula.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis présent ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u1">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=1">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff2"> <center> <img src="https://i.ibb.co/CBSYF40/imagestaffevangeline.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis présente ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u4">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=4">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff3"> <center> <img src="https://i.ibb.co/DK9XPcV/imagestaffniko.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis absente ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u3">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=3">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff4"> <center> <img src="https://i.ibb.co/mqzTjLM/imagestaffestela.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> Je suis présente ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/u2">Profil</a> ✞ <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/privmsg?mode=post&u=2">mp</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff5"> <center> <img src="https://i.ibb.co/fMTDBqm/imagestaffmodo.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> RECRUTEMENT EN COURS <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/t1040-recrutement-de-moderateur-trice">ICI</a> </div> </div> </div> <div class="contenu_paonglet" id="contenu_paonglet_staff6"> <center> <img src="https://i.ibb.co/fMTDBqm/imagestaffmodo.png" style="margin-bottom: 5px;width: 278px;height: 88px;top:-8px;" /> </center> <div class="infos"> <div class="infostaff"> RECRUTEMENT EN COURS <a rel="nofollow" target="_blank" class="postlink" href="https://vampiresbloodslaves.forumactif.com/t1040-recrutement-de-moderateur-trice">ICI</a> </div> </div> </div> <script type="text/javascript"> // </script> </div> </div> </div>

par **Toryudo** Lun 17 Juin 2024 - 8:55

Bonjour !

Si vous regardez votre code, il reste un dernier "change_paonglet" à la toute fin, il faut la remplacer également Wink

par Lilynufare Lun 17 Juin 2024 - 10:18

Bonjour,

Oh parfait, je n'avais pas vu, merci beaucoup, ça marche Smile

Résolu !

onglet images staff qui remontent