Séparation des colonnes par template

[Gorgorbey]

Bonjour,

J'ai un soucis avec les séparation des différentes colones de mon forum (phpBB2) disponible dans mon profil.


Vous voyez que les traits noirs de séparation ne sont pas corrects. Et ceci sur tous les navigateurs.
J'ai modifié mon template index_box que voici :

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}

         {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>

         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

         <!-- 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" style="background: url('http://i22.servimg.com/u/f22/15/72/69/52/top-mi19.png') top left no-repeat;"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50" style="background: url('http://i22.servimg.com/u/f22/15/72/69/52/top-mi13.png') top left no-repeat;">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50" style="background: url('http://i22.servimg.com/u/f22/15/72/69/52/top-mi13.png') top left no-repeat;">{L_POSTS}</th>
      <th nowrap="nowrap" width="150" style="background: url('http://i22.servimg.com/u/f22/15/72/69/52/top-mi18.png') top right no-repeat;"><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="icone" 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="forum" 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}><br/>
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <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="sujets" align="center" valign="middle" height="50">
          <img src="http://i22.servimg.com/u/f22/15/72/69/52/sans_t12.jpg" align="absmiddle">     <span class="gensmall">{catrow.forumrow.TOPICS}</span>     <img src="http://i22.servimg.com/u/f22/15/72/69/52/sans_t12.jpg" align="absmiddle">
          </td>
          <td class="messages" align="center" valign="middle" height="50">        
            <span class="gensmall">{catrow.forumrow.POSTS}</span>        <img src="http://i22.servimg.com/u/f22/15/72/69/52/sans_t12.jpg" align="absmiddle"></img>
          </td>
          <td class="derniersmessages" 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 -->

Merci d'avance pour vos réponses !

Amicalement.

[Lixyr]

Bonjour.

J'ai regardé ton code, et tes traits proviennent d'une image :

Code:

http://i22.servimg.com/u/f22/15/72/69/52/sans_t12.jpg

soit tu l'enlèves, et tu mets un code du style

Code:

border-right:1px solid black;

soit tu choisis une image avec un trait plus grand. Mais je conseille de mettre le code.

[Gorgorbey]

Et ce code je le met tel quel à la place de l'URL ?

[Lixyr]

Non. Il faut mettre ça dans la cellule qui correspond à l'endroit où tu veux la ligne verticale.

En rajoutant ceci :

Code:

style="border:1px solid black;"

dans la cellule de telle sorte d'avoir quelque chose qui ressemble à :

Code:

<td style="border:1px solid black;">

[Gorgorbey]

Allez voir sur mon forum (profil), cela fait un cadre et ce n'est pas ce que je souhaite. Je veux 2 traits à droite et gauche simplement. Comme sur ma capture en haut mais allignés.

[Lixyr]

Pardon, j'ai oublié une partie du code :

border-right:1px solid black;

pour certains il faudra mettre un border-right, et pour d'autre également un border-left, si vous voulez que ça fasse joli.

[Gorgorbey]

On s'en approche. Mais est-il possible de limiter la hauteur des traits ? Qu'ils ne fassent pas la hauteur de la ligne ?

[Lixyr]

Alors ça, je ne sais pas, j'ai jamais fait. Généralement, pour ce genre de cas, je vois des images en dégradé.

[Gorgorbey]

Des images en dégradé ? Je ne comprend pas.
En tout cas c'est pour ce soucis que j'avais mis des images à la place des traits.

[Lixyr]

Oui en fait, dans ce genre de cas, les gens mettent des traits dégradé qui passent sur transparent au bout, pour faire disparaitre le trait petit à petit, comme un fondu. Hum je n'ai pas d'exemple... .
Cela dit je pense que c'est bien faisable.

J'ai bien regardé et il ne me semble pas que le code border-height existe ou marche, donc je pense qu'il faut passer par une image, oui.
Donc il faudrait garder les images, mais en mettre d'autres plus grandes.

[Gorgorbey]

Je verrai cela ce soir. Je vous tiendrai au courant. Merci pour votre aide.

[Lixyr]

D'accord.

[Gorgorbey]

J'ai pas le temps en ce moment^^
Je lock ce sujet mais je testerai encore merci.

Amicalement.

[Lixyr]

D'accord. Bonne continuation à vous.