Restructuration de la catégorie

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

Résolu Restructuration de la catégorie

Message par Chlirr le Mar 17 Nov 2015 - 18:57

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://testpourbloodthirsty.bb-fr.com/

Description du problème

Bonjour,

en implantant un tableau dans la description de la catégorie, cela m'a bougé tout le reste autour.
Comme sur l'image j'aimerai tout restructuré et que chaque élément : le titre, l'image de la catégorie, la partie description et la partie "dernier message", ne soient pas aussi espacé.

Je vous met les différents codes, peut-être même que certains n'ont rien à y faire mais je suis plusieurs tutos, ce qui doit tout mélanger.
Tout simplement je ne sais pas quoi modifié pour que les catégories soient bien mises et pas comme dans un tableau mal géré (ce qui est la cas ici).

Code template html index_box:
Code:
<br />
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <div class="cate_titre">{catrow.tablehead.L_FORUM}</div>

    <div class="categorie">

    <!-- END tablehead -->
    <!-- BEGIN cathead -->

    <!-- END cathead -->
    <!-- BEGIN forumrow -->
   
    <div class="forum">
     
    <table><tr>
    <td><span class="forum_icone"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span></td>
    <td style="vertical-align: top;"><span class="forumlink">
    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
    </span>
    <span class="description">{catrow.forumrow.FORUM_DESC}</span>
    </td>
    <td><span class="stats_last"><span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
      <span class="last">{catrow.forumrow.LAST_POST}</span></span></td>
    </tr></table>
    <span class="gensmall">
        <!-- BEGIN switch_moderators_links -->
        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
        <!-- END switch_moderators_links -->
</span>
        <!--<span class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span> -->
    </div>

    <!-- END forumrow -->
    <!-- BEGIN catfoot -->

    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
   
    </div>
   
    <!-- END tablefoot --><!-- END catrow -->

Code CSS:
Code:
/*Catégories*/

.cate_titre
    {
  font-size: 18px;
    width: 98%;
    margin: auto;
    text-align: center;
  color: #c32f2f;
    }
   
.categorie
    {
    width: 98%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #e9e9e6;
    border-top: 3px solid #4c4842;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    }
   
.forum
   
{   
  width: 98%;
  margin-left: auto;
  margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    background: #f3f3f3;
    border: 1px dotted #c0c0c0;
    padding: 2px;
    }

   
.forumlink
    {
    display: block;
    width: 600px;
    font-variant: small-caps;
    letter-spacing: 2px;
    padding-left: 10px;
    text-shadow: 1px 1px 0px #ffffff;
    }
   
.forumlink a
    {
    font-size: 12px;
    border-bottom: 2px dotted #c0c0c0;
    }
   
.description
    {
  float: left;
    display: block;
    width: 500px;
    margin: auto;
  margin-left: 5px;
    font-size: 11px;
    text-align: justify;
    color: #000000;
    }
   
.illu
    {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    border: 1px solid #c0c0c0;
    background: #e9e9e6;
    padding: 5px;
}

   
.stats_last
    {
    display: block;
    width: 160px;
    margin: auto;
    background: #e9e9e6;
    padding: 10px;
    border: 1px dotted #c0c0c0;
    }
   
.stats
    {
    display: block;
    text-align: center;
    font-size: 10px;
      color: #c32f2f;
    border-bottom: 1px solid #cacaca;
    padding-bottom: 4px;
    margin-bottom: 4px;
    }
   
.last
{
 display: block;
    text-align: center;
    font-size: 12px;
    }
   

.ListeSousForums {
 text-align:center; /* texte centré dans le bloc */
  font-size: 0px;
}

.ListeSousForums a {
  font-size:12px; /* indiquez la taille du texte des liens */
  padding:5px 5px; /*un espacement entre le texte et le bord du bloc-lien*/
  padding-right:5px; /* on rajoute un espace après le lien */
  display:inline-block; /* affichage en ligne mais avec les propriétés d'un bloc */
 margin: 5px; /* un espacement entre le bloc-lien et les éléments qui l'entourent */
  color: #c32f2f;
}

/* pour les navigateurs qui acceptent la pseudo-classe :last-child, on supprime l'espace final qui ne sert à rien */
.ListeSousForums a:last-child {
  padding-right:0px;
}

.ListeSousForums a:hover {
background: #d8d7d6;
}


/* On s'occupe de la cellule contenant les liens */
.celluledesc-liens {
  /* largeur de la cellule */
  width:200px;
  margin-top: auto;

  /* un fond : couleur, image, positionnement de l'image de fond */
 /* background : #ffffff url('URL-IMG-FOND') top center no-repeat; */
}

/* Puis on s'occupe des liens en question */
.celluledesc-liens a {
  display:block; /* IMPORTANT : on transforme les liens en blocs */
  text-align:center; /* on centre le texte dans les blocs */
  margin: 5px 0px; /* marges extérieures haut/bas puis droite/gauche */
  padding:2px 4px; /* marges intérieures (entre les bords et le texte) */
  border: 1px dotted #c0c0c0; /* bordure : épaisseur type couleur */
  background: #f0f0f0;      /* couleur de fond */
 
  /* on personnalise un peu le texte */
  color : #c32f2f; /* couleur du lien */
  font-size: 12px;  /* taille du texte */
  letter-spacing:1px;      /* espacement entre les lettres */
  font-weight:bold;      /* texte en gras */
  /* ... etc */
}

.celluledesc-liens a:hover {
background: #d8d7d6;;
}

/* On s'occupe de la cellule contenant le texte de description */
.celluledesc-texte {
  text-align:justify;  /* texte justifié */
  padding:5px;      /* marges intérieures */
 margin-left: 5px;
  /* on donne une apparence personnalisée à la cellule */
  /* des bordures arrondies... */
  -moz-border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
  -webkit-border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
  border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
  /* un fond */
  /*background : #ffffff url('URL-IMG-FOND') top center no-repeat;*/
  /* on personnalise un peu le texte */
  color : #000000;
  font-size: 13px;  /* taille du texte */
}

/* Puis on s'occupe de la description (en particulier le scroll automatique) */
.celluledesc-scroll {
  height:100px;  /* hauteur du bloc de description */
  overflow:auto;      /* le scroll apparaît automatiquement si besoin */
  padding:5px;      /* marges intérieures, espacement par rapport à la barre de scroll */
}


Code dans la description de la catégorie:
Code:
<table style="width: 100%;" cellpadding="0" cellspacing="2">
                            
   <tbody>
      <tr>
                                      
         <td class="celluledesc-liens" align="center" valign="middle">
                      <a href="http://testpourbloodthirsty.bb-fr.com/f48-discussion-staff">Discussion Staff</a>         
         </td>
                                      
         <td class="celluledesc-liens" align="center" valign="middle">
                      <a href="http://testpourbloodthirsty.bb-fr.com/f49-suggestions-developpement">Suggestions et Développement</a>         
         </td>
                                  
      </tr>
                         
   </tbody>
</table>

Par ailleurs certains code dans le css sont peut-être obsolètes mais faire le menage dans le code n'est pas mon fort...j'ai déjà essayé et ça m'avait tout cassé :'(


Dernière édition par Chlirr le Mar 17 Nov 2015 - 19:22, édité 1 fois

Chlirr
***

Messages : 106
Inscrit(e) le : 03/06/2015

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

Résolu Re: Restructuration de la catégorie

Message par Feuilla' le Mar 17 Nov 2015 - 19:10

Bonsoir,
dans Panneau d'administration → Affichage → Images et Couleurs → Couleurs → Feuille de style CSS. Tentez de coller ceci :
Code:
.celluledesc-scroll {height:65px;}
.stats_last {margin-right:0px;}
Mon forum n'a pas la même version, je n'ai pas pu tester et donc je ne garantis rien. Wink
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Restructuration de la catégorie

Message par Chlirr le Mar 17 Nov 2015 - 19:13

Bonsoir,

en mettant ce que tu m'as poster,
ça a resserré les catégories mais pas assez.

L'image de la catégorie n'est pas remonté et y'a trop d'espace après la description.

Edit:

Bon si je met
Code:
.celluledesc-scroll {
  height:auto;  /* hauteur du bloc de description */
  overflow:auto;      /* le scroll apparaît automatiquement si besoin */
  padding:5px;      /* marges intérieures, espacement par rapport à la barre de scroll */
}

soit la hauteur en auto, ça à l'air de passer.

Merci de ta réponse
Je vais faire avec Very Happy

Chlirr
***

Messages : 106
Inscrit(e) le : 03/06/2015

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

Résolu Re: Restructuration de la catégorie

Message par Feuilla' le Mar 17 Nov 2015 - 19:29

Re,
@Chlirr a écrit:Bonsoir,

en mettant ce que tu m'as poster,
ça a resserré les catégories mais pas assez.
on peut rajouter ceci
Code:
.celluledesc-liens {width:130px;}
On peut modifier le "130" par un autre nombre (comme 100).
L'autre code aussi pouvait être modifié. Wink
Y a-t-il encore autre chose à changer ?

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Restructuration de la catégorie

Message par Chlirr le Mar 17 Nov 2015 - 19:29

Non sur ce contenu là je pense que l'on est bon Very Happy

Merci

Chlirr
***

Messages : 106
Inscrit(e) le : 03/06/2015

http://btmg.forumactif.com/
Chlirr 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