Codages mal affichés sur modernbb.

[Eleniel]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://shinobi-no-seiki.forumactif.be

Description du problème

Bonjour, c'est encore moi ! Je vais finir par faire racine ici. ^^

J'ai changé ma version en modernbb, que je ne connaissais pas, et je suis face à de petits soucis au niveau des codages.

En voulant mettre en forme des post avec des codes, ils s'affichent étrangement (avec des cadres noirs et blancs qui se rajoutent autour, alors que normalement, sur les autres versions, il n'y a rien).

Voici le code :

Code:

<center><table><tr><td>
[center]<img style="border-radius: 100px 100px 0px 0px; width:470px;" src="http://36.media.tumblr.com/22311022bc8979786897db82e79bdf9f/tumblr_ne2yfgNSHW1sq8ouio1_500.png" />[/center]
<div style="text-align: center;font-family: arial, font-size: 8px; letter-spacing: 7px; color: black; background-color: white; opacity: 0.5;position: relative; top: -24px;text-transform: uppercase;line-height:10px;padding-top:3px; padding-bottom:2px;width:500px">Le bal des chimères.
<font style="font-size:6px;word-spacing:1px;">Yue | Solo</font></div><div style="border-bottom: 5px solid; border-color: white;margin-top:-10px;width:500px;overflow:auto"><div style="text-align:justify">TEST.[/justify]
<br></div></td><tr><td></td></tr></table></center>

Il y a-t'il quelque chose à chipoter pour l'enlever ?

Merci.

[Neptunia]

Bonjour ^^


C'est déjà un exploit que ça fonctionne !

Ligne 1 : une balise <center> obsolète depuis HTML 4 c'est à dire depuis le siècle dernier !
Ligne 2 : Du BBCODE dans un code HTML ?
Ligne 4 : une balise <font> obsolète elle aussi. Un bbcode de fermeture de justification que rien ne justifie puisque la balise n'a jamais été ouverte
Ligne 5 : Le <br> gagnerait à être écrit <br /> parce qu'à certains endroits (etmplates notamment) ne pas fermer la balise est considérée comme une erreur. La balise </center> est tout aussi obsolète qu'à la ligne 1.

Il y a-t'il quelque chose à chipoter pour l'enlever ?

C'est facile. Vous enlevez les lignes 1, 2 4 et 5 et vous repartez avec la ligne 3 et des bases plus saines. Pensez à refermer la div puisque la ligne 4 n'existe plus.

[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 »

[Scoubifitz]

Bonsoir,

@Neptunia a bien résumé la situation , un mélange de BBcode , d'éléments obsolètes (center, font ...)
et de balises inutiles comme les : table tr td ...

C'est d'ailleurs ce tableau qui met nativement des cadres dans la version modernBB ... puisqu'un tableau ne doit servir qu'à présenter des données.

Maintenant , "sans chipoter" , le plus sain-simple- est de voir ce que vous voulez faire .

• une image
  
• Un titre descriptif de cette image
  
• Un texte justifié sous cette image
  
• un style particulier pour chaque élément.
  

En plaçant le style en fin de message (voire en le plaçant en début , ou dans le CSS du PA)
et en plaçant la structure , on obtient ceci :

Code:

<div class="figure"><img src="http://36.media.tumblr.com/22311022bc8979786897db82e79bdf9f/tumblr_ne2yfgNSHW1sq8ouio1_500.png" /><div class="figuredesc">Le bal des chimères.
<span>Yue | Solo</span></div></div>
<div class="figuretext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet euismod nibh. Nulla a consectetur lacus, ut suscipit orci. Proin pretium tortor sit amet arcu cursus semper. In dictum felis sed nisi rutrum interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin pretium facilisis dolor quis sagittis. Suspendisse tempor commodo molestie. Aenean quis arcu est. Praesent eget metus et tortor imperdiet porttitor. Vivamus laoreet egestas sapien id cursus. Praesent augue enim, iaculis in ante ut, pellentesque hendrerit risus. Donec auctor nisi at risus dapibus, condimentum consequat urna congue. Suspendisse in est tortor. Curabitur pulvinar posuere imperdiet. Phasellus id nisi et odio maximus imperdiet sed at tortor. Duis eget nulla a mauris posuere luctus sit amet nec nisi.
</div>
<style>.figure{width:470px;margin:0 auto -30px;}.figure img{border-radius: 100px 100px 0px 0px; width:470px;}.figuredesc{position: relative;top:-30px;padding:5px 0 5px;background-color: white; opacity: 0.5;font-family: arial,font-size: 8px; letter-spacing: 7px; color: black; text-transform: uppercase;line-height:10px;text-align:center;}.figuredesc span{font-size:6px;word-spacing:1px;}.figuretext{text-align:justify;margin:auto;width:500px}</style>

[*Splash*]

Hi,
Un autre code ici :

Code:

<div class="messpeTitre">[font=Arial Black]Le lorem ipsum[/font]</div><div class="messpe">[font= Arial Black]Qu'est-ce que le Lorem Ipsum?[/font]
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.

[font= Arial Black]Pourquoi l'utiliser?[/font]
On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</div>

Avec ce code CSS :

Code:

.messpeTitre {
    background: -webkit-linear-gradient(left, #add356, #00dfa6);
    padding: 20px 50px;
    margin : 1px;
}
.messpe {
    background-color: #DCDCDC;
    border-radius: 10px;
    padding: 10px 15px;
}

Tu obtiendras ceci

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.