Modifier la longueur de la bordure des titres de catégories

[Chimik Girl]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://fae-world.purforum.com

Description du problème

Bonjour,

Il y a peu, j'ai procéder à un réagencement de mes catégories, mais le résultat actuel n'est pas satisfaisant ou plutôt, j'ai un problème.

Comme on peut le voir sur la capture d'écran, la bordure de titre des catégories dépasse de beaucoup et n'est égale des deux côtés, alors que dans les sous-forum, la bordure est bien placé.Je voudrais donc savoir s'il y a avait un moyen de la réduire ou alors de centrer les forums pour que la bordure soit pareille partout ?

Mon css personnalisé (ou du moins le css personnalisé pour les catégories:)

Code:


.bodylinewidth{ /*définition de la largeur du cadre du forum*/
        width:850px
    }


    .categorie{
      margin:50px auto;
    }
    .categorie>h2{
      font: italic normal Georgia 45px;
        color:#046380;
        text-shadow:2px 1px 0px #c7c7c7;
        text-align:center;
        padding:0 0 15px 0;
        border-bottom:6px solid #c7c7c7;
    }
    .categorie:after{
      content:" ";
        display:block;
        clear:both;
    }
    .forum{
      width:368px; /*largeur de chaque forum*/
        float:left;
        margin:0 22px 40px;
    }

    .forum a{
      color:#977587;
    }
    .desc{
      position:relative;
        width:100%;
        overflow:hidden;
    }
    .desc>a{
      text-decoration:none;
    }
    .descTexte{
      position:absolute;
        height:200px;
        padding:33px 20px;
        overflow:auto;
        font: 12px Georgia;
        color:white;
        text-align:justify;
        background:rgba(0,0,0,0.6);
        left:0;
        top:-266px;
        transition:top 0.5s;
    }
    .descTexte:first-letter{ /*effet lettrine*/
      font: 2.2em;
        float:left;
        margin-right:5px;
   
    }
    .descTexte:first-child{/*comportement de la description du forum quand il n'y a pas d'image*/
      position:static;
        height:60px;
        background:#d7d7d7;
        color:#8a8a8a;
       
    }
    .descTexte+br{ /*cache le br ajouté par automatiquement après la description*/
      display:none;
    }
    .desc:hover .descTexte{
      top:0;
    }
    .encart{
      background:white;
        position:relative;
        padding:10px 20px;
        height:85px;
    }
    .iconeForum{
      bottom: 79px;
      position: absolute;
      right: 7px;
    }
    .titreForum{
      margin:0;
    }
    .titreForum a{
      font:Georgia italic 26px;
        color:#046380;
        text-decoration:none;
    }
    .dernierPoste{
      position:absolute;
        right:20px;
        bottom:15px;
        text-align:right;
        width:70px;
    }
    .dernierPoste span, .dernierPoste .gensmall{
      font:12px Georgia;
        color:#acacac ;
        text-align:center;
    }
    .sousForums{
      font-variant:small-caps;
        font-size:15px;
        color:#898688;
        width:250px;
    } 
    .stats{
        margin:5px 0 0 0;
      color:#898688;
        font:13px Georgia;
   
    }

Mon template index-box:

Code:

 <!-- BEGIN catrow -->
    <!-- BEGIN tablehead --><div class="categorie">{catrow.tablehead.L_FORUM}<!-- END tablehead -->
      <!-- BEGIN cathead -->
          <h{catrow.cathead.LEVEL} class="hierarchy">
                        {catrow.cathead.CAT_TITLE}
                </h{catrow.cathead.LEVEL}>
         
      <!-- END cathead -->
      <!-- BEGIN forumrow --><div class="forum">
            <div class="desc">
                              <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_DESC}</a>
            </div>
            <div class="encart">
                                    <h{catrow.forumrow.LEVEL} class="titreForum">
                                            <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                                    </h{catrow.forumrow.LEVEL}>
                                    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="iconeForum" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                 
                                    <div class="sousForums">
                                            {catrow.forumrow.LINKS}
                                    </div>
                                    <div class="stats">
                                          Il y a {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
                                    </div>
                 
                                    <div class="dernierPoste">
                                            {catrow.forumrow.LAST_POST}
                                    </div>
            </div>
         
      </div><!-- END forumrow -->
    <!-- BEGIN tablefoot --></div><!-- END tablefoot -->
    <!-- END catrow -->

Merci beaucoup à ceux qui m'aideront à résoudre ce problème.

[Lixyr]

..	Bonjour et Bienvenue sur le Forum des Forums ForumActif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de ForumActif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

Bonjour,

Pour réduire la largeur du titre,

Il suffit de rajouter dans le CSS, à la classe .categorie > h2 :

Code:

width: 705px;
margin: 0 auto 50px auto;

Vous changez les valeurs par ce que vous voulez.

Pour centrer les forums,

il faudrait rajouter un conteneur autours des forums, comme ça :

<!-- BEGIN catrow -->
<!-- BEGIN tablehead --><div class="categorie">{catrow.tablehead.L_FORUM}<!-- END tablehead -->
<!-- BEGIN cathead -->
<h{catrow.cathead.LEVEL} class="hierarchy">
{catrow.cathead.CAT_TITLE}
</h{catrow.cathead.LEVEL}>

<!-- END cathead -->
<!-- BEGIN forumrow --><div class="conteneur"><div class="forum">
<div class="desc">
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_DESC}</a>
</div>
<div class="encart">
<h{catrow.forumrow.LEVEL} class="titreForum">
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</h{catrow.forumrow.LEVEL}>
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="iconeForum" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

<div class="sousForums">
{catrow.forumrow.LINKS}
</div>
<div class="stats">
Il y a {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
</div>

<div class="dernierPoste">
{catrow.forumrow.LAST_POST}
</div>
</div>

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

Et ensuite rajouter dans le CSS, après :

Code:

.conteneur {
width: 700px;
margin: 0 auto;
}

Modifiez 700 par une valeur plus grande si ce n'est pas suffisant, le but étant d'avoir une largeur égale à la place que prennent les deux forums en comptant les marges et autres espaces.

[Chimik Girl]

Bonsoir Lixyr et merci pour ton aide. J'ai bien réussi à réduire la largeur des catégories, mais pour ce qui est des forums le centrage ne fonctionne pas. Lorsque je mets une valeur trop grande, ils se déplacent les uns en dessous des autres ou 3 à la suite au lieu de 2 et quand je réduis ce nombre pour les centrer correctement, ils restent aligner sur la gauche comme ceci :

Capture d'écran:

Je ne comprends pas pourquoi ?

[Teurancher]

Salut à toi ~
Un essai de ma part basé sur le code de Lixyr:

Panneau d'administration Affichage Couleurs Feuille de style CSS
Insérer les codes suivants:

Code:

.conteneur {
    margin: 0px auto;
    width: 800px;
}

.forum {
    margin: 0px 22px 40px;
    display: inline-block;
    width: 350px;
    float: left;
}

[Chimik Girl]

Bonjour Teurancher,
Merci beaucoup pour ton intervention. Maintenant, ça marche.