Problème de mise en forme des descriptions des catégories et des pages contenant des codes

[Occupation]

Bonsoir à tous,

Je suis une grande novice en codage, ma question peut donc peut-être paraître toute simple...

J'ai un gros soucis de mise en forme :
-Des descriptions des catégories
-Des messages contenant un code.

Cela n'est apparu que très récemment, avant je n'avais aucun soucis de ce type...

Voici le code pour mes description et le template :

Code:

/* Catégories du forum */

a.forumlink{
  display:block;
  font-size:14px; /* la taille de la police */
  padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
  text-align:left;
  font-variant:small-caps; /* Les petites capitales */
  color:#242920 !important; /* On force l'application de cette propriété grâce au !important */
  border-bottom:4px double #EBDFCE;
  font-weight:normal; /* Le texte non bordé */
  margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
  }


div.description{  /* La div ayant pour class 'description' */
      background-color:#e3d6c3; /* On lui donne une couleur de fond */
      -moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
      -webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
      border-radius:10px; /* réglage des arrondis des coins */
      border:1px solid #242920;
      width:540px;
      min-height:5px;  
     font-size:12px;
      text-align:justify;
      text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
      padding: 10px;
      margin:4px;
  color:#242920;
      max-height: 60px;
      overflow: auto;
}

Code:

   <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
       <tr>
          <td valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <span class="gensmall">{LAST_VISIT_DATE}<br />
             {CURRENT_TIME}<br />
             </span>
             <!-- END switch_user_logged_in -->
             <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
             <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
             <!-- END switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          <th nowrap="nowrap" width="50">{L_TOPICS}</th>
          <th nowrap="nowrap" width="50">{L_POSTS}</th>
          <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
       </tr>
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
             <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                   <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
             </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
       </tr>
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
             <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
             <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                </span>
             </h{catrow.forumrow.LEVEL}>
          <div class="description">{catrow.forumrow.FORUM_DESC}</div>  
                     <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
             </span>
          </td>
          <td class="row3" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
          </td>
          <td class="row2" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td>
       </tr>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
       </tr>
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

J'ai du rajouter

Code:

max-height: 60px;
      overflow: auto;

car min-height ne remplit plus du tout sa fonction (peu importe si je mets 0 ou 50px, cela ne change rien). Or, sans ça, j'ai mes rectangles contenant ma description qui sont très hauts et ne suivent plus du tout la quantité de texte présente (alors qu'avant, si...)

Concernant le problème de mise en page de pages contentant des codes :

Code:

   <blockquote><center><center><div style="text-align: center;"></div><div style="width:500px; background:#e3d6c3; border-color:#CBCBCB;border-style:solid;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-top-width:0px;margin-left: 20px;margin-right: 20px;"><div style="color: #45270d; margin-bottom: -10px; border-bottom: 2px solid #45270d; padding-bottom: 3px; "><div style="width: 100%; background-color: rgb(20, 34, 40); "><div align="justify"></div></div></font></div><table><tr>
    <center><div style="width: 440px; padding: 5px; text-align: justify; line-height: normal."><div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
    [font=Courier New]Carte d'identité[/font]
    </div></div></center><div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">
    [font=Courier New][b]Nom :[/b][/font]
    [font=Courier New][b]Prénom :[/b][/font]
    [font=Courier New][b]Age :[/b][/font]
    [font=Courier New][b]Nationalité :[/b][/font]
    [font=Courier New][b]Profession :[/b][/font] [i]s'il est militaire, indiquez son poste.[/i]
    [font=Courier New][b]Langue(s) parlée(s) :[/b][/font]
    </div><center><div style="width: 440px; padding: 5px; text-align: justify; line-height: normal."><div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
    [font=Courier New]Description physique[/font]</div></div></center><div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">[i]10 lignes minimum.
    Si vous avez du mal: Vous pouvez partir d'une description très générale (sa carrure, sa taille, son poids,...) pour aller petit à petit vers les détails (le teint de sa peau, la forme de son visage, la couleur de ses yeux,...). Vous pouvez ensuite présenter ses particularités physiques, s'il en a! (des cicatrices, un grain de beauté très particulier,...[/i]
    </div><center><div style="width: 440px; padding: 5px; text-align: justify; line-height: normal."><div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
    [font=Courier New]Traits de caractère[/font]</div></div></center><div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">[i]10 lignes minimum.
    Si vous êtes un peu à sec pour trouver des qualités/défauts, [url=http://www.lemotdejay.fr/etudes/liste-de-qualites-et-de-defauts/]voici un site[/url] qui vous aidera peut-être!
    Vous pouvez parler ici de sa perception de la guerre/de l'occupant (si vous avez un frenchy)/de l'occupation et des autochtones (si vous avez un Allemand)/ du régime nazi/ de Pétain/ de la drôle de guerre,...[/i]
    </div><center><div style="width: 440px; padding: 5px; text-align: justify; line-height: normal."><div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
    [font=Courier New]Histoire[/font]</div></div></center><div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">[i]20 lignes minimum.
    Si vous séchez :
    Pour les Français : si votre personnage est parti,comment a-t-il vécu l'exode? et s'il est resté, comment a-t-il vécu l'arrivée de la troupe allemande? Quelles furent ses premières impressions?
    Pour les Allemands: comment votre personnage a-t-il vécu la drôle de guerre? Quel fut sa réaction à son arrivée à Saint-Junien? ses premières impressions? ses pensées lorsque la population est revenue?...[/i]
    </div><center><div style="width: 440px; padding: 5px; text-align: justify; line-height: normal."><div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
    [font=Courier New]Et vous ?[/font]</div></div></center><div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">[font=Courier New][b]Prénom :[/b][/font]
    [font=Courier New][b]Age :[/b][/font]
    [font=Courier New][b]Autre compte?[/b][/font]
    [font=Courier New][b]Comment as-tu connu L'Occupation ?[/b][/font]
    [font=Courier New][b]Origine de l'avatar :[/b][/font]
    </div>

    <a style="display: block; text-align: center; color: Silver; font-size: 8px; font-family: arial narrow; letter-spacing: 2px;" href="http://www.never-utopia.com">© Never-Utopia © code réalisée par Koalz</a></div></center></blockquote></div>

Or, lorsque je poste ce code, cela modifie la mise en page de ma page, et ce, surtout en bas au niveau des boutons "répondre" et "nouveau". (alors que je n'avais aucun soucis auparavant avec d'autres postes contenant des codes)

Le poste avec le problème :



Un poste contenant un autre code, et qui est tout à fait normal :


En en parlant sur d'autres forums, des personnes ont reproduit ses codes sur des forums tests, et là : rien, tout allait bien dans le meilleur des mondes.

Ma question est donc la suivante : que se passe-t-il ? Ai-je touché à un bouton qu'il ne fallait pas ? Ma version du forum ne supporterait-elle pas tous ces codes (phpBB2)?

Merci d'avance

[MasDan]

Bonjour,

Pour la description des catégories.


Enlever le max-height, le min-height et l'overflow (encadré rouge) et ajouter «height:auto;» (encadré vert).

[Occupation]

Merci beaucoup MasDan!!! Me voilà avec un gros problème en moins !

[MasDan]

Bonjour,

Pour le problème de mise en page. Il s'agit de balises ouvertes et non fermées.

à la ligne 1 vous débutez par ceci

Code:

<blockquote><center><center>

et à la ligne 31 vous terminez par cela

Code:

       </center></blockquote></div>

Une balise fermante </center> est manquante et la balise fermante </div> est de trop.

De plus, à la fin de la ligne 1

Code:

<table><tr>

ces deux balises ne sont par refermées.

Remplacer votre code par ceci

Code:

<blockquote>
 <center>
 <center>
 <div style="text-align: center;"></div>
 <div style="width:500px; background:#e3d6c3; border-color:#CBCBCB;border-style:solid;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-top-width:0px;margin-left: 20px;margin-right: 20px;">
 <div style="color: #45270d; margin-bottom: -10px; border-bottom: 2px solid #45270d; padding-bottom: 3px; ">
 <div style="width: 100%; background-color: rgb(20, 34, 40); ">
 <div align="justify" style="color:red;"></div>
 </div>
 </font>
 </div>
 <table>
 <tr>
 <center>
 <div style="width: 440px; padding: 5px; text-align: justify; line-height: normal.">
 <div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
 [font=Courier New]Carte d'identité[/font]
 </div>
 </div>
 </center>
 <div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">
            [font=Courier New][b]Nom :[/b][/font]
            [font=Courier New][b]Prénom :[/b][/font]
            [font=Courier New][b]Age :[/b][/font]
            [font=Courier New][b]Nationalité :[/b][/font]
            [font=Courier New][b]Profession :[/b][/font] [i]s'il est militaire, indiquez son poste.[/i]
            [font=Courier New][b]Langue(s) parlée(s) :[/b][/font]
            </div>
 <center>
 <div style="width: 440px; padding: 5px; text-align: justify; line-height: normal.">
 <div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
 [font=Courier New]Description physique[/font]
 </div>
 </div>
 </center>
 <div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">
 [i]10 lignes minimum.
 Si vous avez du mal: Vous pouvez partir d'une description très générale (sa carrure, sa taille, son poids,...)
 pour aller petit à petit vers les détails (le teint de sa peau, la forme de son visage, la couleur de ses yeux,...).
 Vous pouvez ensuite présenter ses particularités physiques, s'il en a! (des cicatrices, un grain de beauté très particulier,...[/i]
            </div>
 <center>
 <div style="width: 440px; padding: 5px; text-align: justify; line-height: normal.">
 <div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
 [font=Courier New]Traits de caractère[/font]
 </div>
 </div>
 </center>
 <div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">[i]10 lignes minimum.
            Si vous êtes un peu à sec pour trouver des qualités/défauts, [url=http://www.lemotdejay.fr/etudes/liste-de-qualites-et-de-defauts/]voici un site[/url] qui vous aidera peut-être!
            Vous pouvez parler ici de sa perception de la guerre/de l'occupant (si vous avez un frenchy)/de l'occupation et des autochtones (si vous avez un Allemand)/ du régime nazi/ de Pétain/ de la drôle de guerre,...[/i]
            </div>
 <center>
 <div style="width: 440px; padding: 5px; text-align: justify; line-height: normal.">
 <div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
 [font=Courier New]Histoire[/font]
 </div>
 </div>
 </center>
 <div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">[i]20 lignes minimum.
 Si vous séchez :
 Pour les Français : si votre personnage est parti,comment a-t-il vécu l'exode? et s'il est resté, comment a-t-il vécu l'arrivée de la troupe allemande? Quelles furent ses premières impressions?
 Pour les Allemands: comment votre personnage a-t-il vécu la drôle de guerre? Quel fut sa réaction à son arrivée à Saint-Junien? ses premières impressions? ses pensées lorsque la population est revenue?...[/i]
            </div>
 <center>
 <div style="width: 440px; padding: 5px; text-align: justify; line-height: normal.">
 <div style="font-size: 16px; color: #45270d; border-bottom: 2px solid #45270d; padding-bottom: 3px;">
 [font=Courier New]Et vous ?[/font]
 </div>
 </div>
 </center>
 <div style="padding:10px; text-align: justify; font-size: 12px; line-height: normal;">
 [font=Courier New][b]Prénom :[/b][/font]
 [font=Courier New][b]Age :[/b][/font]
 [font=Courier New][b]Autre compte?[/b][/font]
 [font=Courier New][b]Comment as-tu connu L'Occupation ?[/b][/font]
 [font=Courier New][b]Origine de l'avatar :[/b][/font]
            </div>
            <a style="display: block; text-align: center; color: Silver; font-size: 8px; font-family: arial narrow; letter-spacing: 2px;" href="http://www.never-utopia.com">© Never-Utopia © code réalisée par Koalz</a>
 </div>
 </tr>
 </table>
 </center>
 </center>
</blockquote>


[Occupation]

Merci beaucoup !!
Le problème est résolu =)