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

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

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

Message par Chimik Girl le Dim 23 Aoû 2015 - 18:34

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.


Dernière édition par Chimik Girl le Lun 24 Aoû 2015 - 11:06, édité 1 fois

Chimik Girl
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 26/05/2015

http://fae-world.purforum.com
Chimik Girl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la longueur de la bordure des titres de catégories

Message par Lixyr le Dim 23 Aoû 2015 - 19:55

..
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
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink


Bonjour,

Like a Star @ heaven 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.

Like a Star @ heaven 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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la longueur de la bordure des titres de catégories

Message par Chimik Girl le Dim 23 Aoû 2015 - 23:31

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 ?


Chimik Girl
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 26/05/2015

http://fae-world.purforum.com
Chimik Girl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la longueur de la bordure des titres de catégories

Message par Teurancher le Lun 24 Aoû 2015 - 0:12

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;
}


Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la longueur de la bordure des titres de catégories

Message par Chimik Girl le Lun 24 Aoû 2015 - 11:02

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

Chimik Girl
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 26/05/2015

http://fae-world.purforum.com
Chimik Girl 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