Mes tableaux se décalent complètement avec les figcaptions
Fermélamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 18 févr. 2023 à 13:38
- Le fichier contient un tableau présentant un extrait des livres les plus prêtés à paris en 2016
- Comment ouvrir un fichier epub ? - Guide
- Comment réduire la taille d'un fichier - Guide
- Tableau croisé dynamique - Guide
- Fichier rar - Guide
- Ouvrir un fichier .bin - Guide
5 réponses
17 févr. 2023 à 16:15
Bonjour,
Des captures écran Avec et Sans les figcaption pourraient aider à comprendre ton souci
17 févr. 2023 à 16:26
Ci-joint deux captures, une calée et l'autre... :/ (merci jordane45)
17 févr. 2023 à 17:20
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 ?
17 févr. 2023 à 17:28
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 ;)
17 févr. 2023 à 17:39
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 !
17 févr. 2023 à 17:48
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 ;)
17 févr. 2023 à 18:04
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 ?
Modifié le 17 févr. 2023 à 19:42
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 ;)
17 févr. 2023 à 19:44
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 question18 févr. 2023 à 13:38
Bonjour jordane45,
J'ai mis l'exemple en ligne :
https://lecomptearebours.fr/tab/tab.html
Bon week-end,
LM