Images de catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Images de catégories

Message par So_Cara le Sam 19 Mai 2012 - 19:24

Bonjour à tout le monde ! Very Happy

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 Very Happy

Bonne soirée à tous ! I love you


Dernière édition par So_Cara le Dim 20 Mai 2012 - 17:13, édité 1 fois

So_Cara
Nouveau membre

Féminin
Messages : 11
Inscrit(e) le : 07/07/2011

http://whitecollar.forumactif.fr/
So_Cara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de catégories

Message par Anzu le Sam 19 Mai 2012 - 20:00

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.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de catégories

Message par So_Cara le Sam 19 Mai 2012 - 22:52

Oh merci ! C'est parfait ! Very Happy
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
Nouveau membre

Féminin
Messages : 11
Inscrit(e) le : 07/07/2011

http://whitecollar.forumactif.fr/
So_Cara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de catégories

Message par So_Cara le Dim 20 Mai 2012 - 17:13

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

Merci encore pour tout Very Happy

Sujet résolu !

So_Cara
Nouveau membre

Féminin
Messages : 11
Inscrit(e) le : 07/07/2011

http://whitecollar.forumactif.fr/
So_Cara a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum