Mes tableaux se décalent complètement avec les figcaptions

lamontange -

Bonjour,

Je suis actuellement sur deux tableaux impeccables, mais en rajoutant les figcaptions, tout se décale en haut, en bas, marges énormes. Bref, un vrai bo***el :

Je vous laisse mon HTML au cas où, merci beaucoup ;)

<table width="100%" border="0" cellspacing="10" cellpadding="0">
  <tbody>
    <tr> 
      <th scope="col"> <figure><img src="./images/who.jpeg" width="100%" height="100%" alt="" class="responsive"><figcaption>An elephant at sunset</figcaption></figure></th>    
       <th rowspan="2" scope="col"> <figure><img src="./images/janis.jpeg"width="100%" height="100%" alt=""> <figcaption>An elephant at sunset</figcaption></figure>
    </th>
    <tr>  <figure>
      <th scope="col"> <figure><img src="./images/beatles.jpeg" width="100%" height="100%" alt="" class="responsive"><figcaption>An elephant at sunset</figcaption></figure></th>    
    </tr>
  </tbody>
</table>


SECOND TABLREAU :

							             <table width="100%" height="100%" border="0" cellspacing="10" cellpadding="0">

  <tbody>

    <tr>

      <td rowspan="2" width="50%"><figure><img src="./images/shoes.jpg" width="100%" height="100%" alt="" class="responsive">    <figcaption>An elephant at sunset</figcaption></figure></td>

      <td valign= "top"><figure><img src="./images/miroirock.jpg" width="100%" height="100%" alt="" class="responsive">    <figcaption>An elephant at sunset</figcaption></figure></td>

    </tr>

    <tr>

      <td valign="bottom"><figure><img src="./images/fumette.jpg" width="100%" height="100%" alt="" class="responsive">    <figcaption>An elephant at sunset</figcaption></figure></td>

    </tr>

  </tbody>

</table>

Macintosh / Chrome 110.0.0.0

Afficher la suite

5 réponses

Réponse 1 / 5
jordane45 Modérateur
Bonjour,

Des captures écran Avec et Sans les figcaption pourraient aider à comprendre ton souci
1
Réponse 2 / 5
lamontange Auteur
Ci-joint deux captures, une calée et l'autre... :/ (merci jordane45)
0
1. jordane45 Modérateur
  
  Tu n'aurais pas du CSS avec ton site ?
  
  Le positionnement ne serait-il pas géré via le css .... et tes selecteurs ont-ils été modifiés pour prendre en compte l'ajout des figcaption ?
  
  0

lamontange Auteur

Non, rien de changé dans les CSS que voici :

figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
  		margin: 0.;




}

figcaption {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 5px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  color: white;
  background-color : rgba(0,0,0,0.5);
padding-top: 20%;		font-family: 'ralewayblack', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
  opacity: 0;
  transition: opacity 1s ease;
	font-size:0.9em;
	line-height:1.1em;
	  			padding-left: 0.5em;
				padding-right: 0.5em;
	
}
figure:hover figcaption {
  opacity: 1;

}

et le HTML sans figcaption (tableau correct donc) :

							             <table width="100%" height="100%" border="0" cellpadding="10">

  <tbody>

    <tr>

      <td rowspan="2" width="50%"><img src="./images/shoes.jpg" class="responsive" width="100%" height="100%" alt="" ></td>

      <td valign= "top"><img src="./images/miroirock.jpg" width="100%" height="100%" alt="" class="responsive"></td>

    </tr>

    <tr>

      <td valign="bottom"><img src="./images/fumette.jpg" width="100%" height="100%" alt="" class="responsive"></td>

    </tr>

  </tbody>

</table>

							
							
                <table width="100%" height="100%" border="0" cellpadding="5">

  <tbody>

    <tr>
	  <figure><img src="./images/Brighton.jpg" width="100%" height="100%" alt="" class="responsive">    <figcaption>An elephant at sunset</figcaption></figure></td>
    </tr>
    <tr>

	  <figure><img src="./images/modsflic.jpg" width="100%" height="100%" alt="" class="responsive">    <figcaption>An elephant at sunset</figcaption></figure></td>
    </tr>

    <tr>

	  <figure><img src="./images/rockflic.jpg" width="100%" height="100%" alt="" class="responsive">    <figcaption>An elephant at sunset</figcaption></figure></td>

    </tr>

  </tbody>


<table width="100%" border="0" cellspacing="10" cellpadding="0">
  <tbody>
    <tr>
      <th scope="col"><img src="./images/who.jpeg" width="100%" height="100%" alt=""/></th>
      <th rowspan="2" scope="col"><img src="./images/janis.jpeg"width="100%" height="100%" alt=""/></th>
    </tr>
    <tr>
      <th scope="col"><img src="./images/beatles.jpeg" width="100%" height="100%" alt=""/></th>
    </tr>
  </tbody>
</table>

Merci jordane45 ;)

jordane45 Modérateur
Soit tu as d'autres CSS .. soit celui que tu nous montres n'est pas complet.

Et puis, as tu essayé de modifier le css des figcaption que tu nous montres pour voir comment positionner tes éléments comme tu le souhaites ?

A noter que tu devras vider le cache de ton navigateur après chaque modification pour être sûr qu'elles sont prises en compte !
0
lamontange Auteur
@jordane45
Non, tu as toutes les CSS :/

Oui, j'ai du tricher car les figcaptions débordaient pour une raison inconnue (je sais, il y a toujours une raison :D

Merci et bonne soirée ;)
0
jordane45 Modérateur
@lamontange
Si on a tous les css, à quoi sert ta class responsive que tu as utilisé sur tes images ?

Pourquoi manque t'il également un </table> dans ton code ?

Pourquoi dans un cas tu as deux tableaux et dans l'autre, trois ?
0

Réponse 4 / 5
lamontange Auteur
Oui... pardon :(((((((

J'arrive pas à valider mon code (PJ)

3 tableaux, encore désolé. Il y en a un qui ne présente aucun problème. Celui avec une colonne. Les autres sont sur 2 colonnes (3 cellules). Ce sont eux qui posent problème.. Pardon pardon... et merci ;)
0
1. lamontange Auteur
  
  je regarde pour le </table>. Mais je ne pense pas pas que ce soit le souci (je suis dessus depuis plusieurs jours... un mauvais copier>coller aujourd'hui, au boulot ?).
  
  Je serai plus concentré ce week-end :D
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 5
lamontange Auteur
Bonjour jordane45,

J'ai mis l'exemple en ligne :

https://lecomptearebours.fr/tab/tab.html

Bon week-end,

LM
0

Mes tableaux se décalent complètement avec les figcaptions

5 réponses

Discussions similaires

Newsletters