[Résolu] Ajouter une autre ligne à mon tableau css ?

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 =

<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 =

.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

Bonjour,

Tout d'abord, il faut rajouter une légende pour chaque image dans le html (par exemple dans un span qui suit l'image) :

  <div class="tableau">

  <p>     
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  </p>

  <p>     
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
   </p>

  <p>     
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  <span><img alt="" height="150" src="img/01.jpg" width="100"><span>X</span></span>
  </p>
  
  </div>

Pour le css, on passe les span en display:inline-block (ce qui permet de leur donner des dimensions). On positionne les span entourant les images à position:relative, et les span qui suivent les images à position:absolute (pour les sortir du flux et pouvoir les positionner sous les images). On rajoute ce qu'il faut pour que la position du span de légende vienne en dessous de l'image correspondante (avec un left:0 et bottom:0). Enfin, on ajoute un padding sous l'image pour garder la place nécessaire à la légende.

.tableau p
{
margin: 20px;
padding-top:20px;
padding-bottom:20px;
padding-right:100px
padding-left:100px;
text-align :center;
}
.tableau>p>span
{
position:relative;
display:inline-block;
margin: 20px;
padding-top:20px;
padding-bottom:20px;
padding-right:100px
padding-left:100px;
text-align :center;
padding-bottom:1em;
}
.tableau>p>span>span
{
position:absolute;
display:inline-block;
width:100%;
bottom:0;
left:0;
}

Amicalement,

Tiens ! J'ai vu ce même sujet posté sur Developpez.net...

@Etan ou @Etanm - quelque soit le pseudo utilisé pour cette unique question - vous pourriez au moins donner un retour à ceux qui vous consacrent du temps...
Modifié par Olivier C (08 Dec 2015 - 22:33)

OK. Bonne soirée à vous aussi.