Problème de balise?

[Cali93110]

Bonjour,

alors voilà je suis actuellement sur la construction de personnage pré-créés, pour un forum RPG. J'ai posté une fiche il y a peut de temps mais il est possible qu'il y a une erreur dans le code, car ce dernier, une fois posté, me déforme légèrement la page du forum. Voici un screen:

Spoiler:

Voici par ailleurs, le code:

Code:

<div style="border: 5px solid #7c6858;background-image:url('http://obsession27.free.fr/divers/fonds/pfo.gif');">
<div style="font-family:Trashhand;font-size:35px;color:#7c6858;text-shadow: 1px 2px 3px black;text-transform:uppercase;text-align:center;margin-bottom:-50px;">NOM</div>
<table align="center"><tr><td><table align="center" cellspacing="10"><tbody><tr><td style="text-align: center; background-color: lavender; border-radius: 20px 20px 4px 4px;border: 7px solid #704e33;width:180px;height:200px;"><div style="padding-left:20px; width: 150px; height: 200px; background-image: url('URL150*200');border-radius: 20px 20px 8px 8px;"></div></td></tr></table></td>
<br>
<br>
<td><table align="center"><tr><td align="left"><table><tr><td><ul><br><div style="margin-top:-20px;background-color: #7c6858; border-radius: 20px 20px 0px 0px; padding: 3px; width:254px; text-transform:lowercase;"><div style="margin: auto; text-align: center; width: 100%;"><font style="font-weight:bold;color:white;">Ce qu'il faut savoir</font></div></div><div style="background: none repeat scroll lavender; border-radius: 0px 0px 15px 15px;"><div style="width: 256px; height: 400px; overflow: auto;border:2px #7c6858 solid;"><div align="justify" style="font-size: 10px; line-height: normal;color:#3d2c1e;padding-left:10px; padding-right:10px;opacity:0.8;"><br>[font=Times New Roman][b]Caractère[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
<br>[font=Times New Roman][b]Histoire[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
<br>[font=Times New Roman][b]Informations Supplémentaires[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
<br>[font=Times New Roman][b]Affinités[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
<br></div></div></div></ul><br></table></td></tr></table></div></div>

Je vous remercie d'avance de l'aide apportée.

[Lixyr]

Bonsoir.

Effectivement, il manquait plein de fermeture de balises.
Est-ce que c'est mieux ainsi ?

Code:

<div style="border: 5px solid #7c6858;background-image:url('http://obsession27.free.fr/divers/fonds/pfo.gif');">
<div style="font-family:Trashhand;font-size:35px;color:#7c6858;text-shadow: 1px 2px 3px black;text-transform:uppercase;text-align:center;margin-bottom:-50px;">
NOM
</div>
   <table align="center">
      <tr>
         <td>
            <table align="center" cellspacing="10">
               <tbody>
                  <tr>
                     <td style="text-align: center; background-color: lavender; border-radius: 20px 20px 4px 4px;border: 7px solid #704e33;width:180px;height:200px;">
                     <div style="padding-left:20px; width: 150px; height: 200px; background-image: url('URL150*200');border-radius: 20px 20px 8px 8px;">
                     </div>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
         <br>
         <br>
         <td>
            <table align="center">
               <tr>
                  <td align="left">
                     <table>
                        <tr>
                           <td>
                           <ul>
                           <br>
                           <div style="margin-top:-20px;background-color: #7c6858; border-radius: 20px 20px 0px 0px; padding: 3px; width:254px; text-transform:lowercase;">
                           <div style="margin: auto; text-align: center; width: 100%;">
                           <font style="font-weight:bold;color:white;">
                           Ce qu'il faut savoir
                           </font>
                           </div>
                           </div>
                           <div style="background: none repeat scroll lavender; border-radius: 0px 0px 15px 15px;">
                           <div style="width: 256px; height: 400px; overflow: auto;border:2px #7c6858 solid;">
                           <div align="justify" style="font-size: 10px; line-height: normal;color:#3d2c1e;padding-left:10px; padding-right:10px;opacity:0.8;">
                           <br>
                           [font=Times New Roman][b]Caractère[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
                           <br>
                           [font=Times New Roman][b]Histoire[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
                           <br>[font=Times New Roman][b]Informations Supplémentaires[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
                           <br>[font=Times New Roman][b]Affinités[/b][/font] •  TEXTE ICI TEXTE ICI TEXTE ICI
                           <br>
                           </div>
                           </div>
                           </div>
                           </ul>
                           <br>
                           </td>
                        </tr>
                     </table>
                  </td>
               </tr>
            </table>   
         </td>
      </tr>
   </table>
</div>
</div>

[Cali93110]

Bonjour,

alors, avant de poster, je voulais voir si le code n'avait pas bougé, et il s'avère que si.

Spoiler:

[Lixyr]

Après, il faut voir dans le code. J'ai vu que vous aviez mis plein de div les uns après les autres.
On peut également bidouiller ça via des height et des width, pour la hauteur et la largeur.

[Cali93110]

Et pour les deux barres blanches qui dépassent? Je vais voir pour les height et width.

[Lixyr]

Fusionnez ces deux div :

<div style="background: none repeat scroll lavender; border-radius: 0px 0px 15px 15px;">
<div style="width: 256px; height: 400px; overflow: auto;border:2px #7c6858 solid;">

comme ça :

Code:

 <div style="background: none repeat scroll lavender; border-radius: 0px 0px 15px 15px;width: 256px; height: 400px; overflow: auto;border:2px #7c6858 solid;">

et retirez la balise de fermeture de la div en trop, plus bas.



*edit*

ensuite, l'écart, je pense, viens de là :

Code:

<table align="center" cellspacing="10">
                  <tbody>
                      <tr>
                        <td style="text-align: center; background-color: lavender; border-radius: 20px 20px 4px 4px;border: 7px solid #704e33;width:180px;height:200px;">
                        <div style="padding-left:20px; width: 150px; height: 200px; background-image: url('URL150*200');border-radius: 20px 20px 8px 8px;">
                        </div>
                        </td>
                      </tr>
                  </tbody>
                </table>

il n'y a rien dedans, mais il devrait y avoir une image. Le grand espace qu'il y a entre "nom" et les cadres plus bas, viens de ça.

[Cali93110]

J'ai du mal à suivre. x)

J'ai fusionné et enlever le </div> en trop, mais ça n'a rien changé.

Pour l'espace, ça veut dire que ça y'a une image, l'espace disparaitra?

[Lixyr]

Les div fusionnés retirent le blanc en trop au dessus et en dessous du cadre.

Ben oui, puisque vous avez mis cet espace apparemment pour mettre une image, vous y avez même indiqué la hauteur que ça prend (d'où le grand espace), donc si vous y mettez une image, l'espace sera remplacé par une image.

[Cali93110]

Ah oui oui oui! Ca je sais. Mais en faite, je parlais de la longueur et du très grand espace entre le haut du fond du formulaire, et l'image + les infos. Ca, je ne vois pas comment enlever ce très grand espace, de même que la barre marron où il y a écrit "Ce qu'il faut savoir" qui est trop haute, car la partie concernée qui est

Code:

<div style="margin-top:-20px;background-color: #7c6858; border-radius: 20px 20px 0px 0px; padding: 3px; width:254px; text-transform:lowercase;">
                          <div style="margin: auto; text-align: center; width: 100%;">
                          <font style="font-weight:bold;color:white;">
                          Ce qu'il faut savoir
                          </font>
                          </div>
                          </div>

possède déjà le 254 et j'ai essayer en ajoutant un " height:100px;" mais ça ne fait rien.

[Lixyr]

Ben comme vous avez des tables un peu partout : table généraux et table contenu dans des cellules, les tables formant automatiquement des espaces, ça fait des espaces aussi. De plus, si c'est un code affiché dans un message et que vous acceptez le bbcode dans ce message, le fait d'avoir un retour à la ligne à chaque balise, ça créé des retours à la ligne dans le message aussi, et donc ces espaces.

[Cali93110]

Ah oui d'accord! Bon et bien le problème est réglé. Merci beaucoup! C'est bien plus agréable à regarder.

[Lixyr]

^^ C'est sûr. Bonne continuation à vous.

[Cali93110]

A vous aussi.