Problème de bbcode dans une fiche html

[Invité]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dès la mise en page terminée des fiches de présentation
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Nous sommes actuellement en cours de préparation de notre future maj pour notre forum rpg. Nous avons décidé de changer les fiches de présentation complètement, pour se faire nous allons utilisé un code en libre service que nous avons remanié un peu pour créer des fiches de présentation, une fiche pour l'histoire, une pour les scénarios etc.

Cependant, nous préparons la maj en amont de l'installation du nouveau design sur le forum (pour ne pas que les fiches soient toutes cassées à l'installation du design, et que les membres n'aient pas a changé eux même leurs codes). Pour se faire nous copions le contenu des fiches de nos membres dans le nouveau code sur notre forum test, nous transfèrerons les nouvelles fiches le jour de la maj. Mais il apparaît plusieurs bugs dès lors que les membres ont personnalisé leurs contenus avec des spoilers, des images, qu'ils veulent centrer (même avec la balise <center> cela met des espaces incroyables)...

Je n'arrive pas à comprendre d'où vient le problème. Le HTML n'est pas limité sur le forum. Le seul moyen pour contourner ces problèmes, par exemple pour le centrer et de créer un <span class="centrer">***</span> par exemple mais je ne suis pas sûre que ça soit la solution adéquate.

Merci d'avance et bonne journée

[Lixyr]

Bonjour,

Pour la balise center, celle-ci n'est plus recommandée. Pour centrer des textes, le mieux est d'utiliser la balise paragraphe et de la personnaliser :

Code:

<p></p>

Si vous avez un lien vers une fiche qui pose problème, on pourrait regarder ce qui ne va pas, et corriger au fur et à mesure.

[Invité]

Bonjour Lixyr, merci pour votre réponse

Alors par exemple celle-ci, j'ai réussi à contourner le problème en créant le code "span" dont je parle dans le premier message mais visiblement ce n'est pas la solution adéquate ? Egalement les balises spoiler / hide et autres ne fonctionnent pas non plus (uniquement à l'intérieur des codes de présentation. Le hide est problématique comme nous l'utilisons pour cacher les contenus sensibles éventuels.





Je peux, si besoin donner le codes des présentations, ici c'est le code de l'histoire mais comme dis plus haut, nous en avons un pour la présentation du personnage, un pour les scénarios etc.

Est-ce qu'il est toujours possible d'utiliser les codes type [b] [color=bidule] ou il faut changer ça également ?

Merci d'avance

[Scoubifitz]

Bonjour,

... Mais il apparaît plusieurs bugs dès lors que les membres ont personnalisé leurs contenus avec des spoilers, des images, qu'ils veulent centrer (même avec la balise <center> cela met des espaces incroyables)...

Les espaces peuvent provenir de l'utilisation du HTML avec retour à la ligne dans l'éditeur de message;
L'HTML doit être mis sur une seule ligne pour ne pas subir les sauts de lignes supplémentaires.

... Le HTML n'est pas limité sur le forum...

A lire :  
https://forum.forumactif.com/t403194-nouveau-protegez-le-html-dans-les-messages-de-vos-forums

[Invité]

Bonjour Scoubifitz,

Pour les espaces interminables quand on utilisait le <center>, qu'il y ait ou non un retour à la ligne nous avions ces espaces mais Lixyr m'a indiqué que ce n'était plus la manière de faire pour centrer un texte. J'ai essayé de contourner le problème en créant un span pour centrer les éléments que les membres souhaitent, mais je ne sais pas si c'est la bonne façon de faire.

Le gros soucis c'est surtout qu'à l'intérieur de ce nouveau code de présentation, je ne peux plus utiliser de spoiler ou de hide par exemple alors que ces fonctions étaient très utiles, notamment pour cacher les contenus sensibles qui pouvaient être écrits. Mais je ne sais pas si les spoilers/hides sont des balises risquées ? Dans ce cas, comment faire ? (J'avais déjà lu le sujet que vous m'avez donné, et je l'ai relu mais je suis un peu perdue car je pensais que les spoiler/hide n'étaient pas concernés puisque c'est une fonction proposée directement par FA ?)

Je voulais savoir également si on pouvait toujours utiliser les codes comme [b] ou [color=codeici] dans mon code html ? Cela fonctionne pour l'instant sans faire de bugs mais je ne sais pas si c'est mieux de dire à nos membres de faire autrement ? Par exemple en écrivant plutôt <b> ? Et pour les couleurs, j'ai un doute sur l'écriture ?

Je ne sais pas si c'est clair, sinon n'hésitez pas.

Bonne journée et merci
Swirly

[Invité]

Petit up

[Invité]

Bonjour, petit up J'aimerais au moins régler les soucis des spoiler/hide qui ne fonctionnent pas dans le code html de ma fiche c'est le plus "urgent"

[Lixyr]

Bonsoir,

Normalement, les balises hide et spoiler fonctionnent, si elles sont au format BBCode :

Code:

[hide][/hide]

Code:

[spoiler][/spoiler]

Elles ne fonctionnent pas au format HTML.

Pour centrer des contenus, le mieux est d'utiliser les balises div plutôt que span.

Code:

<div style="text-align: center;">CONTENU</div>

Après, si ce n'est pas le texte, mais la balise en elle-même que vous souhaitez centrer dans un endroit, ce serait plutôt :

Code:

<div style="width: METTRE_UNE_TAILLE_EN_px; margin: auto;">CONTENU</div>

Mais après, il faut voir si le BBCode est autorisé dans le message.

Pour ça, il faudrait éditer le dit message, et vérifier dans les permissions, en bas, si la fonction "Désactiver le BBCode dans ce message" est décochée.

De mon point de vue, BBCode et HTML ne font pas toujours bon ménage. Les balises spoiler et hide sont très pratiques, mais pour la mise en page, les couleurs etc, il faudrait plutôt coder ça avec du CSS, car le BBcode est envahissant, et le code peut vite devenir un vrai fouillis et contenir des erreurs.

[Invité]

Bonsoir,

Normalement, les balises hide et spoiler fonctionnent, si elles sont au format BBCode :

Code:

[hide][/hide]

Code:

[spoiler][/spoiler]

Elles ne fonctionnent pas au format HTML.

Bonsoir Lixyr

Merci beaucoup pour votre réponse et le temps que vous m'accordez

Je viens de tester les balises hide et spoiler comme indiqué, cela fonctionne un peu mieux mais j'ai toujours des espaces indésirables qui apparaissent avant et après 

Pour centrer des contenus, le mieux est d'utiliser les balises div plutôt que span.

Code:

<div style="text-align: center;">CONTENU</div>

Après, si ce n'est pas le texte, mais la balise en elle-même que vous souhaitez centrer dans un endroit, ce serait plutôt :

Code:

<div style="width: METTRE_UNE_TAILLE_EN_px; margin: auto;">CONTENU</div>

Cela fonctionne avec le premier code, mais parfois cela m'ajoute également des espaces indésirables (et parfois pas, par exemple je l'ai utilisé dans le code que j'ai posté précédemment et cela me met un espace que pour le premier élément que je centre, pas pour les autres que je centre ensuite)

EDIT : je crois avoir trouvé : le height qui règle la hauteur du paragraphe semble crée les espaces indésirables, car lorsque je l'enlève cela ne me fait plus d'espace, mais cela m'empêche de ne pas pouvoir gérer la hauteur, est-ce qu'il y a un moyen de régler ceci ? Voici le code (il s'agit du height : 320 px qui semble poser problème)

Code:

.c_truefacts2 p {
    line-height: 1.5;
    padding-right: 5px;
    margin-bottom: 15px;
    /* height: 320px; */
    overflow: auto;
    width: 460px;
}

Mais après, il faut voir si le BBCode est autorisé dans le message.

Pour ça, il faudrait éditer le dit message, et vérifier dans les permissions, en bas, si la fonction "Désactiver le BBCode dans ce message" est décochée.

De mon point de vue, BBCode et HTML ne font pas toujours bon ménage. Les balises spoiler et hide sont très pratiques, mais pour la mise en page, les couleurs etc, il faudrait plutôt coder ça avec du CSS, car le BBcode est envahissant, et le code peut vite devenir un vrai fouillis et contenir des erreurs.

Le BBcode est bien autorisé dans les messages concernés, je teste sur mon forum test justement, cela me permet de ne pas faire de bêtises sur le forum originel Est-ce que les espaces indésirables avec les hide et spoiler peuvent venir du code HTML de la fiche ou de son CSS ?

Merci pour votre réponse encore et bonne soirée

[Lixyr]

Pour les espaces, il faudrait que vous me donniez le lien d'un endroit où on peut les constater, que je vois si ce sont des espaces dus à la hauteur, comme vous dites, ou bien dus aux marges intérieures ou extérieures, au HTML, etc.

[Invité]

Bonjour Lixyr,

Voici un sujet où j'ai posté plusieurs codes avec des hides/spoilers, en bidouillant avec un max-height et en mettant le css des paragraphes sur les éléments parents (si je ne dis pas de bêtises), j'arrive plus ou moins à régler le soucis mais pas partout...



Merci encore

[Lixyr]

Alors, effectivement, il y a des br br br br partout. Ça vient du mélange HTML et BBCode.

Quand on code en HTML, toutes les balises sont collées. Il doit en être de même avec les balises BBCode. En gros, vous ne devez avoir aucun retour à la ligne dans votre code (comprendre : vous ne devez pas appuyer sur la touche entrée), car il sera interprété.

Mettez votre code ici, entre balises code, que je vous montre ce qui ne va pas.

[Invité]

Ah je comprends mieux du coup cela ne servait à rien de vouloir bidouiller, j'ai encore beaucoup à apprendre

Voici le code

[Lixyr]

Effectivement.

Alors, à certains endroits, vous avez mis quelque chose comme ça :

Code:

<!--

FOOTER -->

Ca, c'est bien, car normalement les espaces à l'intérieur ne sont pas pris en compte. J'ai bien dit "normalement"... Je ne suis pas vraiment sûre du comportement que peut avoir les zones de message avec ça.

Par contre, pour le reste du code, surtout là où vous avez mis vos span, spoiler, et hide, il ne faut pas sauter de ligne, car les sauts de ligne sont interprétés en BBCode. Pareil à l'intérieur des paragraphes. Pour ne pas avoir de problème, le mieux est de coder les sauts de ligne en HTML, avec la balise unique br .

Voici ce que ça donne à peu près :

Code:

<div class="caspianpres"><!--

HEADER --><header><headername>PRENOM NOM</headername></header><!--

DETAIL --><div class="c_name">prénom</div><!--

IDENTITE --><div class="c_tolerance">Identité</div><div class="c_infos"><p><span class="bgfiche2">Nom/prénom(s)</span> réponse ☽ <span class="bgfiche2">Age/lieu de naissance</span> réponse ☽ <span class="bgfiche2">Origine(s) et nationalité(s)</span> réponse ☽ <span class="bgfiche2">Sexualité</span> réponse ☽ <span class="bgfiche2">Etat civil</span> réponse ☽ <span class="bgfiche2">Occupation(s) ou métier</span> réponse ☽ <span class="bgfiche2">Groupe</span> réponse ☽ <span class="bgfiche2">Avatar</span> réponse ☽ <span class="bgfiche2">Compte supprimé</span> personnage proposé en scénario ou personnage considéré comme mort (voir le règlement - pour rappel ce choix ne s'applique que si ton personnage avait rencontré son âme sœur)</p></div><!--

INFORMATIONS --><div class="c_caractere"><img src="https://images2.imgbox.com/83/fa/jTjyguM3_o.png" class="c_avatar" alt="" /><div class="c_carac_txt"><h2>LES DÉTAILS</h2><p><span class="bgfiche">SIGNE(S) DISTINCTIF(S)</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis. Quisque aliquet lacinia erat in pharetra. Quisque ac nisl et est euismod iaculis. Donec nec nisi non massa semper tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis lobortis neque. Suspendisse potenti.<br /><br /><span class="bgfiche">PHRASE ET EMPLACEMENT</span> Précise ici la phrase d'origine de ton personnage, celle qu'il a eu sur le corps dès sa naissance. Raconte nous où elle se trouve sur son corps et n'oublie pas que sa marque d'origine doit forcément être dans la langue de son pays de naissance.<br /><br /><span class="bgfiche">ÂME SOEUR</span> On veut tout savoir, est-ce que ton personnage y croit ? Est-ce qu'il a déjà rencontré l'âme soeur ? Et si oui, quand, où, comment... dis nous tout.<br /><br /><span class="bgfiche">THÉRIANTHROPES</span> Si ton personnage est humain, raconte nous ce q'il pense des thérianthropes (n'oublie pas que le Président de la Finlande a affirmé leurs existences en 2020 lors d'un discours officiel, l'existence des ovipares a été révélé en 2021). Si ton personnage est thérianthrope, quelle est sa forme animale ? Comment vit-il sa condition de thérianthrope ?  </p></div></div><!--

IMAGES --><center><div class="presbgimage"><img class="imgpres" src="https://pa1.narvii.com/6829/9bb6315b45048a10065e8f1997f2a318f6350f2d_hq.gif" style="background-size:auto auto"><img class="imgpres" src="https://mgl.skyrock.net/art/SHAR.1401.373.2.gif" style="background-size:auto auto"></div></center><!--

CARACTERE --><div class="c_adjfacts"><div class="c_truefacts"><h5>Caractère</h5><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.<br /><br />[hide] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.[/hide]<br /><br /><span class="bgfiche2">Ses envies</span> Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.<br /><br /><span class="bgfiche2">Ses peurs</span> Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.
</p></div></div><!--

HISTOIRE --><div class="c_histoire"><div class="header_histoire"><img src="https://images2.imgbox.com/4e/09/h5NeQbd4_o.png" alt="" class="header_histoire_img" /></div><h2>Anecdotes</h2><div class="c_histoire_txt"><p><span class="bgfiche2">Petit titre ici si besoin</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis. Mauris in tempor elit. Proin tristique bibendum elit, eget cursus lorem scelerisque id. Nulla fringilla condimentum erat. Pellentesque sed placerat ligula.<br /><br />[spoiler]In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fermentum iaculis nunc a tempus. Proin viverra sit amet lacus volutpat cursus. Duis congue convallis mauris vitae dictum. Aliquam eu augue sed leo accumsan porta vitae sed magna. Praesent faucibus elit at felis suscipit posuere. Nunc pretium est erat, a fringilla odio aliquet dignissim.[/spoiler]<br /><br />Integer tincidunt lacinia felis, ac facilisis augue porttitor commodo. Donec commodo ultrices ex viverra scelerisque. Morbi risus nibh, blandit et tempor id, vehicula vitae justo. Nullam quis fermentum dolor, in efficitur diam. Suspendisse bibendum posuere lobortis. Donec pulvinar vel lectus mollis eleifend. Fusce a pharetra ex, sit amet consequat lectus. Fusce eleifend libero id sem rutrum, et rhoncus nisi hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eu viverra nisl, suscipit viverra erat. Fusce in consequat purus. Aliquam ac eleifend purus, et rhoncus mi. Aenean nisl tellus, vestibulum ac fringilla vitae, porttitor non nulla.<br /><br />Donec eget mi nec orci mattis ullamcorper. Mauris quis velit consequat augue hendrerit fringilla. Nam vitae justo eu metus condimentum varius. Integer sagittis tellus ut sollicitudin suscipit. Ut a quam consectetur, volutpat lacus quis, tincidunt ex. Suspendisse egestas urna sodales vulputate condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />Quisque aliquet lacinia erat in pharetra. Quisque ac nisl et est euismod iaculis. Donec nec nisi non massa semper tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis lobortis neque. Suspendisse potenti. Cras vehicula maximus tempor. In varius nisi eu lectus facilisis iaculis. Quisque quis mattis nunc, tempus tincidunt est. Donec facilisis bibendum ipsum et porta. Nam auctor ac metus ut ultrices. Praesent tincidunt neque vel mi luctus, at malesuada massa fringilla. Duis at luctus ex. Pellentesque dignissim posuere vestibulum.</p></div></div><!--

FOOTER --><div class="c_footer"><p><span class="bgfiche3">Derrière l'écran</span> moi ? je porte le doux pseudo de [b]PSEUDO[/b] sur le net, en provenance direct de [b]PAYS/DEPARTEMENT(facultatif)[/b] ! De mon grand âge respectable ( [b]ÂGE(facultatif)[/b] ans ... Chut.)  j'ai trouvé le forum, digne limier que je suis, en [b]COMMENTASTUTROUVERLEFORUM[/b] et je dois dire une chose : [b]REMARQUE[/b]. Puis, sachez le d'avance, je serais là [b]FREQUENCEDECONNEXION[/b] pour m'éclater avec vous autant que possible.</p></div></div>

Bon, moi je n'ai pas tout le code, il manque le CSS pour pouvoir voir ce que ça donne intégralement, donc j'ai travaillé à l'aveugle. J'espère cependant que ça corrige votre problème.

Si ça ne résout pas le problème, cela signifie qu'il faudra aussi enlever les espaces que vous avez mis dans les parties comme celles-ci :

<!--

HEADER -->

(A changer par :

Code:

<!-- HEADER -->

)


Petit ps : sachez que certaines balises génèrent automatiquement un retour à la ligne, donc si vous en mettez un manuellement en tapant sur la touche entrée du clavier, vous aurez en fait deux sauts de ligne.

[Invité]

Rebonsoir

Merci encore pour votre réponse et le temps que vous prenez pour essayer de résoudre mon problème. Malheureusement j'ai essayé et cela ne fonctionne toujours pas.

J'ai essayé en changeant l'écriture des

Code:

<!--

HEADER -->

J'ai même essayé en les enlevant mais rien n'y fait... Effectivement j'ai oublié de vous donner le CSS, le voici si jamais.



Peut-être en bidouillant le CSS, avec un max-height j'arrivais à quelque chose mais je ne suis pas sûre que ça soit la bonne façon de faire

[Lixyr]

D'accord.

Dans ce cas, pouvez-vous me dire si vous voyez le problème sur mon forum test ?
Le lien : https://forum-test-lixyr.forumsrpg.com/t179-test-pour-swirly

J'ai deux messages : le premier, c'est votre code non corrigé, et le deuxième, le code corrigé. Regardez le deuxième message, et dites-moi si vous voyez ces écarts qui vous gênent, et où ils se trouvent.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Invité]

Bonjour,

excusez-moi pour le temps de réponse, j'ai eu des journées chargées

Lixyr : merci pour ton aide, malheureusement sur le lien que tu m'as envoyé je ne vois aucunes différences entre les deux mais pas de soucis, nous avons bidouillé un peu notre code et en jouant avec les max-height et overflow nous avons réussi en enlevant les espaces disgracieux

encore merci pour le temps que tu m'as accordé
bonne journée