[Résolu] Problème de hauteur

Bonsoir à tous

J'ai une balise <figure> à l'intérieur d'une balise <td>.
Je voudrais que la balise <figure> occupe toute la hauteur de la cellule, mais je n'y arrive pas.
Mon CSS:

td figure{display;inline-table; height:100%;}

J'ai essayé de changer la valeur de "display" sans résultat, la balise <figure> garde la taille définie par son contenu.
Pourtant une cellule a bien une hauteur, définie par celle de la cellule la plus haute de la ligne dans laquelle elle se trouve, je ne tombe donc pas dans la fameuse réponse "100% de quoi", qui est toujours la première que l'on a dans ce type de question.
On peut voir un exemple dans la page de test http://tests.osirisnet.net/docu/bruxelles_art_du_contour/@bruxelles_art_du_contour_05.html
Les balises sont générées par un script au chargement de la page, mais l'explication simplifiée ci-dessus est cohérente (du moins me semble-t-il) avec ce que génère le script.
Quelqu'un pourrait il me donner la clef du mystère?

Merci de bien vouloir éclairer ma lanterne.

Désolé je ne comprend pas le concept de "valeur utilisable de height". C'est quoi ce bidule?
Si j'ai mis des cellules, c'est justement pour que mes <figure> soient dans quelque chose qui a une hauteur. Sinon je peux générer autre chose, mais quoi?
Le problème devient: "comment écrire en HTML une balise et le CSS correspondant pour que ces f... <figure> soient de la même hauteur quel que soit leur contenu?"
Je ne tiens pas à utiliser des flex, d'une part je ne l'ai jamais fait, ça me fait une chose de plus à apprendre, d'autre part c'est diversement supporté par les navigateurs en fonction de leur version."
Modifié par PapyJP (07 Oct 2016 - 21:07)

Je viens de (re)lire le chapitre "flex" du bouquin de H.Giraudel er R.Goetter.
Pour autant que j'aie compris quelque chose à ce chapitre je ne vois pas du tout en quoi cela apporte une solution à mon problème.
Ça va bien aligner et répartir mes <figure>, mais comment faire pour que mes <figure> aient la même hauteur?
Modifié par PapyJP (07 Oct 2016 - 23:12)

Comme je ne serai pas en ligne ce week-end, j'ai fait une page http://tests.osirisnet.net/docu/bruxelles_art_du_contour/@bruxelles_art_du_contour_06.html qui définit le cluster de diapos comme

.flex-cluster{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    flex-flow:wrap;
}

Je n'ai pas compris:
1) comment forcer une nouvelle ligne: ma classe "clear" qui définit le diapo comme "clear:all" est inopérante, ce que je comprends très bien, mais par quoi la remplacer?
2) comment faire en sorte que ces f... <figure> d'une même ligne aient la même hauteur, ce qui était LE point important que je n'arrivais pas à résoudre avec ma techno d'un autre âge.

En soi, ce n'est pas mieux que dire que le cluster est "text-align:justify" et que les <figure> sont des inline-table, ce qui était mon point de départ.

Noter que comme je ne sais pas quelles diapos sont sur quelle ligne, je ne vois pas comment faire en sorte que au moins les images d'une même ligne aient la même hauteur, même avec un script.

Bonne nuit à tous et à lundi
Modifié par PapyJP (07 Oct 2016 - 23:46)

Tu pouvais restyler le tableau avec display:flex; sans modifier ton code ou tout simplement en donnant la bordure au td pour tout CSS.

Pour cette nouvelle structure, la base CSS est assez courte:

		  .flex-cluster{
			display:flex;
			flex-direction:row;
			flex-flow:wrap;
                        /* pas de justify-content necessaire ici AMHA */
		}
		  .flex-cluster .diapo{
			flex:1;/* on rempli les lignes*/
			margin:3px;/* une marge, visu similaire a un border-spacing pour des cellules de  tableau */
                 }

Cdt

Bonjour.

Je viens de voir la page... si certains éléments qui sont allongés ont la même hauteur, ça risque d'être au détriment de certaines diapos qui sont plus en hauteur qui seront, elles, toutes petites en largeur... je pense que vous devriez davantage penser hauteur et largeur pour trouvez un bon compromis...

@PapyJp,

et si ton écriture première était en détail :

display:inline-table

Modifié par pictural (09 Oct 2016 - 00:36)

pictural a écrit :
@PapyJp,

et si ton écriture première était en détail :

display:inline-table

C'est bien le cas.
Je pense que j'exprime mal mon problème, mais avec un téléphone je ne peux as faire facilement des images qui valent mieux qu'un long discours. Je reprendrai cela en rentrant chez moi

Bonsoir à tous

Je reprends l'exposé du problème.

1) pour faciliter le travail du propriétaire du site, j'ai défini la structure suivante pour les tableaux de "diapos"

<figure class="cluster ... ... ">
<script>diapo('image1.jpg', ...)</script>
<script>diapo('image2.jpg', ...)</script>
<script>diapo('image3.jpg', ...)</script>
<script>diapo('image4.jpg', ...)</script>
<script>diapo('image4.jpg', ...)</script>
</figure>

La classe "cluster" définit un tableau de diapo, les classes secondaires optionnelles permettant de préciser qu'on veut le cadrer à gauche ou à droite, limiter sa largeur à un certain poucentage du conteneur, etc.
Le script "diapo" a pour premier paramètre le nom de l'image, les arguments supplémentaires optionnels permettent de définir qu'une diapo doit être la première d'une ligne et le contenu de la légende qui accompagne cette image.
Une "diapo" est représentée par un élément <figure> contenant un élément <img> et éventuellement un élément <figcaption> représentant la légende de l'image. Une diapo est encadrée.

2) lors du chargement de la page, un script "arrangeClusters" examine tous les clusters de la page et génère le HTML nécessaire à obtenir la présentation désirée.
a) faire en sorte que les ruptures de ligne soient positionnées conformément aux spécifications de l'utilisateur
b) faire en sorte que les images d'une même ligne aient exactement la même hauteur
c) faire en sorte que toutes les diapos aient la même hauteur, qu'elles aient ou non une légende, et que cette légende fasse une ou plusieurs lignes
Comme il se doit l'implémentation doit donner un résultat "responsive".

Le point qui me préoccupe est le point c)
Je ne sais pas quel HTML/CSS générer pour forcer les diapos d'une même ligne à avoir la même hauteur.

Dans l'image suivante: en haut, ce que j'obtiens actuellement, en bas ce que je voudrais obtenir.
http://tests.osirisnet.net/migration/outils/cluster-row.png

A noter que le problème de l'homogénéisation des hauteurs d'images est différent ce celui des hauteurs des textes: pour les images, le script calcule quelle doit la largeur de l'image pour obtenir la hauteur désirée, à traduire cela en pourcentage de la largeur effective du conteneur, j'obtiens un résultat responsive sans avoir besoin de déclencher un script à chaque changement d'orientation. Si je ne trouve pas de solution CSS, je vais effectivement recalculer les hauteurs des diapos en permanence.
Je pensais qu'en mettant les diapos dans des cellules, en déclarant que la hauteur de la diapo est 100% de la hauteur de la cellule, ça allait me permettre d'obtenir le résultat souhaité.
Il s'avère qu'une cellule a bien la même hauteur que les autres cellules de la ligne de la table à laquelle elle appartient, mais que la hauteur de cette cellule n'est pas connue dans le DOM.

Je crains que ce genre de problème ne soit pas soluble par CSS, ce que je trouve dommage.

Toute idée lumineuse sera la bienvenue.
Modifié par PapyJP (11 Oct 2016 - 09:42)

@gcyrillus
Merci pour ta réponse.
Tu me confirmes qu'il n'y a effectivement pas d'alternative au js pour calculer la hauteur max des diapos dans une ligne, c'était ce point pour lequel j'essayais de trouver une solution CSS.
Ce qui est ennuyeux avec le js, c'est qu'on est obligé de lancer un script pour recalculer la hauteur de la ligne à chaque changement de taille de l'écran. Sur un écran d'ordinateur les resize sont assez rares, mais tourner une tablette en horizontal/vertical est une opération fréquente (et pas toujours volontaire). Mais bon! j'ai déjà un script de ce genre pour recalculer les coordonnées des zones des images avec usemap, ça n'aura pas un impact aussi grave que je craignais.

Bonjour.

Dans la feuille de style CSS, à la ligne 293, .docPage section figure a pour text-align: center;

Cependant, si on le met à 'justify', ça met uniquement les diapos à gauche...

En effet, 'justify', c'est pour les paragraphes et la dernière ligne est, par défaut, à gauche et là, il n'y a qu'une ligne...

Même en utilisant '-moz-text-align-last: justify', le résultat n'est pas terrible...

Je vous suggère une autre méthode et... un peu plus simple (flexbox ?).