Modification des catégorie =/

[Aliichaa]

Voili voilou !!! j'aide une amie pour son forum en lui passant des anciennes template auquel j'vais demande des modification ...




Comme on le vois sur l'image 1 , les descriptions sont plus vers le bas ce qui, quand elles sont trop longue, déforme le forum =/ .. Problème que mon amie n'aime pas....

Elle aurait voulu qu'elle soit plus haut, comme sur l'image 2 ^^..

Je précise que la template et le CCs sont déjà fait, on voudrais juste que les description soit plus haute, même si elle sont en fasse des statistique...

INDEX-BOX :

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}

        </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="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}>
      <table width="100%" class="fondcategorie"><tr><td  width="80%"></td><td class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span></td></tr><td width="80%"><div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td><td  width="25%"class="sousfo"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br/>')).removeAttr('id');
</script></td></tr></table>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
                    </span>
        </span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
        <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </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 -->


CCS :

Code:

//***CATEGORIE***//

/*sous-forums*/
.sousfo{
background-image: url("//");
webkit-border-radius: 30px; border-radius: 30px;
padding: 10px;/*marge intérieure*/
margin: 10px;/*marge extérieure*/
 border-radius: 30px;border: solid 2px    #FFFFFF;}



/*statistiques*/
.stats{
background-image: url('http://img11.hostingpics.net/pics/312942ghj.png');
webkit-border-radius: 30px; border-radius: 30px;
padding: 10px;/*marge intérieure*/
margin: 10px;/*marge extérieure*/
 border-radius: 30px;border: solid 2px    #000000;
}

/*dernier message*/
.lastm{
background-image: url('http://img11.hostingpics.net/pics/312942ghj.png');
webkit-border-radius: 30px; border-radius: 30px;
padding: 10px;/*marge intérieure*/
margin: 10px;/*marge extérieure*/
 border-radius: 30px;border: solid 2px    #000000;
}

/*fond description*/
.descrip{
background-image: url('http://img11.hostingpics.net/pics/312942ghj.png');
webkit-border-radius: 30px; border-radius: 30px;
padding: 10px;/*marge intérieure*/
margin: 10px;/*marge extérieure*/

 border-radius: 30px;border: solid 2px    #000000;
}



[kheino]

Bonjour,

Tout d'abord, centrer les codes est vraiment une grosse FBI (Fausse Bonne Idée) et je ne mets pas ce genre de code dans mon template ou dans mon CSS, c'est à s'y perdre.

Mais pour ton problème, (sans pouvoir vraiment vérifier tant que les codes sont ainsi présentés), essaie de réduire le padding-top de la description :

padding: 3px 10px; /*qui veut dire 3px-top et 10px-pour le reste*/

Il me semble que ce devrait alors se situer plus haut...

[Aliichaa]

Euh, ça ne fait rien du tout je croit...

[kheino]

Tu as bien modifié dans l'intitulé : .descrip
Pour bien voir si c'est le bon, essaie de mettre une valeur extrême au top, comme :
-3px;

Sinon, dans le template, à cet endroit :
<td width="80%"><div class="descrip">
Pourquoi ne pas mettre le "class" dans la balise "td" et à celle-ci lui faire gérer l'alignement vertical puisqu'elle le peut :
<td width="80%" class="descrip" valign="top">
Tout en gérant aussi avec le padding-top.

[Aliichaa]

je ne comprend plus rien..

[kheino]

Dans ton template, en lieu et place d'ajouter une balise "div" juste pour lui donner le class="descrip"
pourquoi ne pas donner ce même class="descrip" au "td" (cellule qui contient la description d'un forum), qui en plus applique la propriété du vertical-aligne et l'aligner déjà vers le haut :
valign="top" "middle" ou "bottom"

Donc à l'endroit indiqué, on supprime la "div" et ça donne au lien de ça :

Code:

<td width="80%" class="descrip" valign="top"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td>

Ceci :

Code:

<td width="80%"><div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td>

[kheino]

Dans ton template, en lieu et place d'ajouter une balise "div" juste pour lui donner le class="descrip"
pourquoi ne pas donner ce même class="descrip" au "td" (cellule qui contient la description d'un forum), qui en plus applique la propriété du vertical-aligne et peut l'aligner déjà vers le haut :
valign="top" "middle" ou "bottom"

Donc à l'endroit indiqué, on supprime la "div" et ça donne au lieu de ça :

Code:

<td width="80%"><div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td>

Ceci :

Code:

<td width="80%" class="descrip" valign="top"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td>

[Aliichaa]

Et ensuite? Ou est le changement? Je l'ai fait sur un de mes forum pour le moment car je n'ai pas acces au template de l'autre.

[kheino]

Il n'y a pas de changement ?
La description n'est pas remontée ?

Comme je l'ai dit plus haut, j'ai beaucoup de peine avec ces codes centrés, donc je ne m'y retrouve pas (et franchement pas le temps de les remettre en ordre).
La manière dont sont rédigés la plupart des codes, fait aussi qu'on les lit bien avec l'habitude. C'est exactement pareil pour les templates, surtout l'index_box, qui est l'un des plus simple à suivre...

Alors peut-être que je n'ai pas vu quelque chose dans le CSS ou le template. /-:

[Aliichaa]

personne peut m'aider? =/
Parce que, les description agrandit le forum et ça devient génant...

[Anzu]

Bonsoir,

Remplacez votre index box par celui ci:

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}
       
                </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="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}>
              <table width="100%" class="fondcategorie"><tr><td width="80%" rowspan="2" valign="top"><div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td><td class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span></td></tr><td  width="25%"class="sousfo"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
        jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br/>')).removeAttr('id');
        </script></td></tr></table>
                <span class="gensmall">
                    <!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                            </span>
                </span>
              </td>
              <td class="row3 over" align="center" valign="middle" height="50">
                <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
              </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 -->

• La description se trouvait dans un autre tr, je l'ai déplacé dans celui du dessus et j'ai mis un rowspan de 2 dans le td de la description ^^

Cordialement.

[Aliichaa]

Sur mon forum test, c'est parfait ^^ , mais je n'ai pas acces aux templates de mon amie, je lui passerais le template plus tard pour voir si cela lui convient, je vous redonnerais des nouvelles ^^

[Aliichaa]

je valide ^^ , je mets en résolu ^^