Espace entre le haut de catégorie et le corps de catégorie

[ocelline]

Bonjour,

Je suis fondatrice du forum http://winter-of-blood.forumactif.org/ (il est en construction donc ne faites pas trop attention aux autres élements ^^ ). J'ai voulu coder mes catégories donc avec un haut et bas de catégorie en plus d'un titre de catégorie à part.


Mon problème comme on peut le voir sur la capture d'écran est que je n'arrive pas à coller le haut de catégorie au reste de la catégorie. J'ai beau utiliser du margin, d'aligner le plus possible rien ne change. Je viens donc vous demander de l'aide

Template 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}<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 width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="http://img4.hostingpics.net/pics/552895Catgorieshaut.png" class="hautcate"/></td></tr></table>
        <table class="forumline" width="92%" border="0" cellspacing="1" cellpadding="0" >
          <tr>

      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="80%"  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%" ><tbody><tr><td style="padding-left:5px; text-align:right;margin-left:-105px;" class="gensmall">Messages:{catrow.forumrow.POSTS} | | Sujets:{catrow.forumrow.TOPICS} </td></tr></tbody></table><center><span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></center><br />
      <div style="width:500px;">  <span class="genmed">
          {catrow.forumrow.FORUM_DESC} <div class="lastm">{catrow.forumrow.LAST_POST}</div></span>
        <div class="imgnew"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
        </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><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="http://img4.hostingpics.net/pics/570775Catgoriesbas.png" /></td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS :

Code:

body {
background-repeat: no-repeat;
background-position:top;
  display:block;
  width:100%;
}



        .bodylinewidth{
        margin-top:100px;
        }


a.forumlink {
text-decoration: none;
font-family: georgia;
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 5px solid #FFFFFF;
color : #B56B4F;
display: block; }
 
.descrip {background-color:#F5F2F2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-right:4px;
  margin-left:50px;
display:block;
width:450px;
height:75px;
padding:4px;
float:left;}
 
.lastm { background-color:#F5F2F2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-left:550px;
 margin-top:-100px;
display: block;
padding:4px;
width:120px;
height:75px;
float:left;
display:block;}
 
.imgnew{
 width:60px;
 height:60px;
 display:block;
  float:left;
  margin-top:-150px;
}

.hautecate{
 z-index:1;
  position:absolute;
  float:left;
  background-color:#F5F2F2;
  display:inline;
 
 
}

.titrecate{
  z-index:2;
  position:absolute;
  margin-top:-95px;
  float:left;
  height:50px;
  display:block;
}

Merci d'avance ♥

[Self]

Bonsoir,

On pourrait résoudre cela avec le CSS suivant :

Code:

.hautcate{
   position: relative;
   top: 27px; left: 1px;
}

Et en remplaçant ce passage :

Code:

<table class="forumline" width="92%" border="0" cellspacing="1" cellpadding="0" >

Par :

Code:

<table class="forumline" width="752" border="0" cellspacing="1" cellpadding="0" >

[ocelline]

Bonsoir,

Merci de votre réponse très rapide, ça marche parfaitement ! C'est vrai que j'avais pensé au top ... mais je ne sais pas trop bien encore les utiliser