28092 sujets

CSS et mise en forme, CSS3

Bonjour à tous
J'ai une page (de test)
https://tests.osirisnet.net/docu/bruxelles_art_du_contour/tile-test.htm
qui s'affiche comme ceci sur écran large :
upload/1696324744-48769-tile1.png
Chaque <figure class="tile"> est définie par

@media screen and (min-width:705px) {
	.tile {display:flex;}
	.tile img {align-self:flex-start;}
	.tile > * {margin:auto 0;}	
}

Sur écran étroit on a :
upload/1696324954-48769-tile2.png
Avec comme CSS

.tile {
	border:1px solid gray;
	border-radius:0.25em;
	padding:0.25em 0.125em;
	margin:0.25em auto;
	display:table;
	clear:both;
	width:96%;
}

.tile img {
	float:left;
	max-width:40%;
	margin:0.5em;
}

Je ne trouve pas cela satisfaisant car certaines <figure> ont un texte court, et pour celles-là il serait préférable de garder l'alignement vertical centré du texte.
En d'autre termes, l'utilisation d'un @media pour passer d'une présentation à l'autre n'est pas appropriée.

Je pourrais bien entendu gérer cela par JavaScript, ce qu'on faisait jadis avant CSS3, mais il doit y avoir une solution purement CSS que je ne trouve pas.
Auriez vous une piste à me recommander ?

Merci de votre aide.

PS un autre point qui n'a rien à voir :
pourquoi faut-il que l'on ait

.tile {display:table;}

Si je mets

.tile {display:block; clear:both;}

j'obtiens une présentation incohérente.
Bonjour,
juste en passant rapidement, si tu mettais : text-align: left; au moins en mode petit écran, tu aurais une meilleure présentation. Effectivement, les lignes courtes et longues ne font pas très beau en mode text-align: center;
Ce n'est pas la réponse à ta question, mais je vois ici une amélioration.
Judicieuse remarque
Tout dépend du texte, s'il est très court, il vaut mieux le centrer, s'il a besoin de plusieurs lignes, il est préférable de le justifier...
Bref, c'est toujours la galère que d'adapter la présentation au contenu.

Par exemple j'ai une autre page où le centrage rend très bien :
upload/1696335097-48769-tile3.png

et sur mobile ça donne
upload/1696335279-48769-tile4.png

Plus loin dans la même page j'ai
upload/1696335390-48769-tile5.png

Mais dans ce contexte je connais a priori le type d'information, et donc sa longueur approximative.

Mais si cela varie beaucoup, comme dans la page de tests ci-dessus, c'est un cauchemar de faire ça par CSS.
Modifié par PapyJP (03 Oct 2023 - 14:19)
Administrateur
Hello !
PapyJP a écrit :

Je ne trouve pas cela satisfaisant car certaines &lt;figure&gt; ont un texte court, et pour celles-là il serait préférable de garder l'alignement vertical centré du texte.
En d'autre termes, l'utilisation d'un @media pour passer d'une présentation à l'autre n'est pas appropriée..


Alors c'est difficile de laisser deviner le navigateur et de lui faire savoir ce qu'est "un texte court". Il faudra forcément faire le choix toi-même et d'appliquer une classe différente à ce moment (soit manuellement, soit avec un langage capable de compter les caractères).
De plus, le choix de positionnement flottant est un très gros écueil pour les alignements modernes : sans Flexbox ou Grid Layout, je te souhaite bon courage pour aligner facilement.

PapyJP a écrit :

PS un autre point qui n'a rien à voir :
pourquoi faut-il que l'on ait

.tile {display:table;}

Si je mets

.tile {display:block; clear:both;}

j'obtiens une présentation incohérente.


Il y a plusieurs choses mais la principale est que display: table affecte l'élément lui-même, mais aussi ses enfants en créant une structure anonyme tabulaire : https://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html
Modérateur
Bonjour,

Voici une autre piste expérimentale qui peut-être un compromis.

basé sur les containerqueries et une valeur de padding via calc() qui s'annule si la valeur passe en négatif.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

CSS à tester et valeur/unité à modifier à ta guise :
figure {
  container-type: inline-size;
}
figcaption{  
  padding-top: calc( 100px  -  5cqmax)
}

en gros, plus le conteneur figure sera grand, plus tôt calc() passera en négatif et inapplicable, plus il sera petit, plus le padding-top sera important. Le compromis est à trouvé dans la valeur de la hauteur minimale imposée par l'image à figure

Pour le display:table , il sert ici à contenir les flottants voir : https://developer.mozilla.org/fr/docs/Web/Guide/CSS/Block_formatting_context

Tu peut retrer display:table en le remplaçant par exemple avec overflow:hidden; de façon à toujours creer ton contexte de formatage.

Cdt
Modifié par gcyrillus (03 Oct 2023 - 14:34)
Raphael a écrit :

De plus, le choix de positionnement flottant est un très gros écueil pour les alignements modernes : sans Flexbox ou Grid Layout, je te souhaite bon courage pour aligner facilement.

Ce site a été primitivement conçu à une époque ou flex et grid étaient dans les limbes.
Toutes les pages sont réalisées avec des float et des clear, il y a plus de 1000 pages comme ça et ça n'a jusqu'à présent jamais donné lieu à des remarques des visiteurs.
Mais même aujourd'hui je ne vois pas très bien comment faire ça avec flex ou grid, et je serais intéressé de comprendre comment faire pour inclure des <figure> dans du texte flottant en utilisant ces techniques.
Modifié par PapyJP (03 Oct 2023 - 15:09)
J'ai essayé d'utiliser les container-queries.

.tile {
	border:1px solid gray;
	border-radius:0.25em;
	padding:0.25em 0.125em;
	margin:0.25em auto;
	width:96%;
	overflow:hidden;
	container-type: inline-size;
}
.tile.right {
	margin-left:0.5em;
}
.tile.left {
	margin-right:0.5em;
}
.tile img {
	max-width:40%;
	margin:auto 0.5em;
	float:left;
}
.tile figcaption {
	text-align: left;
	margin:auto 0.5em;
	padding-top: calc(100px - 5cqmax);
}
.tile figcaption h3 {
	text-align:center;
}

Ce CSS me donne une présentation acceptable pour les tailles que j'ai testées, mais le texte est toujours cadré en haut de l'image malgré le "padding-top", quelle que soit les valeurs que je mette dans le calc() je ne vois aucun changement dans la présentation.

Fichiers de test :
https://tests.osirisnet.net/docu/bruxelles_art_du_contour/tile-test1.htm
et
https://tests.osirisnet.net/tombes/artisans/tombes_deir_el_medineh/@tombes_deir_el_medineh_01.htm
vers le milieu de la page il y a une tile qui a cet aspect sur écran large :
L'intérêt est qu'elle est cadrée à droite de la page et ne prend que la moité de la largeur de la page alors que celles de l'autre page prennent toute la largeur.
Modifié par PapyJP (04 Oct 2023 - 15:29)
Modérateur
bonjour,

papyJp a écrit :
Ce CSS me donne une présentation acceptable pour les tailles que j'ai testées, mais le texte est toujours cadré en haut de l'image malgré le "padding-top", quelle que soit les valeurs que je mette dans le calc() je ne vois aucun changement dans la présentation.


Il y a un padding sur .docPage figure figcaption qui est prioritaire par le poids du selecteur Smiley cligne

cdt
Merci gcyrillus, c'est un compromis qui me semble fonctionner de façon à peu pr_s satisfaisante.
Après tâtonnements je suis arrivé à
padding-top: calc(4em - 5cqh);
qui semble bien fonctionner dans mon contexte.

J'ai également tenté une approche avec une classe "short-text" pour distinguer les deux présentations, mais sur un petit smartphone il n'y a plus de long-text ou short-text !
Modifié par PapyJP (05 Oct 2023 - 11:43)
En testant le nouveau CSS par rapport à l'ancien je trouve un problème que je ne comprends pas:
page https://tests.osirisnet.net/tombes/el_kab/setaou/setaou_01.htm
et page https://tests.osirisnet.net/tombes/el_kab/setaou/@setaou_01.htm
"Normalement" il ne devrait pas y avoir de différence de présentation entre les deux pages pour le premier groupe d'images.
Cela vient manifestement du changement de CSS;
Pourriez vous regarder la raison de ce changement spectaculaire ?
Merci de votre aide
Administrateur
Bonjour,

le souci vient de .cluster { width: max-content; } je pense.
Mais je ne vois pas par quoi le remplacer. fit-content pour ce 1er bloc oui mais alors les suivants font toute la largeur... Je ne maîtrise pas les Container Queries voire max-content dans un cas comme ça, désolé.
Si une autre classe distingue ce 1er cluser des autres, ça peut se régler plus facilement je suppose ?
Administrateur
PapyJP a écrit :
Cela vient manifestement du changement de CSS;
Pourriez vous regarder la raison de ce changement spectaculaire ?


Ton `display: table` sur .tile ne faisait pas que créer un contexte de formatage : le modèle tabulaire généré anonymement avait son utilité. Je te conseille de le remettre, à moins que tu ne souhaites revoir toute la structure proprement Smiley murf
Modérateur
Bonjour,
le soucis vient de ton max-width-content qui ne voit pas les conteneurs enfant avec la règle : container-type:inline-size;

Les autres cluster ont au moins un h3 , qui lui va donner une largeur minimale alors que les figure en container-type ne seront pas pris en compte.
Oui , c'est bizarre, ce n'est pas intuitif du tout, car un élément inline n'a à priori pas de dimensions et pourtant on se sert de l'espace qu'il occupe?

Solutions, pansements possible :

Tenter de cibler tes deux .group , seuls adjacents en donnant une largeur à l'une des figure:

.group:first-child + .group:last-child figure.tile {
  width:80vw;    
}


Ou insérer au moment de l’édition un élément entre eux qui recevra lui même une largeur de façon à ce que 'max-content' ai quelque chose à se mettre sous la dent.

Solutions si tu souhaites toujours te passer du display:table que tu avais Smiley cligne heu , en fait non, pareil le display:table en lieu et place de width:max-content ne change rien (c'est un peu la même chose)

JE commence à moins bien les aimées ces containerqueries Smiley smile Cela me rappelle un peu la découverte du mélange de float et haslayout(IE5) / contexte de formatage

cdt
Modifié par gcyrillus (05 Oct 2023 - 18:32)
oui, c'est bien container-type:inline-size; qui pose problème, si je le supprime toute va bien... mais bien entendu le texte se retrouve en haut.
Ce site est construit par scripts à partir d'un html basique et des appels de scripts par le propriétaire. ça ne me laisse pas vraiment d'opportunité pour ajouter des choses en fonction du contexte. C'est déjà assez compliqué comme ça.

Pour le moment j'enlève ta merveilleuse solution et je mets un padding fixe de 0.5em en haut du <figcaption>, en attendant que je trouve comment améliorer ça.
Administrateur
PapyJP a écrit :
oui, c'est bien container-type:inline-size; qui pose problème
Techiquement le problème ne vient pas du container-type mais de figure, gcyrillus l'a bien expliqué et sa solution fonctionne.
Ceci dit, en remettant ton display: table sur .tile cela fonctionnera (indirectement) aussi en raison des éléments tabulaires générés (figure y gagnera un affichage d'élément de tableau).
Modérateur
Ce que l'on peut aussi faire, c'est se servir du parent .group au lieu de figure comme container référent.
À priori :
.framed .group {
  border-spacing: 0;
  container: parent inline-size;/* raccourcie , on peut faire alors un @container parent (max-width:800px) {figure { //styles  si .group + petit que 800px}}*/
}
.docPage figure.tile figcaption {
  text-align: left;
  margin: auto 0.5em;
  padding-top: calc(5em - 5cqh);
}

épargnerait figure sans provoquer d'effet de bords.

Bonne journée/week-end à tous
Modifié par gcyrillus (06 Oct 2023 - 10:01)
Après mure réflexion, je vais proposer au propriétaire de mettre le texte à droite de l'image, centré verticalement, si on est en orientation paysage et au dessous de l'image en orientation portrait. C'est plus simple et les résultats sont assez satisfaisants.

.docPage .tile {
	border:1px solid gray;
	border-radius:0.25em;
	padding:0.25em 0.125em;
	margin:0.25em auto;
	width:96%;
	display:flex;
	flex-direction: row;
}
.docPage figure.tile img {
	align-self:flex-start;
	max-width:40%;
	margin:auto 0.5em;
}
.docPage figure.tile figcaption {
	text-align: left;
	margin:auto 0.5em;
	padding-top:0.5em;
}
@media (orientation : portrait) {
	.docPage .tile {
		flex-direction:column;
	}
	.docPage figure.tile img {
		margin:0.5em auto;
	}
	.docPage figure.tile figcaption {
		margin:0.5em;
	}
}

Moyennant quoi cette discussion m'a apporté énormément de choses, à commencer par l'existence des container queries et je vous en remercie.