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

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention - 18 févr. 2023 à 13:38

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

A voir également:

Le fichier contient un tableau présentant un extrait des livres les plus prêtés à paris en 2016
Comment réduire la taille d'un fichier - Guide
Comment ouvrir un fichier epub ? - Guide
Fichier bin - Guide
Tableau word - Guide
Le fichier contient un tableau présentant un extrait des livres les plus prêtés à paris en 2016. filtrez le tableau pour ne faire apparaître que les bandes dessinées ado. puis filtrez le tableau pour ne faire apparaître que celles dont l'auteur est zep. quel est le titre de la bande dessinée ado de zep qui a été la plus prêtée d'après ce tableau ? - Forum Loisirs / Divertissements

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Des captures écran Avec et Sans les figcaption pourraient aider à comprendre ton souci

Réponse 2 / 5

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

Ci-joint deux captures, une calée et l'autre... :/ (merci jordane45)

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 ?

Réponse 3 / 5

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 !

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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 ;)

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention

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 ?

Réponse 4 / 5

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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 ;)

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

Bonjour jordane45,

J'ai mis l'exemple en ligne :

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

Bon week-end,

Discussions similaires

Valedwaz : Colis Shein, l'enfer est-il fini ?

Auteur de bande dessinée à 16 ans ?

Bibliothèque

auteur d'un tableau

shein colis bloqué valedwaz

Votre réponse

Discussions similaires