[Résolu] Centrage de la page

Bonjour à tous
Je ne trouve pas quelles modifications faire au CSS pour que la page de test
https://www.alma-musica.net/tests/album.html
soit correctement centrée horizontalement.
Une idée ?

Hello,

Je ne suis pas sûr d'avoir compris. La page est bien centrée horizontalement chez moi.

Merci de ta réponse
Je profite de l’été pour essayer de traiter les ˆpetits" problèmes non cruciaux.
J’ai galéré hier jusqu’à me rendre compte que Firefox avait une définition des <figure> dans html.css qui comprend une marge, qui plus est importante.
Une fois cela réglé j’ai eu l’impression que le centrage n’était toujours pas correct, même si ça s’était amélioré. Peut-être une illusion due à la fatigue ???
Je vais regarder cela à tête reposée ,
Modifié par PapyJP (25 Jul 2022 - 10:00)

Hélas! je n'avais pas la berlue.
Voici ce que ça donne sur mon PC
Elle est effectivement centrée, mais pas dans l'écran et je n'arrive pas à régler le problème

Modifié par PapyJP (25 Jul 2022 - 10:01)

Raphael a écrit :

Par contre ce qui me turlupine, c'est que tu aies placé une <figure> dans une <figure>.

Pourquoi est-ce que cela te turlupine ?
Si tu veux regrouper des <figure> dans un seul bloc, tu les mets dans quoi ?

PapyJP a écrit :

Elle est effectivement centrée, mais pas dans l'écran et je n'arrive pas à régler le problème

Alors là oui forcément puisque le contenu (l'image) est plus large que la largeur de ton écran. Il faudrait rendre ce contenu fluide.

Ton image a une largeur intrinsèque de 1200px de large. Tu as réservé de la place pour tes contrôles (flêches gauche et droite) et donc la taille max-width: 90vw; que tu appliques à l'image ne suffit pas à ce qu'elle déborde si ton écran est petit.

Prévois peut-être une image plus petite (via srcset) pour les écran de taille réduite.

PapyJP a écrit :

Si tu veux regrouper des &lt;figure&gt; dans un seul bloc, tu les mets dans quoi ?

Disons que <figure> n'est pas un conteneur de <figure>s en tout cas il n'est pas conçu pour contenir une liste d'éléments.

Si ça ne tenait qu'à moi, un élément <div> de "role=group", voire une liste <ul> ferait très bien l'affaire.

Raphael a écrit :

Disons que <figure> n'est pas un conteneur de <figure>s en tout cas il n'est pas conçu pour contenir une liste d'éléments.

Créer des balises sémantiques a été un des gros progrès de CSS3. Pas tellement pour le référencement, comme on l’a dit à l’époque, mais surtout pour la lisibilité du code par un être humain. Je devais faire le relooking d’un site à base de <table> imbriquées, je n’allais pas faire des <div> imbriquées.
Sémantiquement <figure> signifie une ou plusieurs images avec un ou plusieurs commentaires. Avant j’aurais fait des <div class="figure"> imbriquées…
Avant de faire ça j’ai posé la question sur ce forum il y a quelques années et j’ai conclu des réponses que mettre des <figure> dans une <figure> était plus raisonnable que de mettre des <div>. Peut-être ai-je eu tort de le faire, mais maintenant il y a des centaines de ces constructions dans le site osirisnet.net et je ne vais pas revenir là dessus.

Bonjour, vite fait en passant car malheureusement je n'ai pas le temps : l'élément body à une marge de 8 pixels (ce qui lui ajoute une barre de défilement horizontal), déjà tu peux le passer à zéro sans problème.

Il y a des éléments en position absolue avec des corrections à 50% ou -50%, des translate()... Il faudrait tout reprendre et passer tout ça en grid ou flex, mais malheureusement je n'ai pas le temps en ce moment.

Raphael a écrit :

Ton image a une largeur intrinsèque de 1200px de large. Tu as réservé de la place pour tes contrôles (flêches gauche et droite) et donc la taille max-width: 90vw; que tu appliques à l'image ne suffit pas à ce qu'elle déborde si ton écran est petit.

Tu mets le doigt sur quelque chose: le traitement en PHP que je fais en amont sur les images n’aurait pas dû générer des images si grandes. Normalement le code de traitement regarde la taille des photos et si elles sont trop grandes il en génère une plus petite et si on clique sur l’image elle s’ouvre dans une nouvelle fenêtre avec la taille originale.
Je vais regarder de ce côté il doit y avoir un bug dans cette fonction

PapyJP a écrit :

Avant de faire ça j’ai posé la question sur ce forum il y a quelques années et j’ai conclu des réponses que mettre des &lt;figure&gt; dans une &lt;figure&gt; était plus raisonnable que de mettre des &lt;div&gt;. Peut-être ai-je eu tort de le faire, mais maintenant il y a des centaines de ces constructions dans le site osirisnet.net et je ne vais pas revenir là dessus.

Ah mais je n'ai pas dit que c'était mauvais hein, juste que ça me turlupinais
Dans ton cas, l'élément important est l'image donc il est parfaitement logique que tu la structures via <figure>.
Par contre pour le "conteneur" de toutes ces figures, rien ne te force à utiliser un élément "sémantique" : ton conteneur <figure> ici fait très bien l'affaire, mais un <div role="group"> ferait également parfaitement l'affaire puisque la sémantique de "groupe" y est indiqué)

J'ai réduit la largeur de l'image à 70vw et j'obtiens

même si ça finit par tenir sur l'écran, on voit que l'image n'est pas centrée, et je ne comprends toujours pas pourquoi.
Tout le code étant défini par script, je n'ai pas de problème a priori pour changer de techno
Le cahier des charges:
1) une balise (quel que soit son nom) qui couvre toute la page avec un fond noir
2) une image centrée dans la page avec des marges suffisantes pour y mettre
- au dessous un texte court
- au dessus, à gauche et à droite, une icône de navigation
ça semble tous simple et pourtant je ne parviens pas à le réaliser...

Merci de ta réponse
Effectivement je me suis rendu compte hier que le ficher html,css de FireFox a une margin non nulle pour la balise <figure>
J’ai corrigé ce problème hier mais ça ne suffit pas apparemment
J’ai essayé cet après-midi de changer de design en supprimant la balise <figure> qui encadre le tout et en la remplaçant par une balise <section> qui fait également sens dans ce contexte. Puis j’ai essayé un design à base de flex Ça marche "presque", ce qui est une façon optimiste de dire que ça ne marche pas, enfin… pas encore
Je m’y remet demain matin
Bonne nuit
Modifié par PapyJP (25 Jul 2022 - 23:49)

Avec moult peines et douleurs, j'y suis finalement parvenu
https://www.alma-musica.net/tests/album2.html

Mille mercis à tous pour vos remarques et propositions qui m'ont fortement aidé.

Le nouveau design est basé sur flex.

À l'origine, la première version de "l'album photo" du site date des années 2000.
Elle a évolué au cours du temps mais je ne m'étais jamais aventuré dans le domaine de flex, c'est une techno que j'ai toujours du mal à maîtriser, malgré le bouquin de Raphaël qui est pourtant en permanence à portée de main sur mon bureau (heureusement!!!)

Par ailleurs vos remarques sur les margins intempestives m'ont fait réaliser que, dans cette page de test, j'avais oublié le lien qui est dans toutes les pages du site vers mon fichier common.css dont le but principal est de faire un reset sur les déclarations du fichier html.css de FireFox, en plus des @font-face et @media visant à faciliter la responsivité du code.