Problème DOHTML sur forumactif

[emelyne]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 19 avril
Lien du forum :

Description du problème

Bonjour,

Depuis hier j'essaye de poster ce code trouvé sur un forum étranger. J'ai mis une capture d'écran montrant ce que cela donne une fois posté. J'ai essayé d'enlever le [dohtml] de remplacer par BBcode et encore par HTML, mais rien n'y fait.

voilà ce que ça devrait donner:

Code:

[dohtml]<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style type="text/css">
#instaa { position: relative; width: 306px; height: 475px; background: url(http://i.imgur.com/5nbF3bO.png); background-position: center top; border: 10px solid #ddd;}
#instaa #user { position: absolute; width: 100px; height: 15px; top: 13px; left: 100px; color: black; font: 14px montserrat; text-transform: uppercase; }
#instaa #ava { position: absolute; width: 70px; height: 70px; top: 50px; left: 10px; background: url(http://placehold.it/70x70); }
#instaa #stats { position: absolute; width: 200px; height: 15px; top: 50px; left: 120px; color: black; font: 14px montserrat; text-align: left; }
#instaa #name { position: absolute; width: 150px; height: 15px; top: 130px; left: 10px; color: black; font: bold 12px arial; text-align: justify; }
#instaa #info { position: absolute; width: 280px; height: 15px; top: 150px; left: 10px; color: black; font: 10px cambria; text-align: justify; }
#instaa #pics { position: absolute; width: 306px; top: 225px; left: 0px; }
#instaa #cred a { position: absolute; width: 306px; height: 40px; top: 435px; left: 0px; background: url(http://i.imgur.com/RrCP9Kc.png); background-position: center bottom; }
</style>

<center><div id="instaa"><div id="user">username</div><div id="ava"></div><div id="stats">
### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
###
</div><div id="name">Character first last</div><div id="info">

Description goes here! Don't exceed two lines! Description goes here! Don't exceed two lines! Description goes here!

</div><div id="pics">

<img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100">
<img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100">

</div><div id="cred"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25914"></a></div></div></center>[/dohtml]

Merci d'avance aux membres qui essayeront de m'aider à résoudre ce problème

[gendarme]

Bonjour , essaye de remplacer les espace ; par un positionnement css

[emelyne]

Bonjour , essaye de remplacer les espace ; par un positionnement css

Bonsoir,

Merci pour ton aide malheureusement au niveau du codage je ne suis pas vraiment doué j'ai peur de faire une bourde si cela ne te gêne pas peux-tu me donner plus d'explication ?

Merci d'avance

[no_way]

Bonsoir, concernant le code, il sera à remanier car certaines parties doivent être dans le bloc "head" et d'autres dans le bloc "body".
Afin de maximiser vos chances d'obtenir une aide adéquate, je vous invite à nous apporter quelques informations complémentaires:

• Où cherchez-vous à mettre ce code (page d'accueil, page html, dans un template et si oui lequel...)
• Fournir un lien de votre forum peut grandement faciliter la tâche à la personne qui cherchera à vous aider.
• Vous avez mis une image correspondant au résultat désiré, ce qui est très bien, une image du résultat actuel peut permettre d'aiguiller sur le problème que vous rencontrez, surtout lorsque le lien du forum n'est pas fourni.

[emelyne]

Bonsoir, concernant le code, il sera à remanier car certaines parties doivent être dans le bloc "head" et d'autres dans le bloc "body".
Afin de maximiser vos chances d'obtenir une aide adéquate, je vous invite à nous apporter quelques informations complémentaires:

• Où cherchez-vous à mettre ce code (page d'accueil, page html, dans un template et si oui lequel...)
• Fournir un lien de votre forum peut grandement faciliter la tâche à la personne qui cherchera à vous aider.
• Vous avez mis une image correspondant au résultat désiré, ce qui est très bien, une image du résultat actuel peut permettre d'aiguiller sur le problème que vous rencontrez, surtout lorsque le lien du forum n'est pas fourni.

Bonsoir,

Merci pour la réponse
C'est pour un post le résultat doit donner un codage pour instagram
Je n'ai pas pu poster le code car il ne marchait pas et les visiteurs ne peuvent pas voir ces sujets...
J'ai posté le rendu du forum dans la partie détail technique sachant pertinemment qu'il était impossible que vous le voyez sur le forum

[emelyne]

UP

[Erwan Narcos]

Quand je teste le code, cela fonctionne bien chez moi. J'ai juste enlevé les balises DOHTML justement !
Sur quel type de page voudrais-tu le poster ?

[emelyne]

Bonjour,

J'ai déjà essayé en enlevant le dohtml malheureusement c'est tout le contour qui s'en va lorsqu'on l'enlève. C'est pour un post concernant les codes des réseaux sociaux.

Merci d'avance

[Scoubifitz]

bonjour,

en enlevant les balises dohtml ,
en enlevant type='text/css' à la balise style ,
et en mettant tout sur une seule ligne ,
il sera possible de mettre ça dans un message si l'HTML est activé :

Code:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <style> #instaa { position: relative; width: 306px; height: 475px; background: url(http://i.imgur.com/5nbF3bO.png); background-position: center top; border: 10px solid #ddd;margin:auto;} #instaa #user { position: absolute; width: 100px; height: 15px; top: 13px; left: 100px; color: black; font: 14px montserrat; text-transform: uppercase; } #instaa #ava { position: absolute; width: 70px; height: 70px; top: 50px; left: 10px; background: url(http://placehold.it/70x70); } #instaa #stats { position: absolute; width: 200px; height: 15px; top: 50px; left: 120px; color: black; font: 14px montserrat; text-align: left; } #instaa #name { position: absolute; width: 150px; height: 15px; top: 130px; left: 10px; color: black; font: bold 12px arial; text-align: justify; } #instaa #info { position: absolute; width: 280px; height: 15px; top: 150px; left: 10px; color: black; font: 10px cambria; text-align: justify; } #instaa #pics { position: absolute; width: 306px; top: 225px; left: 0px; } #instaa #cred a { position: absolute; width: 306px; height: 40px; top: 435px; left: 0px; background: url(http://i.imgur.com/RrCP9Kc.png); background-position: center bottom; } </style> <div id="instaa"><div id="user">username</div><div id="ava"></div><div id="stats"> ### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ### </div><div id="name">Character first last</div><div id="info"> Description goes here! Don't exceed two lines! Description goes here! Don't exceed two lines! Description goes here! </div><div id="pics"> <img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"> <img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"> </div><div id="cred"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25914"></a></div></div>

[emelyne]

bonjour,

en enlevant les balises dohtml ,
en enlevant type='text/css' à la balise style ,
et en mettant tout sur une seule ligne ,
il sera possible de mettre ça dans un message si l'HTML est activé :

Code:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <style> #instaa { position: relative; width: 306px; height: 475px; background: url(http://i.imgur.com/5nbF3bO.png); background-position: center top; border: 10px solid #ddd;margin:auto;} #instaa #user { position: absolute; width: 100px; height: 15px; top: 13px; left: 100px; color: black; font: 14px montserrat; text-transform: uppercase; } #instaa #ava { position: absolute; width: 70px; height: 70px; top: 50px; left: 10px; background: url(http://placehold.it/70x70); } #instaa #stats { position: absolute; width: 200px; height: 15px; top: 50px; left: 120px; color: black; font: 14px montserrat; text-align: left; } #instaa #name { position: absolute; width: 150px; height: 15px; top: 130px; left: 10px; color: black; font: bold 12px arial; text-align: justify; } #instaa #info { position: absolute; width: 280px; height: 15px; top: 150px; left: 10px; color: black; font: 10px cambria; text-align: justify; } #instaa #pics { position: absolute; width: 306px; top: 225px; left: 0px; } #instaa #cred a { position: absolute; width: 306px; height: 40px; top: 435px; left: 0px; background: url(http://i.imgur.com/RrCP9Kc.png); background-position: center bottom; } </style> <div id="instaa"><div id="user">username</div><div id="ava"></div><div id="stats"> ### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ### </div><div id="name">Character first last</div><div id="info"> Description goes here! Don't exceed two lines! Description goes here! Don't exceed two lines! Description goes here! </div><div id="pics"> <img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"> <img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"><img style="margin: 1px;" src="http://placehold.it/100x100"> </div><div id="cred"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25914"></a></div></div>

Merci Scoubifitz ce code marche enfin après vos modifications J'ai encore deux codes DOHTML pouvez vous m'expliquez comment vous avez fait afin de que j'essaye de les modifier ?

[Scoubifitz]

Laquelle des lignes d'explications n'est pas claire ?

en enlevant les balises dohtml ,
en enlevant type='text/css' à la balise style ,
et en mettant tout sur une seule ligne ...

[emelyne]

Laquelle des lignes d'explications n'est pas claire ?

en enlevant les balises dohtml ,
en enlevant type='text/css' à la balise style ,
et en mettant tout sur une seule ligne ...

Désolée j'avais lu un peu trop vite vos explications sont très claires merci beaucoup

[Scoubifitz]

Pas de soucis ... dites nous s'il reste des difficultés à le faire ...

[emelyne]

Merci beaucoup Scoubifitz je suis justement en train d'essayer avec vos explication je débute vraiment en codage donc j'espère réussir à effectuer les changements adéquats

[emelyne]

UP

Je ne suis vraiment pas douée en codage malgré les bons conseils de Scoubifitz Si quelqu'un pourrait m'aider à transformer ces deux codes qui suivent

ce que ça devrait donner:

Code:

[dohtml]<style type="text/css">
#instab { position: relative; width: 300px; height: 510px; background: url(http://i.imgur.com/UYep8iN.png); background-position: center top; border: 10px solid #ddd;}
#instab #user { position: absolute; height: 15px; top: 58px; left: 45px; color: #175d96; font: bold 12px arial; }
#instab #ava { position: absolute; width: 30px; height: 30px; top: 50px; left: 5px; background: url(http://placehold.it/30x30); }
#instab #pic { position: absolute; width: 300px; height: 300px; top: 85px; left: 0px; }
#instab #info { position: absolute; width: 260px; height: 15px; top: 409px; left: 23px; color: black; font: 12px/90% arial; text-align: justify; }
#instab #cred a { position: absolute; width: 300px; height: 40px; top: 470px; left: 0px; background: url(http://i.imgur.com/RrCP9Kc.png); background-position: center bottom; }
</style>

<center><div id="instab"><div id="user">username</div><div id="ava"></div><div id="pic"><img src="http://placehold.it/300x300"></div><div id="info"><span style="color: #175d96; font: bold 12px arial; ">username</span>

Description goes here! Don't exceed two lines!

</div><div id="cred"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25914"></a></div></div></center>[/dohtml]

ce que ça devrait donner:

Code:

[dohtml]<style type="text/css">
#instac { position: relative; width: 300px; height: 310px; background: url(http://i.imgur.com/BeOEWJo.png); background-position: center top; border: 10px solid #ddd;}
#instac #user { position: absolute; height: 15px; top: 50px; left: 45px; color: #175d96; font: bold 12px arial; }
#instac #ava { position: absolute; width: 30px; height: 30px; top: 50px; left: 5px; background: url(http://placehold.it/30x30); }
#instac #desc { position: absolute; width: 240px; height: 15px; top: 65px; left: 44px; color: black; font: 12px/90% arial; text-align: justify; }
#instac #info { position: absolute; width: 240px; height: 15px; top: 120px; left: 45px; color: black; font: 12px/90% arial; text-align: justify; }
#instac #cred a { position: absolute; width: 48px; height: 26px; top: 280px; left: 245px; background: url(http://i.imgur.com/A55yDf2.png); background-position: center bottom; }
</style>

<center><div id="instac"><div id="user">username</div><div id="ava"></div><div id="desc">

Original description goes here! Don't exceed three lines! Original description goes here! Don't exceed three lines!

 </div><div id="ava" style="top: 120px;"></div><div id="info"><span style="color: #175d96; font: bold 12px arial; ">commenter's username<br></span>

Comment goes here! Comment goes here! Comment goes here! Comment goes here! Comment goes here! Comment goes here!

</div><div id="cred"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25914"></a></div></div></center>[/dohtml]

Merci d'avance

[Scoubifitz]

pour faire ces manipulations , j’utilise Notepad++ ...

Code:

<style> #instab { position: relative; width: 300px; height: 510px; background: url(http://i.imgur.com/UYep8iN.png); background-position: center top; border: 10px solid #ddd;} #instab #user { position: absolute; height: 15px; top: 58px; left: 45px; color: #175d96; font: bold 12px arial; } #instab #ava { position: absolute; width: 30px; height: 30px; top: 50px; left: 5px; background: url(http://placehold.it/30x30); } #instab #pic { position: absolute; width: 300px; height: 300px; top: 85px; left: 0px; } #instab #info { position: absolute; width: 260px; height: 15px; top: 409px; left: 23px; color: black; font: 12px/90% arial; text-align: justify; } #instab #cred a { position: absolute; width: 300px; height: 40px; top: 470px; left: 0px; background: url(http://i.imgur.com/RrCP9Kc.png); background-position: center bottom; } </style> <center><div id="instab"><div id="user">username</div><div id="ava"></div><div id="pic"><img src="http://placehold.it/300x300"></div><div id="info"><span style="color: #175d96; font: bold 12px arial; ">username</span> Description ici! ne dépassez pas 2 lignes ! </div><div id="cred"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25914"></a></div></div></center>

Code:

<style> #instac { position: relative; width: 300px; height: 310px; background: url(http://i.imgur.com/BeOEWJo.png); background-position: center top; border: 10px solid #ddd;} #instac #user { position: absolute; height: 15px; top: 50px; left: 45px; color: #175d96; font: bold 12px arial; } #instac #ava { position: absolute; width: 30px; height: 30px; top: 50px; left: 5px; background: url(http://placehold.it/30x30); } #instac #desc { position: absolute; width: 240px; height: 15px; top: 65px; left: 44px; color: black; font: 12px/90% arial; text-align: justify; } #instac #info { position: absolute; width: 240px; height: 15px; top: 120px; left: 45px; color: black; font: 12px/90% arial; text-align: justify; } #instac #cred a { position: absolute; width: 48px; height: 26px; top: 280px; left: 245px; background: url(http://i.imgur.com/A55yDf2.png); background-position: center bottom; } </style> <center><div id="instac"><div id="user">username</div><div id="ava"></div><div id="desc"> Original description goes here! Don't exceed three lines! Original description goes here! Don't exceed three lines! </div><div id="ava" style="top: 120px;"></div><div id="info"><span style="color: #175d96; font: bold 12px arial; ">commenter's username<br></span> Comment goes here! Comment goes here! Comment goes here! Comment goes here! Comment goes here! Comment goes here! </div><div id="cred"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25914"></a></div></div></center>

[emelyne]

Bonsoir,

Merci beaucoup de ton aide Scoubifitz et pour l'astuce du logiciel ça me sera utilise pour les prochains.

Bonne soirée à toi et merci encore