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 :

Table inline dans un élément de liste


Sujet :

Tableau en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2009
    Messages
    265
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2009
    Messages : 265
    Par défaut Table inline dans un élément de liste
    Bonjour,

    J'essaie d'insérer un tableau dasn un élément de liste, et le moins qu'on puisse dire, c'est que les différents navigateurs sur le marché confèrent à mon projet une variété d'une richesse incroyable.
    Voici un exemple de code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <UL>
    <LI>List Element 1:
    <TABLE BORDER="2" CELLSPACING="0" CELLPADDING="0" STYLE="display: inline; vertical-align: top;">
    <TR><TD>1</TD><TD><TD>2</TD></TD></TR>
    <TR><TD>1</TD><TD><TD>2</TD></TD></TR>
    </TABLE>
    </LI>
    <LI>List Element 2:
    <TABLE BORDER="2" CELLSPACING="0" CELLPADDING="0" STYLE="display: inline; vertical-align: top;">
    <TR><TD>1</TD><TD><TD>2</TD></TD></TR>
    <TR><TD>1</TD><TD><TD>2</TD></TD></TR>
    </TABLE>
    </LI>
    </UL>
    ... et voici ce que ça donne sur respectivement
    - Safari et Google : Bravo ! c'est exactement ça que je veux.
    - Opera : pas mal pour la mise en place, mais la bordure des tables est réduite à une seule rangée;
    - Explorer : Pas trop mal, mais la puce est alignée en bas au lien du haut;
    - Firefox : le pire, cumule à peu près tous les défauts.

    Est-ce que quelque gourou de la feuille de style ici serait capable de m'aider à contourner les différents problèmes ?



    Merci.
    P.S. Si c'est pour me répondre « Ils ont tous tort, y a que Mords-zy-la qui suit les standards » merci de s'abstenir ;-)

  2. #2
    Membre chevronné Avatar de desert
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    414
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mai 2007
    Messages : 414
    Par défaut
    Bonjour,
    Je ne sais pas si cela marchera pour tous mais tu peux toujours essayer de remplacer le display:inline de ta table par ceci :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    ul li table {
        display: inline-block;
        display: -moz-inline-stack; /* pour cibler les versions de FF < 3 */
        vertical-align: top;
    }
    + le commentaire conditionnel pour les versions <= à IE7
    Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <!--[if lte IE 7]>
        <style type="text/css">
            ul li table {
                display: inline;
                zoom: 1; /* pour un bug de haslayout */
            }  
        </style>
    <![endif]-->
    PS: Je ne sais pas si tu es en XHTML mais si c'est le cas, tu dois éviter de mettre le nom des balises et attributs en majuscules.

  3. #3
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Bonsoir,
    pour commencer il faudrait savoir si le mode de rendu est standards ou non standard (Quirks) mais ou cas ou le document serait en mode standard, webkit (Safari/Chrome) serait je pense le plus proche du comportement standard mais ce que tu fais (changer le display par défaut d'un tableau) est fortement déconseillé. Dans le pire des cas remplaces le display:inline par un float:right ou un display:inline-block (en attendant une implémentation suffisante de inline-table)
    qui permet au moins de conserver la boîte de bloc généré par le display:table.
    Par ailleurs le comportement exacte qui devrait être adopté au cas ou le display du table n'est pas standardisé.
    De toute façon je doute que ce choix de structuration soit pertinent

  4. #4
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2009
    Messages
    265
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2009
    Messages : 265
    Par défaut
    Je ne sais pas si cela marchera pour tous
    Ben c'est pas si mal que ça ! Ça marche pour tous SAUF Explorer qui se met à faire un saut de ligne entre le texte et la table, mais avec une partie conditionnelle pour IE, je devrais pouvoir m'en tirer.

    Merci.

    Je ne sais pas si tu es en XHTML
    Non, personnellement, je suis complètement allergique au XHTML.
    Je préfère utiliser les minuscules pour tout ce qui est texte ou Javascript, et les balises en majuscules ressortent mieux.
    Mais c'est mon opinion, et je la partage...

    De toute façon je doute que ce choix de structuration soit pertinent
    Merci pour ce conseil, mais dans la mesure où cette structuration me permet d'afficher ce que je veux, de la façon que je veux, et à défaut de trouver une structuration meilleure, je ne vois pas ce qu'il y aurait d'impertinent dans la démarche ;-)

  5. #5
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Citation Envoyé par schnee Voir le message
    Merci pour ce conseil, mais dans la mesure où cette structuration me permet d'afficher ce que je veux, de la façon que je veux, et à défaut de trouver une structuration meilleure, je ne vois pas ce qu'il y aurait d'impertinent dans la démarche ;-)
    Disons qu'un tableau n'est en général pas vraiment approprié à désigner un item de liste mais ne connaissant pas le contexte je peux pas t'en dire plus.
    Tu code à ta manière ok, tu es dans ton droit mais en temps normal ce n'est pas à toi que s'adresse ce code mais à des utilisateurs ou plus exactement à des machines (navigateurs graphiques/texte, lecteur d'écrans, robots d'indexation...) qui doivent l'exploiter au mieux de manière à servir l'utilisateur final, ce qui implique le respect de certaines règles sémantiques.

  6. #6
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2009
    Messages
    265
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2009
    Messages : 265
    Par défaut
    Disons qu'un tableau n'est en général pas vraiment approprié à désigner un item de liste.
    Mon tableau ne désigne pas l'article de liste, il en fait partie.
    Ma liste donne les caractéristiques d'un évènement dans un congrès, dont
    - le lieu,
    - la date,
    - le coût, et il peut se trouver que le coût puisse contenir plusieurs cas, comme membre, non membre, étudiant, retraité, etc, et en plus il peut y avoir un tarif avant une date déterminée, et après.
    Le tableau est alors parfaitement justifié, et comme il fait partie de l'article Coût, il n'y a pas de raison de l'afficher à la ligne suivante. Voilà.

    Tu code à ta manière ok, tu es dans ton droit mais en temps normal ce n'est pas à toi que s'adresse ce code mais à des utilisateurs ou plus exactement à des machines (navigateurs graphiques/texte, lecteur d'écrans, robots d'indexation...) qui doivent l'exploiter au mieux de manière à servir l'utilisateur final, ce qui implique le respect de certaines règles sémantiques
    Merci pour cette leçon de morale, mais j'ai quand même 40 années d'expérience un programation, et des utilisateurs et des machines, j'en ai ai vu défiler pas mal dans ma carrière, et j'ai toujours su les écouter et mettre à profit leurs remarques ;-)

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

Discussions similaires

  1. Réponses: 8
    Dernier message: 18/01/2016, 16h21
  2. [SP-2010] Ouvrir un fichier (par son icone) lié dans un élément de liste
    Par Robyx dans le forum SharePoint
    Réponses: 5
    Dernier message: 06/02/2015, 16h30
  3. Réponses: 5
    Dernier message: 02/10/2009, 16h07
  4. Cacher des éléments dans une zone de liste
    Par toto10 dans le forum IHM
    Réponses: 11
    Dernier message: 19/07/2006, 15h03
  5. Listes de tables "favorites" dans Toad
    Par nebule dans le forum Toad
    Réponses: 8
    Dernier message: 13/10/2005, 11h51

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