[Résolu] Positionnement de texte et image

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 :

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 :

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.

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

Merci pour cette piste, je vais tester ça dans la soirée.

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)

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

cdt

Ok
Merci de ton aide

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

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 ?

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

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 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 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.

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).

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.