FIGCAPTION tronque mon texte ( tag element = <cite> )

**psychadelic** · 24/05/2020, 15h14

le simple fait d'avoir voulu placer le nom de l'auteur sur la droite l'a fait disparaître !

testé sur FireFox et Chromium.

le code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>sans Auteur</title>
  <style>
    figure#my-image {
      width: 506px;
      }
    figure#my-image > * {
      width: 100%;
      box-sizing: border-box;
      }
    figure#my-image img {
      border:  1px solid grey;
      padding: 2px;
      margin: 0;
      }
    figure#my-image figcaption {
      padding:  .3em;
      color:   white;
      background-color: rgba(0, 0, 0, 0.5);
      }
    q {
      display:    block;
      text-align: center;  
      }
    cite {
      margin-top: .4em;
      float: right;
      }
  </style>
</head>
<body>
  <figure id="my-image">
    <img src="https://picsum.photos/500/300" alt="quelque chose ici" />
    <figcaption>
      <q>Un peuple qui ne lit pas est un risque pour la démocratie</q>  
      <cite>Fréderic Paulin</cite>
    </figcaption>
  </figure>
</body>
</html>

**Candygirl** · 26/05/2020, 20h51

Hello,

Ton texte n'a pas disparu mais, comme il est blanc sur fond blanc, on ne le voit pas. Si tu fait un crlt + a (ou cmd + a sur mac) pour tout sélectionner sur ta page, tu pourras le visualiser.

Lui attribuer un float l'a fait sortir du flux et il n'est donc plus pris en compte par figcaption pour déterminer sa hauteur.

Si le but est de le mettre au-dessous, à droite, tu peux supprimer le float:right et le remplacer par exemple par:

Code css :

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

1
2
3
4
5
6
 
    cite {
      margin-top: .4em;
      display:block;
      text-align:right.
      }

FIGCAPTION tronque mon texte ( tag element = <cite> )

CSS

Vue hybride

Discussions similaires

Partager

Partager