Discussion :

[Etanm]

Bonjour,

J'aimerais ajouter une légende sous mes images (dans mes tableaux ci-dessous).

J'ai du mal à gérer les tailles de tableaux en css.

Comment pourrai-je ajouter 3 lignes sous les 3 colonnes (afin d'y ajouter une légende/description) ?

Voici une représentation de ce je voudrais : http://s15.postimg.org/tjn9w79mz/representation.jpg

- Mon fichier html =

Code :

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
<link href="css.css" rel="stylesheet">
 
  <div class="tableau">
 
  <p>     
  <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  </p>
 
  <p>     
  <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  </p>
 
  <p>     
  <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  </p>
 
  </div>

- Mon fichier css.css =

Code :

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
.tableau span {
margin: 20px;
padding-top:20px;
padding-bottom:20px;
padding-right:100px
padding-left:100px;
text-align :center;
}
 
.tableau p {
margin: 20px;
padding-top:20px;
padding-bottom:20px;
padding-right:100px
padding-left:100px;
text-align :center;
}

Merci d'avance pour votre aide .

A

[NoSmoking]

Bonjour,
regarde du coté de HTML5, des balises figure et figcaption.

Code html :

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

1
2
3
4
<figure>
  <img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif" alt="NoSmoking sur DVP">
  <figcaption>NoSmoking</figcaption>
</figure

Introduction à HTML5.