Stylage d'une <figure>

Question

PapyJP

15 Dec 2016 à 16:38

Bonjour à tous

Certaines pages du site sur lequel je travaille contiennent des structures de ce genre:

<figure class="tile">
    <img src="...">
   <figcaption>
      <h3>Titre</h3>
      <p>Texte</p>
</figure>

Je n'arrive pas à définir correctement le CSS pour avoir côte à côte l'image et l <figcaption> sans artifice du genre ajouter une balise autour de <img>
Pour le moment ce que j'ai fait est à peu près satisfaisant, mais si le contenu de <figcaption> et trop long par rapport à l'image, le texte déborde au dessous de l'image, ce que je préfèrerais éviter.
Voici un exemple de ce que cela donne:
http://tests.osirisnet.net/migration/tools/tiles.jpg

Voici le code généré par mes outils:

figure id="senemiah127" class="tile" onclick="document.location = "/tombes/nobles/senemiah127/senemiah127.htm"">
    <img src="/tombes/nobles/senemiah127/photo/senemiah127_titre.jpg" alt="">
    <figcaption>
      <h3>Senemiah<br>puis Piay et Pairy - TT 127</h3>
      <p>TT 127 comporte une décoration en relief levé remarquable. Aménagée pour Senemiah sous Hatchepsout-Thoutmosis III, elle sera réutilisée à l'époque ramesside par Piay et Pairy</p>
    </figcaption>
</figure>

Le CSS résulte d'une longue cascade de déclarations, dont il résulte ceci:


figure{
	overflow: auto;
    text-align: justify;
	display: inline-table;
    margin: 0.25em 0;
    padding: 2px 0.25em;
    vertical-align: middle;
	width: 100%;
	border: 1px solid #990000;
    border-radius: 0.5em;
}
img {
	display: inline;
    float: left;
    margin-right: 1em;
    max-width: 40%;
	vertical-align: middle;
	border-radius: 0.5em;
}
figcaption{
	display: inline;
    margin-right: 0.25em;
    padding-left: 0;
	width: 75%;
	vertical-align: middle;
	text-align: center;
}
h3{
	color: black;
    display: block;
    margin: 0 0 0.125em;
    text-transform: none;
	font-size: 0.9em;
	text-align: center;
    width: 100%;
	font-weight: bold;
}
p{
	line-height: 0.7;
	display: inline;
    font-size: 1em;
    margin-left: 0;
	padding: 0;
}

La page en question est à l'adresse http://tests.osirisnet.net/tombes/nobles/nobles.html
mais jene garantis pas que les modifications que je fais subir au contexte n'auraon pas d'effets sur cette page.

Merci de vos avis sur ce point certes secondaire, mais j'aimerais comprendre par quel bout adresser ce problème.

Olivier C

15 Dec 2016 à 17:15

J'y suis arrivé sur la page en ligne, mais j'ai tellement supprimé de règles que je ne sais plus trop ce qui restait au final. Surtout qu'entre temps tu as modifié ton code. J'ai notamment totalement supprimé du code tel que celui-ci :

.description figure img {
    /* display: inline; */
    /* margin-right: 0.5em; */
    /* float: left; */
    /* max-width: 40%; */
    /* vertical-align: middle; */
}

En fait j'ai supprimé toutes les règles display et float qui venaient contrarier les éléments placés de base en display table, il ne suffisait plus ensuite qu'à réévaluer le max-width présent sur la balise img.

Résultat :
upload/35007-test.jpg

Modifié par Olivier C (15 Dec 2016 - 17:20)

PapyJP

15 Dec 2016 à 19:53

Merci Olivier
Je me doutais bien que c'était une histoire de règles qui f... la m.., mais je n'étais tout simplement pas parvenu à trouver quelles devaient être les bonnes règles pour obtenir le résultat souhaité.
Je vais m'y replonger demain sur la base de ce que tu as fait.

Felipe

Administrateur

16 Dec 2016 à 21:29

Bonjour,

le Contexte de Formatage Block permet qu'un élément "ne s’écoule pas autour des flottants" (j'appelle ça "créer une colonne" mais je suis approximatif Smiley smile

)
Les 4 articles listés en bas de l'article sont également intéressants pour aller plus loin.

Par contre s'il y a un besoin d'alignement vertical (et qu'IE9 et autres antiquités ne sont plus à l'ordre du jour) alors Flexbox est chaudement recommandé.

Sujet clos

CSS et mise en forme, CSS3

Stylage d'une <figure>