28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS figcaption sur deux colonnes

Bonjour

Je galère à mettre une légende sur des images (dessus, en bas, centrée, bandeau pleine largeur) sur deux colonnes.

Voici le CSS :

.deuxcol {width: 49.7%}
@media screen and (max-width:767px){ .deuxcol {width: 100%} }

figure { position: relative; display: inline; margin:0; padding:0; }
figure img { z-index: 0; }
figure figcaption {
position: absolute;
z-index: 1;
background-color: #676767;
background-color: hsla(0, 0%, 60%, 0.50);
text-shadow: 1px 1px 1px #000000;
text-align: center;
width: 49vw; align:center;
caption-side: bottom;
bottom: 4px;
padding: 5px;
}

Voir image jointe.
Le 1er caption est sur l'image précédente (censée être sans légende) !
Je ne sais pas pourquoi.
upload/1616082294-58230-capturedaeacran2021-03-18aa16.jpg (Puis ils se superposent sur l'image de gauche.)
La classe .deuxcol s'applique sur img (le résultat est aussi pourri si je l'applique sur figure ou sur figcaption).

Qu'est-ce que j'ai mal fait ?
Merci pour votre aide.
Bonjour,
sinon, en dehors de figcaption, il y a une autre solution que j'ai appliquée sur des images (sur la première image d'un slider en réalité). Je crée une div juste après la déclaration de l'image, et je lui ajoute une class "legende" :
<div class="picture">
            <div class="galerie">
<img src="Images/Automne-placeholder.jpg" alt="Image placeholder" data-src="Images/Automne-480-N.jpg" width="480" height="365" alt="Arbres d'automne"><div class="legende">Partition &#x2794;</div>

.......... et les autres images sans texte, ou avec si on veut.

Les images sont en lazy load, ce qui explique le code plus complet (image paceholder, data-src.) J'ai même ajouté une flèche &#x2794; afin de signaler les autres images, c'est une option. Il y a aussi le css qui va avec et qui colle une opacity de .4 avec rgba, afin de ne pas créer un bandeau trop voyant par dessus l'image. Ce css permet aussi de faire apparaître la légende au survol, mais c'est aussi une option. Si tu veux le css. Ah oui, ce sont des div imbriquées, mais enfin...
Je suis passé à ça :

CSS :

.deuxcol {width: 49.7%}
@media screen and (max-width:767px){ .deuxcol {width: 100%} }

.fig { position: relative; display: inline; margin: 0; padding: 0;}
.caption {
position: absolute;
z-index: 1;
background-color: #676767;
background-color: hsla(0, 0%, 60%, 0.50);
text-shadow: 1px 1px 1px #000000;
text-align: center;
width: 49vw;
bottom: 4px;
padding: 5px;
}

HTML:

<div class="fig">
<img src="compact.jpg" alt="chauffe eau compact"
class="deuxcol" loading="lazy" sizes="(max-width: 767px) 100vw , 49.7vw"
srcset="compact-320.jpg 320w, compact.jpg 640w">
<span class="caption">Chauffe-eau compact</span>
<img src="horizontal.jpg" alt="chauffe eau horizontal"
class="deuxcol" loading="lazy" sizes="(max-width: 767px) 100vw , 49.7vw"
srcset="horizontal-320.jpg 320w, horizontal.jpg 640w">
<span class="caption">Chauffe-eau horizontal</span></div>
<div class="fig">
<img src="sur_socle_ou_stable.jpg" alt="chauffe eau sur socle ou stable"
class="deuxcol" loading="lazy" sizes="(max-width: 767px) 100vw , 49.7vw"
srcset="sur_socle_ou_stable-320.jpg 320w, sur_socle_ou_stable.jpg 640w">
<span class="caption">Chauffe-eau sur socle ou stable</span>
<img src="vertical_mural.jpg" alt="chauffe eau vertical mural"
class="deuxcol" loading="lazy" sizes="(max-width: 767px) 100vw , 49.7vw"
srcset="vertical_mural-320.jpg 320w, vertical_mural.jpg 640w">
<span class="caption">Chauffe-eau vertical mural</span></div>

et je me retrouve bien avec deux colonnes de légendes mais décalées à l'image du dessus et vers la droite :
upload/1616147520-58230-capturedaeacran2021-03-19aa10.jpg
Modérateur
Bonjour,

Il y a la possibilité de se servir de grid à la place du positionnement en absolute , ce qui simplifie le css et sa lecture.

exemple sur une struture HTML de base :
<figure>
  <img>
  <figcaption>Caption</figcaption>
</figure>

et le placement en grid :
figure {
  display: grid;
 }
figure img {
  width: 100%;
  grid-column: 1;
  grid-row: 1 / span 2;
}
figure figcaption {
  grid-column: 1;
  grid-row: 2;
}

Il n'est pas nécessaire de déclarer grid-template-rows ou grid-template-columns, le placement des enfants suffit a créer colonne et lignes necessaires.

voici un exemple : https://codepen.io/gc-nomade/pen/yLVdRGV

Cdt
Modifié par gcyrillus (19 Mar 2021 - 11:32)
Grid, certainement une meilleurs solution que la mienne. Je lui donne quand même mon css, s'il veut expérimenter.
css concernant les légendes, seulement :
.legende {
      position:absolute;
      width:100%;
      bottom:0;
      padding:2px;
      font-size:.4em;
      text-align:center;
      background-color: rgba(200, 200, 200, 0.4);}     
.legende:hover {
	transition:all 1.8s;}      
.galerie:hover .legende {
      opacity:1;}


Je n'ai pas mis la partie "picture", elle est là chez moi pour caler du texte à côté du slider. On peut enlever la partie paceholder et data-src si on utilises pas le lazi load. Je n'ai pas mis non plus la partie "galerie" pour le slider, on ne sais pas comment tu as arrangé ton html. Et tu peux continuer à utilser "hsla(0, 0%, 60%, 0.50)", plus puissant que rgba.
La seule différence fondamentale, c'est que mon code fonctionne Smiley cligne
Maintenant, si tu veux tenter avec flexbox, grid ou un autre code, il n'y a aucun problème, j'avais juste proposé ça pour aider.
À la place de captures d'écrans, il serait préférable de donner un lien, ou un codepen. c'est toujours plus facile pour ceux qui veulent aider d'avoir le code tel qu'il est sur le site. Et aussi d'utiliser les balises de mise en page du forum. C'est beaucoup plus clair pour voir le code.
Bonne journée.
Modifié par Bongota (20 Mar 2021 - 10:56)
ReBonjour

Je vous livre (si ça peut servir un jour) ce qui a bien voulu finalement marcher pour moi :
	
	.figs { display: table; border-spacing: .2vw 0; }
	figure { position: relative; display: table-cell; }
	figure img { width: 49.7vw; }
	figcaption { 
		position: absolute; 
		bottom: 4px;
		z-index: 1;
		background-color: #676767;
		background-color: hsla(0, 0%, 60%, 0.50);
		text-shadow: 1px 1px 1px #000000;
		padding: 5px;
		width: 49vw;
		display: none;
		}
	figure:hover > figcaption { display: block; }
@media screen and (max-width:767px){
	.figs { display: inline; margin:0; padding:0; }
	figure { display: inline; margin:0; padding:0; }
	figure img { width: 100%; }
	figcaption { width: 100%; }
}

Merci à tous
Modifié par kerlutinoec (25 Mar 2021 - 14:24)
Sujet clos
Aller à