[RÉGLÉ] Largeur du contenu (fixe) dans Cassiopeia ?

[RobertG]

Bonjour,

Je craque !
Après mes multiples questions non résolues ou bricolées, je bute sur une qui devrait être extrêmement simple mais pour laquelle je ne trouve aucune information.
Comment définir la largeur du contenant ?
Si je force la largeur max du body ou de site.grid, tout se cale à gauche, le contenant ne se centre pas.
J'ai un site qui n'utilise que la colonne principale et dont le contenu n'a pas besoin de grande largeur (des diaporamas d'images de 900 px de large et quelques articles que la définition css de leur contenu met à la largeur souhaitée et qui sont centrés, j'ignore comment, mais aussi une page de contact qui se retrouve calée complètement à gauche alors qu'elle ne fait que 600 px de large, ce qui m'oblige à forcer un centrage avec des margin latérales à auto.

[Colnem30]

Ton contenant doit être un contenant {display:block} (pour un body ou un div, c'est par défaut, sauf surcharge du template) et tu dois lui appliquer un {margin:auto;}.

Vérifie avec l'outil de développement de ton navigateur que ces règles css surchargent bien celles fixées par le template, sinon, rajoute {margin:auto !important}.

[RobertG]

Merci !

Ce que je veux dire, c'est que sur les templates jusqu'en version 3, on pouvait définir la largeur du site de ma ière simple soit dans le style du template, soit au niveau de la feuille de style. Si j'ai bien compris, avec grid c'est un paramètre qu'on ne peut pas maîtriser.

[woluweb]

Si
Avec une ligne de css et du coup on choisit exactement ce qu on veut
A nouveau, cfr mon tuto sur slides.woluweb.be

[RobertG]

Ce n'est quand même pas simple par rapport à une définition d'une taille maximale "max-width" en pixels. Et je suis loin d'être sûr d'y arriver.

[altacrea]

Bonjour, as tu réussie ?. Cela m’intéresse, moi aussi je galère avec ce css grid (même avec le tuto slides.woluweb.be).

Avec mon J4! et Cassopeia j'essaye de modifier la partie bottom-b pour la mettre à 100% (je voudrais juste mettre un backgound en 100%)
Je tente en css, avec la méthode CSS grid, mais j'ai beaucoup de mal à l'adapter.

[RobertG]

Bonjour,

Non ! Comme le site n'a que des articles dont la largeur max est définie et des diaporamas également, la partie centrale, avec des marges auto, simule une largeur fixe.
Mais je vais avoir le même souci avec plusieurs autres sites, à ne pas pouvoir choisir.

[RobertG]

Bottom-b est déjà d’office à 100% ! A combien il est chez toi ?

A moins d'être en mode fluide, le bottom-b ne sera que de 100% de la largeur définie quelque part par Cassiopeia, si j'ai bien compris. Et à vue de nez sur un nouveau site que je suis en train de migrer, cette largeur par défaut est de l'ordre de 1280px sur une fenêtre de 1600 de large, et plus sur une de 1920. Impossible donc d'avoir une largeur fixe si on veut que le site ait le même aspect sur tous les grands écrans.

[RobertG]

Personnellement, c'est l'ensemble du site dont je veux pouvoir définir une largeur maximale.

[altacrea]

Mon Cassopeia est en mode colonne. Donc une largeur fluide max de 1320px. Certaines positions comme bannière ont une largeur de 100% et non 1320px.
Je voudrais donc adapter le bloc bottom-b avec les css grid pour une largeur de 100%. Comme ça je pourrais lui attribuer un bacgkround en pleine largeur (et je laisse le Footer tranquille!)

[RobertG]

Le contenant, c'est la grid, dont je ne peux pas définir la largeur. J'ai regardé la page de Marc, mais ça ne m'a pas avancé.

Heureusement que daneel répond de manière claire quand il intervient, sans renvoyer systématiquement à de la doc externe !

Depuis quelques temps, lorsque je pose des questions sur des problèmes que je n'arrive pas à résoudre, on me renvoie à de la doc en ligne que je pourrais trouver moi-même, mais qui ne m'aide en rien, quand j'attends des conseils. Je crois que je vais cesser de poser mes questions ici !

J'ai l'impression d'être face à des profs qui me demandent de potasser les bouquins et qui ne cherchent pas à m'aider, quand j'attends l'attitude d'un instituteur pédagogue qui va me répondre directement, à moi seul ou à toute la classe, parce que je n'ai pas compris. Si tout est dans les livres, nul besoin de professeurs. Allez expliquer ça aux Compagnons du devoir !

[altacrea]

Tu peux mettre plusieurs modules sur la position footer.

Je sais, ce n'est pas, ce que je recherche

[altacrea]

Le contenant, c'est la grid, dont je ne peux pas définir la largeur.

Pour mon bottom-b, j'ai pour l'instant réussi à mettre à 100% avec ce css grid fatiguant:
div.grid-child.container-bottom-b {
grid-column: full-start/full-end;
background-color: turquoise
}

Je cherche maintenant a avoir le bloc des modules en 1320px pour .container-bottom-b et sans doute modif de .bottom-b card.
Ma seul aide (pour l’instant?) : https://css-tricks.com/snippets/css/...template-areas
ET JE NE VEUX PAS TOUCHER AU FOOTER

[daneel]

Bonjour,

C'est un exercice difficile d'adapter des explications déjà données même partiellement, ceux qui réalisent des tutoriels, des conférences ou des formations le savent bien. On passe déjà beaucoup de temps et un peu de compréhension ne fait pas de mal.

On essaye quand même de répondre selon nos disponibilités et nos moyens. Nous faisons tous des efforts de partage et d'entraide. Parfois et malgré des explications pas à pas, il faut s'adapter à ce niveau de compréhension qui repousse bien souvent nos limites.

Une attitude positive évite la frustration et les déceptions, aussi nous sommes désolé pour le manque de temps et parfois de référence, on prend parfois des raccourcis. Dans ses présentations à l'international (donc en anglais), Marc a bien évoqué le sujet des dimensions en statique ou fluide du template cassiopeia. C'est une solution, je crois que c'est le bon lien : https://slides.woluweb.be/cassiopeia...ia.html#par_81
Merci de confirmer !

J'apporterai également quelques explications qui pourront donneront un nouvel éclairage sur le sujet. Visuellement, j'essaye d'ajouter un peu plus d'interactivité dans mes tutoriels à l'image de https://cssgridgarden.com/#fr pour comprendre en s'amusant... on est aussi vendredi, je me lâche un peu !

[altacrea]

Merci @daneel super ce petit jeu !