Codage en vrac

[Hamtaro59185]

Détails techniques

Version du forum : phpBB2
Poste occupé : Membre
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : Depuis 1 semaine
Lien du forum : http://www.op-seken.com/

Description du problème

Bonjour à toutes et à tous,

je ne sais pas si le problème est récurrent aux autres forums, mais je me permets de poster ici en ayant tenté de voir si d'autres personnes avaient le même problème. Depuis quelques temps, les codages ne sont plus à jour, c'est-à-dire que certaines parties ne sont plus prises en compte, essentiellement la partie CSS.

Je me permets de vous mettre les captures d'écrans des résultats ici

Pendant le problème:

Après le problème:

Code:

Je vous mets en même temps le code de ma compagne qui sera un exemple. Un grand merci à vous pour votre future aide !

[mSyx]

Salut à toi o/
J'ai testé ton code sur mon forum test, c'est bien ce à quoi c'est censé ressembler ?:
https://syxtestspace.forumactif.com/t6-test-code-codage-en-vrac#22

[Hamtaro59185]

Bonjour, merci pour la réponse rapide. C'est effectivement la ressemblance au code. Pourtant, sur le nôtre, l'image ne s'affiche pas alors que je reprends une réponse toute faite en citation... Je ne comprends vraiment pas l'origine du problème. C'est la même chose pour un autre membre, sauf que son code ne s'affiche pas DU TOUT !

[mSyx]

Cette partie-là, à la fin du code, est incorrecte:

Code:

<img src="[url=https://www.casimages.com/i/200213013125257731.jpg.html][img]https://nsa40.casimages.com/img/2020/02/13/200213013125257731.jpg[/img][/url]

Vu que le lien est simplement la visionneuse de l'image qui suit, j'imagine qu'il n'était pas voulu :b
Pour corriger le tout, ça donnerait:

Code:

<img src="https://nsa40.casimages.com/img/2020/02/13/200213013125257731.jpg" />

Il y a également trois div d'ouvertes et aucune fermeture: les deux du début et le <div> à la fin.

Code:


<div style="width: 600px; height: 650px; background: url(https://2img.net/image.noelshack.com/fichiers/2020/07/6/1581806242-prez-rp-2.jpg) center center no-repeat; margin: auto; padding-top: 70px;"><div style="width: 450px margin: auto; height: 600px; overflow: auto; color: #993399 ;text-align: justify; padding-left: 20px; padding-right: 20px;">...
<div>

J'imagine que la div de fin était censée fermer le tout, mais il manquerait tout de même une autre div qui ne serait toujours pas fermée. Du coup, tu peux essayer de changer le:

Code:

<div>

en:

Code:

</div></div>

Il y a d'autres petites erreurs:

• width: 450px margin: auto;
ce qui est à corriger, en vert: width: 450px; margin: auto;
• color: #993399 ; margin: auto;
ce qui est à corriger, en vert: color: #993399; margin: auto; - pas d'espace
• font-style: italic"
ce qui est à corriger, en vert: font-style: italic;"
• padding-bottopm:
ce qui est à corriger, en vert: padding-bottom:

[Hamtaro59185]

Déjà, un grand merci pour les corrections apportées, c'est vrai que je ne code plus depuis ... 5 ans ? Du coup je ne prends plus autant de temps à chercher les fautes... J'utilise mes anciens codages xD

Par-contre, je ne comprends pas le dépassement du cadre alors qu'il y a la balise ci-dessous

Code:

overflow: auto;

De plus, le cadre de la musique semble sortir du cadre alors que sa largeur est inférieure à celle du grand cadre...

Code:

<div style="width: 600px; height: 650px; background: url(https://2img.net/image.noelshack.com/fichiers/2020/07/6/1581806242-prez-rp-2.jpg) center center no-repeat; margin: auto; padding-top: 70px; overflow: auto;"></div>

Code:

<iframe width="550" height="50" src="https://www.youtube.com/embed/WVwuE9NT0Us" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Merci pour les aides !


Voici le code en entier

Code post modification:

[mSyx]

Je te comprends entièrement :p

À savoir que pour cacher tout ce qui dépasserait d'un élément, il faudrait utiliser overflow: hidden;; de son côté, overflow: auto; aura tendance à ajouter une scrollbar si le contenu est plus large que la largeur de l'élément (ou plus haut que sa hauteur).

Il y a une seconde div qui contient tout le contenu du cadre général; la largeur de cette seconde div est inférieure à la largeur de l'iframe, d'où le fait que la scrollbar apparaisse. Le résultat que tu cherches à avoir serait celui-ci ?:

[Hamtaro59185]

Yes, c'est tout à fait ça

[mSyx]

J'ai déplacé la seconde div pour qu'elle n'entoure que le texte et le contenu du base; on laisse l'iframe prendre sa largeur spécifiée dans le cadre général, par lequel elle ne dépassera pas;

Code:

<div style="width: 600px; height: 650px; box-sizing: border-box; background: url(https://2img.net/image.noelshack.com/fichiers/2020/07/6/1581806242-prez-rp-2.jpg) center center no-repeat; margin: auto; padding-top: 70px; overflow: auto; text-align: center;"><span style="font-family: impact; color: #990099; font-size: 30px; text-shadow: 1px 1px 0px #cc00cc;border-bottom: 1px dotted #ff0099; padding-bottom: -6px; display: block; text-align: center;"><span style="color: #660066; font-family: monotype corsiva; font-size: 50px; font-style: italic;">I</span>vrogne, quel est votre métier ?</span>
<iframe width="550" height="50" src="https://www.youtube.com/embed/WVwuE9NT0Us" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<div style="width: 450px; margin: auto; color: #993399; text-align: justify; padding-left: 20px; padding-right: 20px;">[b]Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
 
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b]  

<p style="width: 90%; margin: auto; margin-bottom: 10px; background: url() left center no-repeat #efdada; border: 1px dashed #9b6464; color: #674a4a; padding-top: 4px; padding-left: 20px; padding-bottom: 4px; padding-right: 4px; text-align: justify; font-size: 12px;"><img src="https://nsa40.casimages.com/img/2020/02/13/200213013125257731.jpg" />[b]
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b]</p></div></div>

Dis-moi si ça te convient ou s'il y a quelque chose que tu aimerais changer

[Hamtaro59185]

La quasi totalité semble parfait... Je ne comprends toujours pas pourquoi la barre de scrolling ne s'affiche pas...

[mSyx]

C'est bien sur ce sujet ?:


Si oui, les scrollbars s'affichent parfaitement de mon côté

[Hamtaro59185]

Yes, c'est bien sur One piece seken :/

[mSyx]

Tu peux me faire un screen d'un RP de "GOAT D. DAIKI" ?

[Hamtaro59185]

Tu entends quoi par un screen ? Tu veux le code pendant le rp ? Juste le post ?

[mSyx]

J'ai pris une capture d'écran (screen) du dernier message du sujet, qui a été posté par "GOAT D. DAIKI":


Est-ce que tu vois la même chose ? Si non, j'aurais besoin que tu prennes une capture d'écran de son message et que tu me le montres ici :b

[Hamtaro59185]

Voilà ce que je vois

[mSyx]

Re,
Bizarre. o.o

On va essayer deux codes différents. Essaies le premier avant, voire si ça fonctionne; sinon, ça sera le deuxième :/

Dans le premier, on va déplacer le overflow: auto; pour voir si ça fonctionne mieux:

Code:

<div style="width: 600px; height: 650px; box-sizing: border-box; background: url(https://2img.net/image.noelshack.com/fichiers/2020/07/6/1581806242-prez-rp-2.jpg) center center no-repeat; margin: auto; padding-top: 70px; text-align: center;"><span style="font-family: impact; color: #990099; font-size: 30px; text-shadow: 1px 1px 0px #cc00cc;border-bottom: 1px dotted #ff0099; padding-bottom: -6px; display: block; text-align: center;"><span style="color: #660066; font-family: monotype corsiva; font-size: 50px; font-style: italic;">I</span>vrogne, quel est votre métier ?</span>
<iframe width="550" height="50" src="https://www.youtube.com/embed/WVwuE9NT0Us" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
<div style="width: 450px; overflow: auto; margin: auto; color: #993399; text-align: justify; padding-left: 20px; padding-right: 20px;">[b]Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
 
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b]  
 
<p style="width: 90%; margin: auto; margin-bottom: 10px; background: url() left center no-repeat #efdada; border: 1px dashed #9b6464; color: #674a4a; padding-top: 4px; padding-left: 20px; padding-bottom: 4px; padding-right: 4px; text-align: justify; font-size: 12px;"><img src="https://nsa40.casimages.com/img/2020/02/13/200213013125257731.jpg" />[b]
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b]</p></div></div>

Si ça ne fonctionne toujours pas, le deuxième va permettre de forcer le scroll, mais ça laissera -normalement- la barre de scrolling à droite en permanence; qu'il y en ait besoin ou non:

Code:

<div style="width: 600px; height: 650px; box-sizing: border-box; background: url(https://2img.net/image.noelshack.com/fichiers/2020/07/6/1581806242-prez-rp-2.jpg) center center no-repeat; margin: auto; padding-top: 70px; overflow-y: scroll; text-align: center;"><span style="font-family: impact; color: #990099; font-size: 30px; text-shadow: 1px 1px 0px #cc00cc;border-bottom: 1px dotted #ff0099; padding-bottom: -6px; display: block; text-align: center;"><span style="color: #660066; font-family: monotype corsiva; font-size: 50px; font-style: italic;">I</span>vrogne, quel est votre métier ?</span>
<iframe width="550" height="50" src="https://www.youtube.com/embed/WVwuE9NT0Us" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
<div style="width: 450px; margin: auto; color: #993399; text-align: justify; padding-left: 20px; padding-right: 20px;">[b]Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
 
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b]  
 
<p style="width: 90%; margin: auto; margin-bottom: 10px; background: url() left center no-repeat #efdada; border: 1px dashed #9b6464; color: #674a4a; padding-top: 4px; padding-left: 20px; padding-bottom: 4px; padding-right: 4px; text-align: justify; font-size: 12px;"><img src="https://nsa40.casimages.com/img/2020/02/13/200213013125257731.jpg" />[b]
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b]</p></div></div>

J'ai eu beau chercher, j'ai pas du tout trouvé pourquoi ça ne fonctionnerait pas pour toi

[Hamtaro59185]

Nop, le scrolling ne fonctionne pas, du coup je ne comprends pas...

Edit : J'ai testé sur différents navigateurs, toujours le même problème

[mSyx]

Je viens de vérifier moi-même sur d'autres navigateurs: aucun problème; pareil en prenant des captures d'écran à partir d'un site. Du coup, ça a l'air d'être un problème de ton côté. Pour être sûr, tu peux aussi demander à d'autres membres du forum s'ils voient la scrollbar ou non ?

Deux questions rapides:
- Tu es sous Windows ou Mac OS ?
- Si tu es toujours sur Firefox, celui-ci est à jour ?

[Hamtaro59185]

Le problème ne vient pas que de chez moi mais je vais faire un post histoire de tester pour toi sur le forum. A savoir que je suis sous Windows et mes drivers, pilotes, logiciels sont tous à jour.

lien du post:

[mSyx]

Il manque deux propriétés importantes de style que j'avais ajouté :b
Dans ta première div, celle dont le style commence par:

Code:

<div style="width:600px;height:650px;background:url(&quot;https://2img.net/image.noelshack.com/fichiers/2020/07/6/1581806242-prez-rp-2.jpg&quot;)

Ajoute ceci dans le style de la div:

Code:

overflow: auto; box-sizing: border-box;

[Hamtaro59185]

J'viens de les ajouter mais nop , it doesnt work

Edit : Mais c'est le code qui s'enlève tout seul ! Je viens de faire le test et il se retire automatiquement... Je ne comprends pas

[mSyx]

J'ai corrigé quelques petites erreurs -sait-on jamais-, comme le <p> qui avait un background vide (background: url() left center no-repeat #efdada;) et un padding négatif:

Code:

<div style="width: 600px; height: 650px; box-sizing: border-box; background: url(https://2img.net/image.noelshack.com/fichiers/2020/07/6/1581806242-prez-rp-2.jpg) center center no-repeat; margin: auto; padding-top: 70px; overflow: auto; text-align: center;"><span style="font-family: impact; color: #990099; font-size: 30px; text-shadow: 1px 1px 0px #cc00cc;border-bottom: 1px dotted #ff0099; display: block; text-align: center;"><span style="color: #660066; font-family: monotype corsiva; font-size: 50px; font-style: italic;">I</span>vrogne, quel est votre métier ?</span>
<iframe width="550" height="50" src="https://www.youtube.com/embed/WVwuE9NT0Us"></iframe>
 
<div style="width: 450px; margin: auto; color: #993399; text-align: justify; padding-left: 20px; padding-right: 20px;">[b]Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
 
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b] 
 
<p style="width: 90%; margin: auto; margin-bottom: 10px; border: 1px dashed #9b6464; color: #674a4a; padding-top: 4px; padding-left: 20px; padding-bottom: 4px; padding-right: 4px; text-align: justify; font-size: 12px;"><img src="https://nsa40.casimages.com/img/2020/02/13/200213013125257731.jpg" />[b]
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.[/b]</p></div></div>

Si ça le refait, est-ce que tu fais une prévisualisation du code avant de poster le message ? Si oui, il se peut qu'en étant en mode BBCode et en faisant une prévisualisation, le code soit changé (même si c'est un problème qui n'est plus censé être d'actualité il me semble)

[Hamtaro59185]

J'ai tjs le même problème avec ou sans prévisualisation. Lorsque je rajoute la ligne que tu m'as demandée, elle se retire automatiquement, comme par magie. Du coup, c'est la première fois que je vois un tel problème... Je ne comprends pas pour le coup xD

[mSyx]

Bon, j'ai trouvé le coupable.
» https://forum.forumactif.com/t403194-nouveau-protegez-le-html-dans-les-messages-de-vos-forums

Je n'ai aucune idée de pourquoi, mais si le HTML protégé est activé, le overflow disparaît; le box-sizing aussi d'ailleurs.

[Hamtaro59185]

J'en fais part à mon staff et te dirait si c'est résolu ou non.

En tout cas un gros Big up à toi qui m'as aidé tout un après-midi ! Je t'envoie plein de graines de tournesol Hami étranger ! <3


Edit : Tu avais vu juste, c'était bien la limitation du HTML qui bloquait le tout ! Le codage refonctionne, un grand merci à toi

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Edit : Tu avais vu juste, c'était bien la limitation du HTML qui bloquait le tout ! Le codage refonctionne, un grand merci à toi

Bonjour, Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton