Bug d'affichage des catégories en grid

2 participants

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

Résolu Bug d'affichage des catégories en grid

Message par Cascade Mar 10 Aoû 2021 - 21:23

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://stmary.forumactif.com

Description du problème

Bonjour,

Je suis actuellement en train de faire le design de mon forum et j'ai un problème d'affichage des catégories. Comme vous pouvez le voir sur le lien, l'affichage bug : au bout du 2e ou 3e forum de chaque catégorie, un décalage de certaines div apparaît (en l'occurence la description du forum et les sous-forums).

Il semble que ce soit dû à l'affichage avec le mode "grid", car le bug disparaît lorsque je l'enlève, mais je ne comprends pas pourquoi. Pourriez-vous m'indiquer s'il y a un bug dans mon css ?

NB: j'ai beaucoup modifié le template de base, le but est d'avoir quelque chose de très souple pour proposer plusieurs mises en formes grâce au sélecteur de style.

Code:
/*------------Corps des catégories----------*/
.forumline_PA_head { width: 100%; }
.titre_cate {}
.titre_cate h2 {
    display: inline-block;
    font-family: Raleway;
    font-style: italic;
    font-weight: 100;
    width: 100%;
    text-align: left;
    font-size: 30px;
    padding-left: 20px;
    height: 40px;
}
.titre_cate h2:first-letter {
    font-weight: 500;
    color: #178298;
    font-size: 50px;
}

.forumline_PA_body {
        background: #FFF;
    border-radius: 10px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    width: 96%;
    padding: 2%;
}
.forumline_PA_foot {}
.inter_cat {}

/*-----------Forums et sous forums----------*/
.forum_PA_content {
    display: grid;
    grid-template-columns: auto auto 20%;
    grid-template-rows: auto;
}
.inter_forum {
    display: block;
    height: 20px;
}

.forum_name {
    grid-row: 1/2;
    grid-column: 1/3;
    border-bottom: 1px solid #178298;
}
.forumlink {
    font-weight: 200;
    font-size: 20px;
    padding-bottom: 2px;
    margin-bottom: 5px;
}

.forum_icone {
    grid-row: 2/4;
    grid-column: 1/2;
    width: 100px;
}
.forum_icone img {
    display: block;
    margin: auto;
    margin-top: 15%;
}

.forum_desc {
    grid-row: 2/3;
    grid-column: 2/3;
    font-size: 13px;
    text-align: justify;
}
.forum_img_div {}
.forum_img  {}
/*--Ajouter class de chq ss forum--*/

.ssforums {
    grid-row: 3/4;
    grid-column: 2/3;
}
.ssforums a {
    color: #FFF!important;
    font-variant: small-caps;
    background: #178298;
    padding: 3px 10px 3px 10px;
    border-radius: 10px;
}
.ssforums a:hover { background: #000; transition: 1s; }
.ssforums img { opacity:1; }
.ssforums:hover img { opacity:1; }
.retour { display:block; }
.virgule { display:none; }

.lastpost_normal { display:block; }
.lastpost_ligne { display:none; }
.last_post_ligne { display: inline-block; margin:5px; }
.lastpost {
    grid-row: 2/4;
    grid-column: 3/4;
    text-align: right;
    font-size: 12px;
    margin-top: 10px;
}
.lastpost a {}
.lastpost a:hover {}

.stats {
    grid-row: 1/2;
    grid-column: 3/4;
    text-align: right;
    font-size: 12px;
    border-bottom: 1px solid #178298;
    margin-bottom: 5px;
    padding-top: 8px;
    color: #999;
    font-style: italic;
}

Merci d'avance !
Cascade

Cascade
Nouveau membre

Messages : 10
Inscrit(e) le : 02/02/2021

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

Résolu Re: Bug d'affichage des catégories en grid

Message par Cascade Jeu 12 Aoû 2021 - 10:41

Up
Cascade

Cascade
Nouveau membre

Messages : 10
Inscrit(e) le : 02/02/2021

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

Résolu Re: Bug d'affichage des catégories en grid

Message par Cascade Ven 13 Aoû 2021 - 14:38

Up Smile
Cascade

Cascade
Nouveau membre

Messages : 10
Inscrit(e) le : 02/02/2021

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

Résolu Re: Bug d'affichage des catégories en grid

Message par Cascade Sam 14 Aoû 2021 - 17:42

Encore un petit Up, si quelqu'un passe par là... Smile
Cascade

Cascade
Nouveau membre

Messages : 10
Inscrit(e) le : 02/02/2021

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

Résolu Re: Bug d'affichage des catégories en grid

Message par Cascade Dim 15 Aoû 2021 - 19:29

Up
Cascade

Cascade
Nouveau membre

Messages : 10
Inscrit(e) le : 02/02/2021

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

Résolu Re: Bug d'affichage des catégories en grid

Message par Cascade Mar 17 Aoû 2021 - 9:50

UP
Cascade

Cascade
Nouveau membre

Messages : 10
Inscrit(e) le : 02/02/2021

http://stmary.forumactif.com
Cascade a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bug d'affichage des catégories en grid

Message par Toryudo Mar 17 Aoû 2021 - 12:52

Bonjour !
Si je comprends bien, il manquerait un justify-content: left; sur le .forum_PA_content.
Par contre, il va falloir repréciser les tailles de chaque colonne, sinon l'affichage sera étrange... donc je propose cette solution :

.forum_PA_content {
display: grid;
grid-template-columns: 10% 70% 20%;
grid-template-rows: auto;
justify-content: left;
}

Il n'y a pas beaucoup de forums visibles pour les invités, je ne sais pas si cette solution fonctionne à 100%, mais elle a l'air de répondre aux attentes sur les 4 que je peux observer.
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1391
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bug d'affichage des catégories en grid

Message par Cascade Mar 17 Aoû 2021 - 15:31

Ca fonctionne à merveille, merci beaucoup Very Happy
Cascade

Cascade
Nouveau membre

Messages : 10
Inscrit(e) le : 02/02/2021

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

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

- Sujets similaires

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