image haut de catégorie par-dessus

[Gridou85]

Bonsoir tout le monde,
je suis en train de tester un petit code qui fonctionne très bien, le souci c'est que je veux bidouiller pour changer la position de l'image et je n'obtiens pas ce que je veux. Je ne sais pas comment faire. Peut-être quelqu'un a-t-il la solution ?

ce que je veux:

ce que j'obtiens:

Mon template :

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="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table><div class="milieu_cate"><table class="forumline" width="850px" 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><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <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="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 --></div>
<table class="bas_cate"><tr valign="center"><td> </td></tr></table>
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Mon css :

Code:

/*-------------- POSITION BANNIERE ----------------*/

body {
  background-image:url('http://i39.tinypic.com/16is5fd.jpg');
  background-position:bottom center;
  background-repeat:no-repeat;
}
  
/* ascenseur */
.ascenseur {
position: fixed;
bottom: 0px;
right: 7%;
}

table.haut_cate{
   width:882px;
   height:97px;
   background-image:url('http://i40.tinypic.com/2e37st1.jpg');
   background-repeat:no-repeat;
   margin-bottom:-30px;
   }

div.milieu_cate{
   width:850px;
   margin:auto;
   }

table.bas_cate{
   width:850px;
   height:64px;
   background-image:url('http://i44.tinypic.com/16hncar.jpg');
   background-repeat:no-repeat;
   margin:auto;
   }



En résumé, je voudrais que la bannière rouge sur le haut de catégorie passe par-dessus le bloc central, et non en-dessous.

Merci d'avance  

[Automne]

Bonjour,

Pour avoir l'effet au dessus, il vaut mieux mettre l'image haut catégorie dans le template.

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr valign="center">
    <td>
      <div class="milieu_cate">
        <img src="http://i40.tinypic.com/2e37st1.jpg" />
      </div>
    </td>
  </tr>
</table>

dans le css

Code:

div.milieu_cate{
          width:850px;
          margin-top:-20px;
          }
table.haut_cate{
          width:882px;
          height:97px;
          background-repeat:no-repeat;
          margin-bottom:-30px;
          }

Par contre je pense que vous serez obligé de rajouter un margin-bottom a
table.bas_cate{

A tester sur votre forum

[Gridou85]

Effectivement ça marche.

Merci infiniment

bonne soirée

problème résolu