Problème de scroll dans une fiche

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://suseon-hakkyo.forumactif.com/

Description du problème

Bonjour !

Je viens vous voir parce que nous rencontrons un problème de scrollage dans la fiche de présentation que j'ai codée pour mon dernier forum. Ca se passe dans la case consacrée à l'histoire, dans le deuxième onglet, le scroll n'est pas immédiat, il faut cliquer sur le texte pour pouvoir descendre le contenu, et parfois il faut chipoter pour pouvoir y arriver.

J'ai essayé de regarder le problème en inspectant la page et en forçant l'overflow en auto, mais ça me le mettait en barré avec le message comme quoi la position statique le bloquait, sauf que je n'utilise jamais cette position ^^' Du coup je sais pas quoi faire...

Je vous mets le code de ladite fiche ici :

Code:

<div class="FP"><div class="FPhead"><img src="https://i.pinimg.com/564x/f5/ea/64/f5ea644ba2d106ea8867e016b5377048.jpg" class="headimg" /><div class="FPbtn"><div class="tabs-onglets"><a href="#onglet1"><span class="FAbtn">1 </span></a><a href="#onglet2"><span class="FAbtn">2</span></a></div></div><div class="FPname">Pseudo<div>ft. faceclaim</div></div>

<div class="FPbody"><div id="onglet1"><center><span class="sh"><suseonhak1>Informations</suseonhak1></span></center>
<div class="FPinfos"><span>❖ Nom Prénom :</span> écrire ici
<hr /><span>❖ Âge & date de naissance :</span> écrire ici
<hr /><span>❖ Nationalité :</span> écrire ici
<hr /><span>❖ Année d'études & option :</span> écrire ici
<hr /><span>❖ Orientation sexuelle :</span> écrire ici
<hr /><span>❖ Statut matrimonial :</span> écrire ici
<hr /><span>❖ Statut social :</span> écrire ici
<hr /><span>❖ Sang :</span> écrire ici
<hr /><span>❖ Maison :</span> écrire ici</div><div class="FPinfos1"><img src="https://i.pinimg.com/564x/e1/08/e9/e108e9fb4e205aa0ea6400022df80451.jpg" /><img src="https://i.pinimg.com/564x/e1/08/e9/e108e9fb4e205aa0ea6400022df80451.jpg" /><img src="https://i.pinimg.com/564x/e1/08/e9/e108e9fb4e205aa0ea6400022df80451.jpg" /></div>
<div class="FPinfosM"><span>❖ Patronus :</span> écrire ici
<span>❖ Épouvantard :</span> écrire ici
<span>❖ Composition de la baguette :</span> écrire ici
<span>❖ Animal de compagnie :</span> écrire ici
<span>❖ Métier envisagé :</span> écrire ici</div><span class="sh"><suseonhak1>Pseudo joueur</suseonhak1></span>
<img src="https://i.pinimg.com/564x/76/42/76/764276c137da6bf84cfd4fc93083d6cf.jpg" class="FPimgJ" /><div class="FPinfosJ">Parle-nous de toi, de comment tu as trouvé le forum, de ton plat préféré, toussa toussa</div>
<center><span class="déco">━◦❖◦━</span></center></div><!--

--!><div id="onglet2"><center><span class="déco">━◦❖◦━</span></center><img src="https://i.pinimg.com/564x/6d/ef/16/6def16b326701812165e5403d2cfcddc.jpg" class="FPava" /><div class="FPcara"><center><span class="sh"><suseonhak1>Caractère</suseonhak1></span></center><div class="FPcaratxt">Décrivez le caractère de votre personnage, dans le format que vous souhaitez !</div></div>
<span class="sh"><suseonhak1>Histoire</suseonhak1></span>
<div class="FPstory"><span class="déco">━◦❖</span>Rédigez l'histoire de votre personnage, dans le format de votre choix !</div>
<div class="FPquote"><soustitre>une jolie citation</soustitre></div><img src="https://i.pinimg.com/564x/6c/b0/be/6cb0bed5bc20c79a2b26d0d459145f2a.jpg" class="FPstoryimg" />
<br /></div></div></div></div><center><div class="credYU">byYunie</div></center>

<style>.FP{width:550px;height:auto;margin:auto;background:var(--degrade1)!important;border-radius:10px;padding:5px;}.FPhead{width:100%;min-height:500px;background:var(--fond-cat);padding:30px;border-radius:10px;}.headimg{width:150px;height:90px;border:1px solid var(--couleur_trois);padding:5px;border-radius:5px;float:left;margin-right:10px;object-fit:cover;margin-top:-10px}.FPname{color:var(--couleur_texte);font-family: "Julius Sans One", sans-serif;font-size:17px;letter-spacing:3px;margin-top:10px;}.FPname div{font-family: "Handlee", cursive;font-size:12px;}.FPbtn{float:right;}.FPinfos{width:220px;height:250px;overflow:auto;padding:10px;background:var(--less-white);border-radius:10px;position:relative;}.FPinfos span{font-family: "Handlee", cursive;font-size:12px;text-transform:uppercase;color:var(--couleur_un);}.FPinfosM{border-radius:10px;width:225px;height:155px;overflow:auto;padding:10px;background:var(--less-white);position:absolute;margin-left:250px;margin-top:-173px;font-size:11px;}.FPinfosM span{font-family: "Handlee", cursive;font-size:11px;text-transform:uppercase;color:var(--couleur_un);}.FPinfos1{width:175px;height:75px;object-fit:cover;margin-left:245px;margin-top:-245px;border-radius:10px;display:flex;float:left;}.FPinfos1 img {width:75px!important;height:75px;object-fit:cover!important;margin-right:5px;border-radius:5px;border:1px solid var(--couleur_trois);padding:5px;}.FPinfos1 img img {width:75px!important;height:75px;object-fit:cover!important}.FPinfosJ{width:360px;height:100px;background:var(--less-white);padding:10px;border-radius:10px;margin-top:10px;overflow:auto;}.FPimgJ{float:right;width:100px;height:100px;border-radius:10px;border:1px solid var(--couleur_trois);padding:5px;object-fit:cover;margin-top:10px;}.FPstory{width:320px;height:200px;background:var(--less-white);text-align:justify;border-radius:10px;overflow:auto;padding:10px;margin-top:10px;}.FPquote{width:150px;height:75px;overflow:auto;background:var(--couleur_trois);border-radius:10px;text-align:center;padding:10px;align-items:center;margin-left:330px;margin-top:-220px;}.FPstoryimg{width:150px;height:115px;object-fit:cover;margin-left:330px;border-radius:10px;margin-top:10px;}.FPava{width:170px;height:210px;border-radius:10px;object-fit:cover;border:1px solid var(--couleur_trois);padding:5px;margin-top:10px;z-index:50;}.FPcara{height:210px;width:280px;margin-top:20px;margin-left:195px;margin-top:-210px;text-align:justify;}.FPcaratxt{width:100%;height:170px;background:var(--less-white);border-radius:10px;padding:10px;text-align:justify;overflow:auto}</style>

Merci d'avance

[MlleAlys]

Bonjour,
Lorsque je teste différentes modifs, le problème a l'air de venir de vos marges négatives. Sans marges négatives, aucun souci de scroll.

[Yunie16]

Merci pour l'info, j'ai pu résoudre le problème de mon côté du coup !