Incidence d'une image dans un tableau à corriger par CSS

Version imprimable

Bonjour,
Un problème que je traite depuis 15 jours, sans trouver de solution !
Le mieux est de copier coller mon html (j'ais mis mon CSS dedans.) et testez chez vous !

Le problème vient des nouveaux navigateurs,qui ajoutent des codes dans nos pages ... bref,
Un simple tableau en HTML5,
1) testez le avec une image d'environ 1700*1300 un énorme espace se trouve dans le premier TD ? pourquoi ? et comment y remédier (l'image est bien en 330*250)
2) testez avec une petite image, 200*200 cela va mieux, mais toujour cet espace incroyable
3) le même test avec un DOCTYPE Transitional donne le même défaut :(
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html lang="fr"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <meta http-equiv="content-language" content="fr, en"> </head><body> <style> table.lecentre { margin-left:auto; margin-right:auto; width:90%; } </style> <table class='lecentre' > <tr><td rowspan=2><img width=30% src='smala/alice.jpg' /></td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td colspan=5>concurrente 1 Alice xxxx 16 ans</td></tr> <tr><td rowspan=2><img width=30% src='smala/anthony.jpg' /></td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td colspan=5> concurrent 2 Anthony xxx 11 ans 1/2</td></tr> <tr><td rowspan=2><img width=30% src='smala/claire.jpg' /></td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td colspan=5>concurrente 3 Claire xxxx 42 ans</td></tr> </table> <br /></body></html>
Voila j' espère avoir été complète dans mon explication,
Merci d'avance.

06/09/2014, 15h03
NoSmoking

Bonjour,
c'est un peu se que tu demandes, <img width=30% ..., le 30% est par rapport au conteneur soit la TD, donc l'a TABLE s'ajuste.

Merci de ta réponse.
J'aimerais tout de même que tu testes pour comprendre le vrais problème,
Alors pour arrêter toute discutions sur les width ;) je te propose de tester vraiment (ça te prendra 30 secondes)
CE CODE EPURE

Code:

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
27
28
 
<!DOCTYPE html>
<html lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="content-language" content="fr, en">
</head><body>
<style>
table.lecentre {
margin-left:auto;
margin-right:auto;
width:90%;
border:1px solid black;
}
td {border:1px solid black;}
th, {border:1px solid black;}
</style>
<TABLE class='lecentre'>
<TR><TH> . </TH><TH>T 1</TH><TH>T 2</TH><TH>T 3</TH><TH>T 4</TH><TH> Total </TH></TR>
<TR><TD ROWSPAN=2><img src='forum/oliband1.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 1 Alice xxxx 16 ans</TD></TR>
<TR><TD ROWSPAN=2><img  src='forum/oliband1.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5> concurrent 2 Anthony xxx 11 ans 1/2</TD></TR>
<TR><TD ROWSPAN=2><img src='forum/oliband1.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 3 Claire xxxx 42 ans</TD></TR>
</TABLE>
<br /></body></html>

06/09/2014, 16h45
s0h3ck

Bonjour,

Avez-vous passer la validation avec ce code (du premier post)? :aie:

L'attribut alt est manquant.
La balise title est manquante.

Mes yeux piquent :calim2:

Le contenu des métadonnées style dans body ?
L'élément meta pour spécifier la langue par défaut au niveau du document est obsolète.

Oh non! :pleure:

Voici le lien de la validation (pour obtenir un code beaucoup plus propre)!
06/09/2014, 16h53
NoSmoking

Citation:

Envoyé par christele_r

Alors pour arrêter toute discutions sur les width ;)

et bien non justement, supprime la width:90% de la TABLE et observe le résultat.

La mise en oeuvre des TABLEs a ses contraintes ;)
06/09/2014, 16h56
Invité

Bonjour,
Visitez mes 50 sites, ou mes cours ici, vous verrez que je sais être clean, alors sachez que pour tester un problème un simple

Code:

<html><body>xxxx</body></html>

suffisent !
Comprenez que pour avoir un code minimal mettant en évidence un problème, c'est ceci la bonne méthode, vous le savez bien !

Par contre si vous avez une idée de ce problème, vous allez intéresser beaucoup de monde, car de grosses pointure du code comme je l'ais expliqué,
se penchent sur ce phénomène depuis plus de 15 jours !

espérant votre aide , merci d'avance.
06/09/2014, 17h10
s0h3ck

Tout d'abord, les règles de clarté et de code valide s'appliquent à tout le monde que vous soyez expert ou débutant. Merci de les respecter.

Citation:

Envoyé par christele_r

Visitez mes 50 sites, ou mes cours ici, vous verrez que je sais être clean, alors sachez que pour tester un problème un simple

Code:

<html><body>xxxx</body></html>

suffisent !

Ensuite, je n'ai jamais parlé de ce bout de code. Que vous indiqué xxx ou test, c'est sensiblement le même principe. Je parlais bien de la validité du code. Si vous partagez un code valide et bien indenté, espacé et tout, ça me donne envie de le résoudre (et probablement pour la majorité des membres).

Citation:

Envoyé par christele_r

c'est ceci la bonne méthode, vous le savez bien !

Il n'y a jamais qu'une seule et unique méthode. Restons ouverts d'esprit et zen.

Merci de votre collaboration.
06/09/2014, 17h10
Invité

Citation:

Envoyé par NoSmoking

et bien non justement, supprime la width:90% de la TABLE et observe le résultat.

La mise en oeuvre des TABLEs a ses contraintes ;)

Whaou voila un énorme progrès, ;) BRAVO l'Ami
Alors donc comment intégrer cela pour rester "Responsive Web Design" car me voici avec un élément incontrôlable :(

Je crois que la seule solution est l'abandon de la table qu'en penses-tu ?

Citation:

...car de grosses pointure du code comme je l'ais expliqué,...

je ne sais pas trop où me placer avec mon 42 pied gauche et 42.5 pied droit :mouarf:!

Citation:

Je crois que la seule solution est l'abandon de la table qu'en penses-tu ?

tout va dépendre des données que tu as à manipuler et surtout le résultat du "responsive" que tu souhaites, cela peut passer par un changement de présentaion et dans ce cas peut être que l'utilisation de display:table pourrait t'aider.

Dans ton cas une astuce consiste à forcer une TD à 100% et par exemple celle ayant un COLSPAN="5"

Exemple pour test

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
table.lecentre {
  margin-left:auto;
  margin-right:auto;
  width:90%;
}
td.image {
  background:#EEF;
  max-width:200px;
  min-width:200px;
}
td img{
  width:100%;
}
td.expand{
  width:100%;
}
</style>
</head>
<body>
<table class="lecentre" border>
    <tr>
        <td class="image" rowspan="2">
            <img src="http://club.developpez.com/webdesign/Developpez.com/Bannieres/bigbanner-dev-site-n6.gif" alt="">
        </td>
        <td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td>
    </tr>
    <tr>
        <td colspan="5" class="expand">
             concurrent 2 Anthony xxx 11 ans 1/2
        </td>
    </tr>
    <tr>
        <td class="image" rowspan="2">
            <img src="http://club.developpez.com/webdesign/Developpez.com/Bannieres/bigbanner-dev-site-n6.gif" alt="">
        </td>
        <td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td>
    </tr>
    <tr>
        <td colspan="5" class="expand">
             concurrent 2 Anthony xxx 11 ans 1/2
        </td>
    </tr>
    <tr>
        <td class="image" rowspan="2">
            <img src="http://club.developpez.com/webdesign/Developpez.com/Bannieres/bigbanner-dev-site-n6.gif" alt="">
        </td>
        <td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td>
    </tr>
    <tr>
        <td colspan="5" class="expand">
             concurrent 2 Anthony xxx 11 ans 1/2
        </td>
    </tr>
</table>
</body>
</html>

06/09/2014, 20h23
Invité

Citation:

Envoyé par NoSmoking

je ne sais pas trop où me placer avec mon 42 pied gauche et 42.5 pied droit :mouarf:!

Oh toi je te connais depuis des années !! c'est du 45 jeune-homme non je disait ça uniquement parce que j'avais l'avis d'un développeur de Firefox !
La preuve que toi c'est toi la pointure, le test est TOP coté "Responsive Web Design" je viens de tester !!!
Encore bravo et mille mercis !
07/09/2014, 16h45
NoSmoking
Il ne faut pas perdre de vue que le rendu d'une TABLE est une opération délicate/lourde pour les navigateurs et donc aucune garantie que l'astuce fournie perdure.

Il existe une autre façon d'approcher la chose, via la propriété, CSS3, flex, on en a parlé dans cette discussion.

Cela serait à adapter pour passer en mode horizontal^(*), je remets l’article qui en parle bien Redécouvrez la mise en page avec Flexbox.

^(*) il suffit de mettre
Code:

1 2 3 4 .conteneur_flex { display:flex; flex-direction:row; }
07/09/2014, 17h34
Invité

Je suis bluffée pour tout mais en particulier ton http://nosmoking.developpez.com/demos/css/flex_box.html
et view-source:http://nosmoking.developpez.com/demo...esize_div.html
des vrais bijoux qui rentrent directement dans ma boîte à outil !
merci encore ;)