28182 sujets

CSS et mise en forme, CSS3

[Résolu] Un bloc centré est décalé vers la droite

Salut
J'ai centré avec grid un bloc mais celui-ci a un décalage vers la droite, alors que son margin est a zéro.

Voir le site (c'est une installation pour mon problème, car je bosse en local)
Administrateur
Hello,

Oui voici ta grille :

@supports (display:grid)
.site-grid {
    grid-gap: 0 1em;
    display: grid;
    grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". comp comp comp comp ."
        ". side-r side-r side-r side-r ."
        ". side-l side-l side-l side-l ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
    grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end];
}


Tu as laissé une colonne vide de chaque côté de ta grille (les symboles ".") et tu places ton élément à droite de cette colonne.
Il y a donc logiquement un décalage.
Meilleure solution
Salut.

Oui, mais l’élément qui est décalé c'est le header et il est en dehors de la div avec la class site-grid.
Administrateur
Je ne comprends pas ce que tu veux dire, ton header est parfaitement centré horizontalement :

.en-tete {
    background-color: #d3c5d7;
    justify-self: center;
    margin: 0;
    width: 1268px;
}


(par contre, en raison du width figé, il ne s'affichera pas bien sur écrans réduits)
Je n'avais pas fait gaffe mais c'est effectivement le site-grid qui n'est pas centré !

En fait je refais un site qui était sous Joomla 03, pour le passer à Joomla 04. Et pour cette version c'est Grid et Flex qui est utilisé. Et je ne les connais pas encore bien. Comme j'avais supprimé des positions, et sans touchers au grid-template-areas de site-grid, ça pose des problèmes. Je vais voir ça plus en détails.

Merci pour ton aide Smiley smile .
Modifié par schtroumph (17 Sep 2022 - 17:29)
Sujet clos
Aller à