marge et figcaption

Bonjour,

je n’arrive pas à mettre une marge (ou padding) right sans que celle-ci soit recouverte par la figcaption. La figcaption n’est plus à 100% de l’image mais déborde de la valeur de la marge.

.jeune {width:200px; position: relative; float: left; margin-right: 20px;}
figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
	float: left;
}
figcaption {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -100%;
	cursor: pointer;
	-moz-transition: all .6s;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
	text-align: center;
	vertical-align: text-bottom;
	color: #fff;
	background-color: rgba(0,51,0,0.6);
	padding-top: 40px;
	font-family: "OpenSans Regular";
}
figure:hover figcaption {
	bottom: 0;
}

Autre petit souci toujours pour la figcaption, elle déborde aussi en bas d’environ 10px :/

Le HTML

<figure><img src="./img/jeune.jpg"  class="jeune" alt="Nicolas_jeune" >  <figcaption class="legende">chaud cacao</figcaption></figure>

Je profite de ce topic pour poser une question sur le width de .jeune : impossible de mettre un width en %, la photo ne se met plus en début de texte sur X lignes de haut :/

Merci à vous et bonne journée.

Salut

Je note qu’avec ce que tu nous montres, tu définis une taille pour l’image, mais pas à la légende.

Pourquoi ne pas fixer la taille de <figure> et avoir les deux contenus <img /> et <figcaption> qui fassent les 100% ?

Bonjour Ymox,

Merci pour ta réponse

Si je mets une <figure> à 100%, cela prend toute la largeur de la div parente Idem pour l’image.

Mais sans le margin ou le padding, la figcaption à width 100% de l’image à 200px ne dépasse plus en largeur

Le souci n’est pas seulement la largeur de la figcaption, mais aussi l’image non responsive

Merci encore et bonne soirée

Je ne pensais pas mettre <figure> à 100%, mais à une largeur que tu souhaites (200 pixels ?). Ensuite, tu fais en sorte que les deux éléments contenus prennent 100% de large, ou calc(100% - 20px).

La situation de départ est effectivement avec la légende qui déborde à droite de l’image, voir ce fiddle.

En déplaçant simplement la classe jeune sur <figure> et en ajoutant box-sizing: border-box que j’avais oublié, on obtient quelque chose qui pourrait être plus près de ce que tu cherches. Note que j’y ai enlevé overflow: hidden afin que tu puisses te rendre compte qu’il n’y a pas de trucage. Avec overflow: hidden sur <figure>, le décalage que je vois entre le bas de l’image et celui de la légende ne devrait pas être visible. Je n’ai pas vraiment d’autre solution à proposer pour ce dernier point.

Mais peut-être que je n’ai pas du tout compris ce que tu cherchais à avoir : où souhaites-tu mettre une marge ou un rembourrage et que tu n’as pas le résultat escompté ?

Bonjour Ymox,

Merci pour tes fiddle, c’est super sympa Oui, le second est parfait, mais, peut-on donner une largeur en % afin qu’elle soit responsive et que la classe puisse être utilisée sur plusieurs photos de largeur différente ?

Merci encore et bonne journée

Quelque chose comme ça ? Il suffit de préciser que l’image doit être à 100% de largeur aussi. Attention à son ratio, peut-être qu’il faudra jouer différemment sur les largeur et hauteur pour qu’elles n’apparaissent pas étirées/compressées, notamment si tu souhaites conserver une hauteur de ligne constante.

Super, je ne comprends pas, j’avais bien évidemment essayé le %

Mais l’overflow hidden n’est pas "actif" (et j’ai toujours la figcaption qui déborde

Au cas où :

.jeune {
  width: 20%;
  position: relative;
  float: left;
  margin-right: 20px;
}
figure {
  position: relative;
  display: inline-block;
  float: left;

}
figcaption {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -100%;
  cursor: pointer;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
  text-align: center;
  vertical-align: text-bottom;
  color: #fff;
  background-color: rgba(0, 51, 0, 0.6);
  padding-top: 40px;
  font-family: "OpenSans Regular";
  box-sizing: border-box;
	overflow: hidden;
}
figure:hover figcaption {
  bottom: 0;
}

Encore merci

Tu as bien déplacé la classe .jeune sur <figure>, comme dans le fiddle ?

Si jamais, il semble que tu puisses reprendre le fiddle et enregistrer, cela crééra une nouvelle version qu’on pourra réutiliser.

Super !!! Merci !

https://codepen.io/herde2/pen/raNvzwz

C’est voulu que overflow: hidden soit mis sur <figcaption> plutôt que sur <figure> ?

Y a-t’il un souci encore avec ce que tu as fourni sur CodePen ci-dessus ?

Oooops Le hidden est bien placé maintenant. Mais ça déborde toujours (comme en bas dans le codepen) mais on n’est pas loin

Attention, j’avais bien spécifié une largeur d’image.

Seulement, si par la suite tu souhaites avoir une hauteur "constante" sur toute une ligne de plusieurs images

• dont certaines sont plus larges que hautes et d’autres plus hautes que larges
• et où il faut que le <figcaption> ait les mêmes dimensions que l’image, pas plus large

alors il faudra sauf erreur un conteneur supplémentaire qui lui aura les largeur et hauteur maximales voulues, et <figure> aura des largeur et hauteur maximales de 100%.

A noter aussi que box-sizing: border-box fait en sorte qu’une largeur comprenne les rembourrages (padding) et bordures, mais pas les marges, donc peut-être que tu devras remplacer margin(-*) par padding(-*) à certains endroits, ou ajouter un rembourrage sur le parent d’un élément où tu pensais mettre une marge.

Tu peux voir un exemple ici (tiens, il ne créé plus de version ?!)

Super Ymox

mais je ne comprends pas le padding négatif. J’ai tenté mais cela ne change rien, ça déborde toujours en bas, mais sinon tout est nickel. Merci !!!

Bonne soirée