Ma grid dépasse de l'emplacement des posts

[L'ange noir]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome, Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://sangsmelesoriginels.forumactif.com

Description du problème

Bonjour à tous,

J'ai fais une grille en grid css mais elle dépasse de mon forum. Voici une image qui vous parlera mieux que des mots :

IMAGE:

je voudrais qu'elle soit pile poil dans la partie réservée au post. Je ne vois pas comment faire. J'ai réduis la taille de la grid, mais cela me fait un espace blanc à gauche et la grille dépasse toujours.

Mon code html :

Code:

<div style="margin-left:10px;" class="grilleavril">
<div class="dateavril">Avril 2032</div>
<div class="titre">Titre</div>
<div class="grostitre" style="margin-top:20px;">GROS TITRE</div>
<div class="art1">- ARTICLE 1</div>
<div class="art2">ARTICLE 2
</div>
<div class="barreinter"><img src="https://i.servimg.com/u/f12/17/70/82/43/szopar10.jpg" width="600" height="50"/></div>
<div class="artgauche">ANNONCE GAUCHE</div>
<div class="titrepa">PETITES
ANNONCES</div>
<div class="artcentral">ANNONCE CENTRE</div>
<div class="artdroite">ANNONCE DROITE</div>
<div class="arbre"><img src="https://i.servimg.com/u/f12/17/70/82/43/arbre11.png" width="100"/></div>
<div class="artbas">ANNONCE BAS</div>
<div class="footer1"><img src="https://i.servimg.com/u/f12/17/70/82/43/images11.png"/ </div>
<div class="footer2">bas de page</div></div>

Code css :

Code:

.grilleavril
{
 display:grid;
 justify-content: stretch;
  width:92%;
 border: 1px solid black;
 text-align:center;
 grid-template-columns:repeat(4,1fr);
 grid-template-rows: 0.7fr 0.5fr 5fr 1fr 3fr 3fr 3fr 2fr 1fr;
 grid-template-areas:
    "date titre titre titre"
    "grostitre grostitre grostitre grostitre"
    "art1 art1 art2 art2"
    "barreinter barreinter barreinter barreinter"
    "artgauche titrepa artdroite arbre"
    "artgauche artcentral artdroite arbre"
    "artbas artbas artbas arbre"
    "footer1 footer1 footer1 footer1"
    "footer2 footer2 footer2 footer2";}

.dateavril
{background-color:#0489B1;
  border: 1px solid black;
 grid-area:date;
height:30px;}

.titre
{background-color:#0B4C5F;
  border: 1px solid black;
grid-area:titre;
}

.grostitre
{background-color:#38610B;
  border: 1px solid black;
grid-area:grostitre;}

.art1
{background-color:#B404AE;
  border: 1px solid black;
grid-area:art1;
}

.art2
{background-color:#CEF6CE;
  border: 1px solid black;
grid-area:art2;
}

.barreinter
{background-color:#F6CECE;
  border: 1px solid black;
grid-area:barreinter;
}

.artgauche
{background-color:#0101DF;
  border: 1px solid black;
grid-area:artgauche;
}

.titrepa
{background-color:#848484;
  border: 1px solid black;
grid-area:titrepa;
  justify-self: stretch;
}

.artdroite
{background-color:#F6E3CE;
  border: 1px solid black;
grid-area:artdroite;
}

.arbre
{background-color:#FF4000;
grid-area:arbre;
}

.artcentral
{background-color:#FA58AC;
  border: 1px solid black;
grid-area:artcentral;
}

.artbas
{background-color:#2EFE64;
  border: 1px solid black;
grid-area:artbas;
}

.footer1
{background-color:#8181F7;
grid-area:footer1;
}

.footer2
{background-color:#A9F5E1;
  border: 1px solid black;
grid-area:footer2;
}

[Toryudo]

Bonjour !
Vous avez un margin-right: -50px; sur votre élément .postbody, c'est ce qui provoque ce décalage : en le remettant à zéro, ça fonctionne !
Mais je ne sais pas si ça provoquera quelque chose de spécial ailleurs sur votre forum, je ne sais pas pourquoi est-ce qu'il est valorisé à -50px chez vous.

[chattigre]

Bonjour !

Euh avant toute chose, on est bien d'accord que c'était un exemple le "une grille par mois"...
Vous ne faites pas ça juste pour me faire plaisir j'espère


Concernant votre problème, c'est à cause de ceci dans votre CSS :

Code:

.postbody {
   font-size: 14px;
   margin-right: -50px;
   text-align: justify;
}

Et en particulier de la 2e règle.
D'ailleurs, vous pouvez constater que le problème est présent sur tous les messages et pas juste sur le message contenant la grille.

Je vous invite donc à supprimer la règle margin-right: -50px; de votre CSS sur l'élément .postbody

EDIT : Deux réponses pour le prix d'une, désolé Toryudo ^^

Bonne journée !

[L'ange noir]

Oh non, ce n'est pas pour vous faire plaisir. J'ai déjà édité 4 journaux. 3 sous forme d'image, autant dire horrible en définition et le dernier en table directement sur le forum. C'est Oka.mi qui lm'a parlé du grid css que je ne connaissais pas du tout. Et j'ai bien l'intention de faire tous mes journaux avec ce système parce que c'est vraiment très pratique. Après je ne fais pas un journal par mois. Souvent à cause du temps que je passe à le faire, mais tous les 3 mois. Si je vais plus vite avec le grid, je pourrai en faire plus souvent et peut-être arriver à un par mois. Sans certitude parce que je travaille et j'aurai encore plus de boulot a partir de janvier.

Et rassurez-vous, tout ce que vous m'avez appris ici, je l'ai mis en pratique. Tout le renouveau de mon forum, c'est grâce à vous. Seules les dernières modif parce que j'ai eu moins de question. Mais, je ne vous fais pas travailler pour rien. D'ailleurs j'ai commencé à refaire le journal d'avril qui est en image et presque illisible, sous forme de grid. C'est ce sur quoi je travaille. Et je me lis pas tout ces tutos et je ne regarde pas toutes ces vidéos juste pour passer le temps. je n'en ai déjà pas beaucoup du temps...

D'ailleurs quand j'aurai terminé, je vous partagerai mon travail pour que vous voyez tout ce que j'aurai réalisé grâce à votre aide.

Edition : Et voilà, c'est tout bon. Merci beaucoup.

Pour le souci, je dois avoir le même sur mon vrai forum. Là c'est le forum test. Je ne veux pas tout casser sur l'autre par une fausse manip même si j'ai sauvegardé tous les codes.

Donc je vais faire ce que vous dites et je reviens vous dire.