Mettre une légende après 2 div d'images superposées

**coucou_** · 08/05/2019, 13h53

Bonjour,

Pour une galerie de petites annonces, je superpose 2 images (celle de l'objet à vendre et un gif transparent avec le mot VENDU).
J'obtiens bien la superposition avec le code ci-dessous mais comment faire pour que le texte en légende s'affiche en dessous des 2 images superposées ?

Merci de votre aide.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<DIV CLASS="objet">
 
<IMG SRC="objet-a-evndre.jpg"  style="position:absolute;" >
<IMG SRC="vendu.gif" style="position:absolute;"><BR>
 
<DIV style="position: relative;"><P>MON TEXTE </DIV>
</DIV

>

**ProgElecT** · 08/05/2019, 15h08

Salut

Il te manque une balise </p>, ainsi que > fermant la dernière balise <div.

Quand on utilise la propriété/directive position:relative, on donne au moins une valeur à top et/ou width, sinon la valeur relative n'a pas de raison d'être.
Le minimum, au vue de ton code proposé, serait donc de donner une valeur top égal à la hauteur de l'image la plus grande en hauteur.

**psychadelic** · 08/05/2019, 16h15

Il y a aussi l'utilisation des balises HTML5 qui donnent un sens sémantique => <figure> / <figcaption> , et rendent le HTML plus clair

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>vendu</title>
  <style>
    figure {
      position: relative;
    }
    figure img {
      width: 400px;
      height: 250px;
    }
    figure.vendu:before {
      position: absolute;
      content: url('vendu.png');
      top: 5px;
      left: 10px;
    }
  </style>
</head>
<body>
  <figure class="vendu">
    <img src="objetAvendre.jpg">
    <figcaption>texte texte texte</figcaption>
  </figure>
</body>
</html>

**NoSmoking** · 09/05/2019, 19h22

Bonjour,

Envoyé par ProgElecT

Il te manque une balise </p>

La balise de fin peut être omise dans certaines conditions

↪ https://html.spec.whatwg.org/multipa...#the-p-element

Envoyé par 4.4.1 The p element;[B

Tag omission in text/html:[/B]
A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.

Envoyé par ProgElecT

Quand on utilise la propriété/directive position:relative, on donne au moins une valeur à top et/ou width, sinon la valeur relative n'a pas de raison d'être.

Cela peut servir à créer un référent pour d'éventuels enfants positionnés par exemple en absolute.
Dans le cas présent cela permettrait de mettre l'image « vendu » en position:absolute si le conteneur est lui en position:relative.

Mettre une légende après 2 div d'images superposées

CSS

Discussions similaires

Partager

Partager