Images de catégories

[So_Cara]

Bonjour à tout le monde !

Je viens vous voir parce que je n'arrive pas à régler un problème alors que j'ai chercher des solutions sur plusieurs forums en parcourant les différents sujets, j'ai changé plusieurs fois les codes, tester un peu tout et n'importe quoi et je n'arrive pas à mettre la main sur mon problème...

Alors, je voulais en fait mettre une image qui "couvrirait" toute la largeur du forum pour faire les titres des catégories, malheureusement l'image s'arrête au niveau du "dernier message"
Image du problème :


L'image rouge du bas se met parfaitement et j'aimerai que celle du haut fasse pareil... Et je n'y arrive absolument pas... =/

C'est mon forum de test sous firefox, je suis fondatrice et c'est une version PHBB2.

Je vous donne mon 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 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;"></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"></span><br />
    <span class="gensmall">{catrow.forumrow.LAST_POST}
      <br />{catrow.forumrow.POSTS} messages || {catrow.forumrow.TOPICS} sujets.</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="http://img15.hostingpics.net/pics/741939CFB2.png" alt="" height="50px" width="930px" /><br><br><!-- END tablefoot --><!-- END catrow -->

Et mon CSS

Code:

a:hover{text-transform:uppercase;}
a {font-variant: small-caps;}

body {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: top center;
}


.forumline {width: 930px;}


a.forumlink:link, a.forumlink:visited {
font-family:  serif;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border-bottom: 5px solid #410945;
color: #410945;
letter-spacing: 3px;
display: block;
-moz-border-radius:10px;
}
a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("");
color: #5D406B;
text-align: center;
display: block;
border-bottom: 5px solid #5D406B;
-moz-border-radius:10px;
}

a.mainmenu {
font-family:  arial;
text-align: center;
font-size: 70%;
background-color: #;
color: #B38F9C;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;}

a.mainmenu:hover {
background-image: url("");
text-align: center;}

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }


.quote{
font-family: Tahoma;
font-size: 12px;
color: #B38F9C;
line-height: 125%;
background-image: url("");
border: #b84a72;
border-style: solid;
border: 1px #b84a72;
dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
-moz-border-radius:6px;}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #B38F9C;
background-image: url("");
border: #b84a72;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border: 1px #b84a72;
dotted;
-moz-border-radius:6px;}

input,textarea, select {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}
a.mainmenu:link, a.mainmenu:visited{
font-family :Georgia;
text-align:left;}


.statistiques{
border:0px;
background-image: url("http://i63.servimg.com/u/f63/16/03/03/56/pa1c6r10.gif");
background-repeat: no-repeat;
background-position: center;
height:260px;}

.groupes{
background-color:#B9BABF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 15px 15px 15px 15px;
height:40px;padding-right:5px;padding-left:5px;padding-bottom:1px;
font-size:12px;font-weight: bold;text-align:center;
text-decoration: none !important;}



.boxtitle{
font-family:  serif;
text-align: center;
background-image: url("http://i63.servimg.com/u/f63/16/03/03/56/pa1c6r10.gif");
font-size:15px;
border-bottom: 3px double #4A2606;
color: #DCB77F;
display: block;}

.box {
background-image: url("http://i63.servimg.com/u/f63/16/03/03/56/pa1c6r10.gif");
color:#DCB77F;
font-size:11px;
margin:0;
padding:3px 10px;
}

.main
{font-family:  serif;
text-transform : uppercase;
text-align: center;
font-size: 100%;
background-color: #DCB77F;
border-bottom: 2px solid #A6A4A4;
color: #FCFCFC;
letter-spacing: 1px;
display: block;}

.main:hover
{background-color: #A6A4A4;
text-align: center;
display: block;
border-bottom: 2px solid #6A6E80;
}

a.imginfo {
  position: relative;
  color: #4A2606;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid;
}

a.imginfo span {
  display: none;
}
a.imginfo:hover {
  background: none;
  z-index: 999;
  cursor: help;
}
a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 5px;
  left: 15px;
  background: #6A6E80;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}


.abc {border-bottom: 5px solid #ffffff}
.def {
background-color: #ffffff;
-moz-border-radius:10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px;
text-transform:uppercase;}



.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #B38F9C;
}

tr.post span.gensmall { display: none; }


th {
-moz-border-radius-topleft: 20%;
-moz-border-radius-topright: 20%;
border-top-left-radius: 20%;
border-top-right-radius: 20%;
}

td.row1{
background-image: url("");
}
td.row2{
background-image: url("");
}
td.row3{
background-image: url("");
}
td.row3Right{background-image : url();}


.name a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:0;
background:#734666 none repeat scroll 0 0;
display:block;
font-variant:normal;
letter-spacing:1px;
text-align:center;
}


.name {
text-transform: UPPERCASE;
font-size: 10px;
text-align: center;
}
.postbody {     
display: block;     
padding-left: 40px;     
padding-right: 40px;     
text-align:justify;}



.profilentour {
text-align:center;
padding:9px;
background-image: url("");
background-color:#B38F9C;
-moz-border-radius:10px;
-webkit-border-radius
border-radius
}

a.info {
  position: relative;
  color: black;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
font-size: 12px;

}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

 
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 10px; /* on positionne notre infobulle */
  left: 5px;

  background-image: url("");
  border-bottom: 5px solid #000000;
  -moz-border-radius:10px;

  color: #4A2606;
  padding: 3px;

  border: 1px solid #;
  border-left: 4px solid #;
}



.signature_div img {
max-width:500px;
}



 /*PA en onglet */

 
 .mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #;
  border: 2px solid #B38F9C;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;
-moz-border-radius:10px;
 }

 .mon_onglet:hover{
  background: #ffffff;
 }       

 .mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #190C1F;
  border-top: 2px solid #B38F9C;
  border-right: 2px solid #B38F9C;
  border-left: 2px solid #B38F9C;
  border-bottom: 2px solid #B38F9C;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;
-moz-border-radius:10px;
}         

 .clear{
  clear: both;
 }

 .mon_contenu{
  color: #;
  background: #;
  border: 2px solid #B38F9C;
  padding: 10px;
  line-height: normal;
  font-size: 11px;
-moz-border-radius:10px;
}
 
#mes_contenus, #mes_onglets{
  width: 650px;
  margin: auto;}

/*Barre Navig Top*/

.navtop {
  top : 0px;
  position: fixed;
  valign : left ;
  width : 100% ;
  font-size: 20px;
  color: #000;
background-image: url("");
}

/* CATEGORIES */

.secondarytitle {
background-image: url('http://img15.hostingpics.net/pics/945523CFB.png');
height:60px; width: 930px;
}



J'espère que je n'oublie rien et que je suis assez clair dans la description de mon problème (:

Si quelqu'un peut m'aider ce serait vraiment génial !
Merci pour ceux qui passeront par là et essayeront de m'aider

Bonne soirée à tous !

[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}<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="3" 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="{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"></span><br />
            <span class="gensmall">{catrow.forumrow.LAST_POST}
              <br />{catrow.forumrow.POSTS} messages || {catrow.forumrow.TOPICS} sujets.</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="http://img15.hostingpics.net/pics/741939CFB2.png" alt="" height="50px" width="930px" /><br><br><!-- END tablefoot --><!-- END catrow -->

Il suffisait de retirer cette partie:

Code:

    <th nowrap="nowrap" width="150"><div style="width:150px;"></div></th>

et de mettre un colspan de 3 ici:

Code:

<th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

NB: Si la largeur de la colonne des derniers messages ne vous convient pas, il suffit de mettre un min-width dans le td concerné.

Cordialement.

[So_Cara]

Oh merci ! C'est parfait !
Je me doutais que c'était dû à cette partie mais je ne savais pas du tout par quoi la remplacer... Je ne suis pas vraiment au point niveau template ^^

Sinon, effectivement la dernière colonne à une taille très petite.
Je pensais qu'il fallait mettre le min-width ici

Code:

                          <td class="row3 over" align="center" valign="middle" height="50">
                            <span class="gensmall"></span><br />
                    <span class="gensmall">{catrow.forumrow.LAST_POST}
                      <br />{catrow.forumrow.POSTS} messages || {catrow.forumrow.TOPICS} sujets.</span>
                          </td>

Puisque je ne vois que cette partie là concernée (mais je peux me tromper) mais quand je l'ai mis ici, ça n'a rien changé.

Désolée donc, de encore demander de l'aide, normalement après, tout sera ok =/

Merci encore !
Bonne soirée.

[So_Cara]

Autant pour moi, j'ai fini par trouver la solution à mon problème !

Merci encore pour tout

Sujet résolu !