IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

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


Sujet :

Tableau en CSS

  1. #1
    Invité
    Invité(e)
    Par défaut Incidence d'une image dans un tableau à corriger par CSS
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    Dernière modification par Marc Lussac ; 27/05/2016 à 23h57.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  3. #3
    Invité
    Invité(e)
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  4. #4
    Membre éclairé
    Avatar de s0h3ck
    Inscrit en
    Mars 2013
    Messages
    181
    Détails du profil
    Informations forums :
    Inscription : Mars 2013
    Messages : 181
    Points : 871
    Points
    871
    Par défaut
    Bonjour,

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

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

    Mes yeux piquent

    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!

    Voici le lien de la validation (pour obtenir un code beaucoup plus propre)!
    N'oubliez pas de marquer votre sujet comme et de mettre des aux messages apportant un plus à votre discussion.

    « Ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément » Boileau.
    « Le mystère fait découvrir une autre dimension » mon imagination.





  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Citation Envoyé par christele_r Voir le message
    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

  6. #6
    Invité
    Invité(e)
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <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.

  7. #7
    Membre éclairé
    Avatar de s0h3ck
    Inscrit en
    Mars 2013
    Messages
    181
    Détails du profil
    Informations forums :
    Inscription : Mars 2013
    Messages : 181
    Points : 871
    Points
    871
    Par défaut
    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 Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <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 Voir le message
    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.
    N'oubliez pas de marquer votre sujet comme et de mettre des aux messages apportant un plus à votre discussion.

    « Ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément » Boileau.
    « Le mystère fait découvrir une autre dimension » mon imagination.





  8. #8
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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 ?

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    ...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 !


    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  10. #10
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    je ne sais pas trop où me placer avec mon 42 pied gauche et 42.5 pied droit !
    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 !

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .conteneur_flex {
      display:flex;
      flex-direction:row;
    }

  12. #12
    Invité
    Invité(e)
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Insérer une image dans un tableau
    Par aminos40 dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 2
    Dernier message: 31/05/2007, 09h38
  2. Réponses: 9
    Dernier message: 19/03/2007, 11h46
  3. afficher une image dans un tableau
    Par phpaide dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 26/04/2006, 13h10
  4. changer la dimension d'une image dans un tableau
    Par robocop2776 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 23/10/2005, 16h20
  5. ligne blanche sous une image dans un tableau
    Par spikelille dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 10/09/2005, 19h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo