CSS problème retour ligne texte dans bloc position absolute [Résolu]

Signaler
Messages postés
182
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
7 novembre 2020
-
Messages postés
182
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
7 novembre 2020
-
Bonjour,

J'ai un petit soucis avec lequel je m'arrache les cheveux depuis quelques jours. J'ai une <figure> en position relative, le <figcaption> de cette figure est en position absolute, et dans ce figcaption j'ai un <h2>. Lorsque le titre dépasse la largeur de la figure celui-ci ne passe pas à la ligne et reste sur une seule ligne en se chevauchant... très moche. J'ai essayé toutes les modifications possibles sur le css de la figure, de la figcaption, et du titre (position, width, height...)... rien à faire.

<nav id="anchor_backTop">
			<a href="" title="">
				<figure>
					<img src="img/idea_1800x1800.jpg" alt="Un concept inédit qui est imaginé par l'entreprise <?php echo strip_tags($string_nameOfTheCompany); ?>." />
					<img src="img/bubble_1800x1800.png" alt="" />
					<img src="img/bubble_450x450.png" alt="" />
					<img src="img/bubble_300x300.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<figcaption>
						<h2>
							Un concept inédit
						</h2>
					</figcaption>
				</figure>
			</a>
</nav>


/* CSS spécifique à la navigation de la page. */
nav {
	/* GRID (display) */
	display: -ms-grid;
	display: grid;
	/* -------------- */
	/* GRID (définition des colonnes) */
	-ms-grid-columns: repeat(3, auto) 5% repeat(3, auto);
	grid-template-columns: repeat(3, auto) 5% repeat(3, auto);
	/* ------------------------------ */
	width: 90%;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
	font-family: Arial, Georgia, serif;
	font-size: x-large;
}

/* CSS spécifique au lien de la page "concept.php". */
nav > :first-child {
	/* GRID (positionnement sur les colonnes) */
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-column: 2/4;
	/* -------------------------------------- */
	/* GRID (positionnement sur les lignes) */
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	grid-row: 1/3;
	/* ------------------------------------ */
}

/* CSS spécifique aux figures des liens. */
nav figure { position: relative; }

/* CSS spécifique au figcaption. */
nav figure > :last-child {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	color: rgba(170, 0, 170, 1);
	opacity: 1;
	/* TRANSITION */
	-webkit-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
	/* ---------- */
}

/* CSS spécifique aux titres <h2>. */
nav h2 {
    margin: 0;
    font-size: 2.5em;
}




Configuration: Windows / Firefox 72.0

1 réponse

Messages postés
182
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
7 novembre 2020

Je marque en résolu. En fait j'avais un line-height à 0 qui écrasait tout.