Problème affichage catégorie

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

Résolu Problème affichage catégorie

Message par Cramby' le Dim 8 Mar 2015 - 13:28

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour !

Je suis en train de modifier l'apparence de mes catégories, sauf que voilà, j'ai deux trois soucis que je n'arrive pas à résoudre.

Problème 1 : Comme vous le voyez sur la capture d'écran, j'ai fusionnée les sujets-messages avec la colonne dernier message. Voulant mettre une image sous le titre des catégories, j'ai donc enlever le texte "dernier message". Sauf que le problème est que le titre de la catégorie ne se place pas au milieu, même si je met la balise entre <center>, elle reste a sa place initial comme si le texte "dernier message" était encore là. Selon moi, j'ai du oublier d'enlever quelque chose afin que le titre des catégories empiète sur l'anciennement texte "dernier message"

Problème 2 : Toujours pareil, comme vous pouvez le voir, il y a un énorme espace entre la description et l'image "new,lock" comment faire pour qu'il disparaisse ?

Problème 3 : Pour finir, l'image "new,lock", la description ainsi que le dernier message ne sont pas aligné, j'aimerais qu'ils soient tous à la même hauteur.

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="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">
                                  <center><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></center>
            
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</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="100%" height="50">
         <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>
                  <div class="descriptionforum"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
          <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>
         <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">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

                  <div class="derniermessage"><center><span class="gensmall"><div class="trait">{catrow.forumrow.LAST_POST}</div><div class="nbmessages" class="gensmall">{catrow.forumrow.POSTS} messages - {catrow.forumrow.TOPICS} sujets.</div></span></center></div>
      </td></span>
   </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 -->

css :
Code:
 /*nom des catégories*/


.secondarytitle
{
font-family: 'Lobster', cursive;
  text-align : center;
  font-size: 30px!important;
  padding-left: 50px;
}


/*contour des catégories*/
.forumline{

background-color: #FFFFFF;
      border: px solid #FFFAE6;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
padding-bottom: 30px;
      position : relative;
    top : 19px;

}

 
.descriptionforum{
  width: 450px;
  height: 70px;
  overflow: auto;
  border: 1px solid black;
  padding: 7px;
}

.trait{
  width: 130px;
  border-bottom: 1px solid black;
  text-align: center;
}
.derniermessage{
  text-align: center;
  width: 150px;
  height: 70px;
  padding-top: 4px;
  border: 1px solid black;
 
 
 
}
.nbmessages{
  text-align: center;
  padding-bottom: 4px;
 
}
/*nom des forums*/

a.forumlink:link {

color: #EFB043 !important;
padding-left: 30px;
  font-size: 18px;
font-family: 'Poiret One';
 
 
}

Je vous remercie d'avance ::pourtoi::


Dernière édition par Cramby' le Lun 9 Mar 2015 - 10:39, édité 1 fois

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par MlleAlys le Dim 8 Mar 2015 - 15:55

Bonjour,
serait-il possible d'avoir un lien vers le forum ? ^^

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par Cramby' le Dim 8 Mar 2015 - 16:41

Bonjour !
Bien sûr ! le voila

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par MlleAlys le Dim 8 Mar 2015 - 17:40

- alors, concernant le centrage du titre : votre tableau a trois colonnes, et la cellule du titre n'en couvre que 2, donc pas tout le tableau. Il faut donc modifier
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
en
<th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle">

- Pour l'espace à droite des descriptions, c'est parce que vous avez tout simplement limité la largeur de ces dernières : Localisez ce code dans votre css :
Code:
.descriptionforum {
background-color: #F9FFF5;
border: 2px solid #E1F0DD;
height: 70px;
overflow: auto;
padding: 7px;
width: 450px;
}
et retirez la ligne width:450px; ce qui donne :
Code:
.descriptionforum {
background-color: #F9FFF5;
border: 2px solid #E1F0DD;
height: 70px;
overflow: auto;
padding: 7px;
}

-Enfin, pour le décalage en hauteur, je pense que le plus simple est d'aligner le contenu des cellules en bas de ces dernières, et donc changer les valign="middle" ou valign="top" en valign="bottom" , ce qui donne le template (avec le colspan remarqué plus haut corrigé également) :

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">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">
                                  <center><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></center>
           
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</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="bottom" width="100%" height="50">
        <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>
                  <div class="descriptionforum"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="bottom">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
        <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="bottom" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
 
                  <div class="derniermessage"><center><span class="gensmall"><div class="trait">{catrow.forumrow.LAST_POST}</div><div class="nbmessages" class="gensmall">{catrow.forumrow.POSTS} messages - {catrow.forumrow.TOPICS} sujets.</div></span></center></div>
      </td></span>
  </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 -->

Il reste alors à appliquer la même hauteur aux deux cadres en mettant la même hauteur et le même padding : Localisez ce passage dans votre css :
Code:
.derniermessage {
background-color: #F9FFF5;
border: 2px solid #E1F0DD;
height: 70px;
padding-top: 4px;
text-align: center;
width: 150px;
}
et modifiez padding-top: 4px; en padding: 7px 4px; (puisque les descriptions ont un padding de 7px) ce qui donne :
Code:
.derniermessage {
background-color: #F9FFF5;
border: 2px solid #E1F0DD;
height: 70px;
padding: 7px 4px;
text-align: center;
width: 150px;
}

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par Cramby' le Dim 8 Mar 2015 - 18:30

Ca marche super ! Sauf certaine description qui ne sont pas aligné a certain cadre dernier message ... :/
je me demandais si ce n'était pas a cause des sous forums ? Parce que ça le fait que là ou il y en a.

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par MlleAlys le Dim 8 Mar 2015 - 18:47

Ah oui mince, je n'avais pas pensé à ceux là !!
Alors, ajoutons une classe dans le template au niveau des sous forums :
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">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">
                                  <center><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></center>
         
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</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="bottom" width="100%" height="50">
        <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>
                  <div class="descriptionforum"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="bottom">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
        <span class="gensmall sous-forums">
            <!-- 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="bottom" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
 
                  <div class="derniermessage"><center><span class="gensmall"><div class="trait">{catrow.forumrow.LAST_POST}</div><div class="nbmessages" class="gensmall">{catrow.forumrow.POSTS} messages - {catrow.forumrow.TOPICS} sujets.</div></span></center></div>
      </td></span>
  </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 -->

fixons la hauteur des sous forums :
Code:
.sous-forums {
    display:block;
    height:15px;
    line-height: 15px;
}

Et remontons le cadre du dernier message d'autant, en modifiant le code
Code:
.derniermessage {
background-color: #F9FFF5;
border: 2px solid #E1F0DD;
height: 70px;
padding: 7px 4px;
text-align: center;
width: 150px;
}

en :
Code:
.derniermessage {
background-color: #F9FFF5;
border: 2px solid #E1F0DD;
height: 70px;
padding: 7px 4px;
text-align: center;
width: 150px;
margin-bottom:15px;
}

(ajout de margin-bottom:15px; )

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par Cramby' le Dim 8 Mar 2015 - 19:17

Aaaah voila comme ça c'est super ! Very Happy

Une dernière question :
Avec ce code :
Code:
  .forumline{
background-color: #FFFFFF;
      border: px solid #C7D973;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
  width: 750px;
      position : relative;
    top : 19px;

}

Je rétrécie la largeur des catégories (donc tout le bloc blanc en entier) seulement maintenant ce bloc n'est plus au centre, savez-vous comment faire ?

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par MlleAlys le Dim 8 Mar 2015 - 19:34

Attention, c'est un problème qui revient assez souvent, forumline n'est pas spécifique aux catégories, et en fiant ainsi sa largeur, vous aller avoir des problèmes à d'autres endroits ! ^^" (cf les profils, la boite de réception des mp, etc)
Mieux vaut, au lieu de fixer la largeur, mettre une largeur maximum : max-width:750px; au lieu de width:750px; ça évite déjà pas mal de problèmes sur les pages citées plus haut Wink

Sinon, pour centrer un élément dont la largeur est fixée, l'astuce est souvent de passer par l'application de la propriété margin:auto; à cet élément : il y a alors la même marge à gauche et à droite, donc l'élément est centré.


Au passage, je ne sais pas pourquoi vous abaissez les tableaux forumline de 19px avec une position relative, mais je pense que ça pose plus de problème que ça n'en résout, je déconseille... =s

Enfin, la ligne border n'a aucun px, elle ne sert à rien ^^"

Bref, ce qui donnerait ce code :
Code:
.forumline{
    background-color: #FFFFFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    max-width: 750px;
    margin:auto;
}

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par Cramby' le Dim 8 Mar 2015 - 20:03

Ah oui effectivement mes widgets à la droite de la bannières ont disparu... :/ Est-ce que vous avez une astuce pour avoir le même résultat sans toucher aux reste ?

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par MlleAlys le Dim 8 Mar 2015 - 20:19

quel résultat souhaitez vous exactement ?

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par Cramby' le Dim 8 Mar 2015 - 23:43

J'aimerais que les blocs blanc qui englobe les catégories soit de 700px :/ Sans devoir passer par forumline. Je ne sais pas si vous comprendrez ... :/

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par MlleAlys le Dim 8 Mar 2015 - 23:58

Si vous ne voulez vraiment ne modifier que les catégories pour les fixer à 700px, sans la page d'accueil ni la liste des sujets ni l'affichage des messages etc, seulement les catégories, il faut ajouter une classe dans le template à ce niveau là de façon à l'utiliser dans le css :

le 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="categorie forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">
                                  <center><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></center>
       
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</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="bottom" width="100%" height="50">
        <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>
                  <div class="descriptionforum"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="bottom">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
        <span class="gensmall sous-forums">
            <!-- 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="bottom" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
 
                  <div class="derniermessage"><center><span class="gensmall"><div class="trait">{catrow.forumrow.LAST_POST}</div><div class="nbmessages" class="gensmall">{catrow.forumrow.POSTS} messages - {catrow.forumrow.TOPICS} sujets.</div></span></center></div>
      </td></span>
  </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 -->

On peut alors mettre dans le css :
Code:
.categorie {
    width:700px;
    margin:auto; /*pour centrer*/
}

Si vous souhaitez de façon générale que les tableaux de type forumline, donc avec la PA, les sujets, etc, ne dépassent pas 700px; alors le code donné dans mon message précédent avec max-width:700px; appliqué à forumline devrait faire l'affaire ^^

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par Cramby' le Lun 9 Mar 2015 - 0:50

Haan c'est vraiment parfait comme ça ! I love you

Puis-je vous poser une toute dernière question ?
Si je voudrais que la PA face elle toute seule, sans toucher aux autres choses, 700px, je suppose que je devrais reprendre le même code mais avec les balises qui gèrent la PA, seulement, pourriez vous me dire quelle est cette balise ?

Je m'excuse encore pour toutes ces questions, je vous promet que c'est la dernière ::moitimide::

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par MlleAlys le Lun 9 Mar 2015 - 1:03

Oui, sur le même principe, la PA est dans un tableau forumline, et pour la modifier elle toute seule, on peut lui attribuer un identifiant dans le template.

(la différence avec la class de tout à l'heure c'est qu'un identifiant est spécifique à un seul élément, or on avait plusieurs catégories, et comme une class peut par contre apparaitre plusieurs fois, c'est ce qu'on avait utilisé. Mais ici on a qu'une seule page d'accueil donc un identifiant est plus précis ^^)




- le template concerné est le template index_body (page d'accueil).

- le passage qui correspond à la PA est au tout début :
Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

- Il faut ajouter l'identifiant dans la balise table pour que cela concerne tout le tableau, et donc modifier cela :
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
en :
<!-- BEGIN message_admin_index -->
<table id="page-accueil" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
(je l'ai ici appelée "page-accueil", mais c'est tout à fait arbitraire, on peut mettre ce qu'on veut tant que c'est en un seul mot et que ça ne commence pas par un chiffre ^^)

- On enregistre et on publie le template


- On peut alors mettre dans la feuille de style css le code pour la mise en forme de la page d'accueil:
Code:
#page-accueil {
    width: 700px;
}

(à remarquer que dans le css un nom de class est toujours précédé d'un point alors qu'un identifiant est toujours précédé d'un dièse !)

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage catégorie

Message par Cramby' le Lun 9 Mar 2015 - 10:38

Ca fonctionne ! Vraiment merci pour toutes explications, qui sont en plus vachement claire ! Merci Merci Merci ! I love you

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' 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