28234 sujets

CSS et mise en forme, CSS3

[Résolu] Border qui ne s'affiche pas avec display: table

Bonjour. J'ai un petit problème pour la mise en forme de code là que je souhaite présenter comme un tableau :
<ul class="display-align">
    <li>
        <span>...</span>
        <span>...</span>
        <span>...</span>
    </li>
    <li>
        <span>...</span>
        <a><img /><a>
        <a><img /><a>
    </li>
    <li>
        <span>...</span>
        <a><img /><a>
        <a><img /><a>
    </li>
</ul>


Et voilà mon code CSS actuel :
ul.display-align { display: table; background: #C3C3C3; padding: 10px; border: solid 1px #808080; }
ul.display-align li { display: table-row; height: 30px; }
ul.display-align li:hover { background: #808080 }
ul.display-align li:first-child { display: table-header-group; }
ul.display-align li > * { display: table-cell; padding: 0 10px; text-align: center; vertical-align: middle;}
ul.display-align li > *:first-child { padding-left: 0px; }
ul.display-align li > *:last-child { padding-right: 0px; }


Ce qui me donne l'affichage suivant :
upload/22580-tab.JPG

Bref je souhaite rajouter des border sur mes éléments pour rendre tout ça un peu plus sexy, le soucis est qu'il y en a aucun qui s'affiche, peu importe sur quel élément j'essaye de le placer... Du coup après plusieurs heures de recherche intensive je me tourne vers vous histoire de savoir ou j'ai fait une bétise...
Modifié par slake13 (21 Oct 2009 - 17:03)
Petite mise à jour du code CSS pour les gens qui peuvent être intéressé par ce type de mise en forme :
ul.display-align { display: table; background: #C3C3C3;  border: solid 1px #808080; border-collapse: collapse; }
ul.display-align li { display: table-row; height: 30px; }
ul.display-align li:first-child { display: table-header-group; border-bottom: dashed 1px #808080; }
ul.display-align li > * { display: table-cell; padding: 0 10px; text-align: center; vertical-align: middle; border-left: dashed 1px #808080; }
ul.display-align li:first-child:hover { background: #C3C3C3; }
ul.display-align li:hover { background: #969696 }
ul.display-align li > a:hover { background: #6B6B6B;}


Pour un rendu final qui se présentera de cette manière :

La couleur d'une ligne fonce au passage de la souris, et les "cases" avec des liens également. upload/22580-tab2.JPG
Modifié par slake13 (21 Oct 2009 - 17:23)
Salut,

euh... on dirait une vraie table non ? Alors pourquoi ne pas utiliser l'élément TABLE qui, en cadeau bonus, sera bien interprété dans tous les navigateurs ?
Non je ne présente pas vraiment un tableau sémantiquement mais une liste de rôles. Je pense que l'élément table est plus à utiliser lorsque tu présentes des données. Donc oui visuellement c'est juste un tableau, et bon certes je me fais bien plus chier...
Administrateur
slake13 a écrit :
Non je ne présente pas vraiment un tableau sémantiquement mais une liste de rôles.

Sans vouloir polémiquer, je suis très perplexe quant à tes arguments : je vois des données associées à des titres horizontaux (libellé, édition, suppression) et verticaux (test1, test2,...).
Je ne vois vraiment pas en quoi un tableau ne serait pas "sémantiquement" approprié ici
Smiley sweatdrop
Salut,

T'es-tu déjà demandé à quoi ressemblerait ta liste sans feuille de style ?


* Libelle Edition Supression
* test1 [ img ] [ img ]
* test2 [ img ] [ img ]
* test3 [ img ] [ img ]


Ca n'a pas vraiment de cohérence représenté en liste comme ça ...
@ Raphael
Ben pour rentrer un peu dans la polémique ( Smiley smile ) je ne présente pas des données dans le sens ou les liens de suppression et d'édition seront toujours présent peu importe le nombre d'élément dans ma liste. Un tableau présente une donnée via l'association d'une colonne avec une ligne, hors ici je me contente de présenter une liste de rôle. Sémantiquement dire que la ligne test1 associé avec la colonne suppression représente une donnée pointant vers le lien de suppression n'a que peu de sens.

Mais c'est un sujet à controverse, et les débats continueront encore longtemps à ce sujet. Peut être que j'ai tort, mais ça ne me dérange pas de continuer le débat Smiley smile

@ Agylus
Je suis d'accord avec toi que ça a tout d'un tableau visuellement, mais sémantiquement en ce qui me concerne je pense que ça n'a pas la même valeur, et je t'invite à lire mon message destiné à Raphael pour comprendre pourquoi j'ai fait un tel choix.
Modifié par slake13 (22 Oct 2009 - 10:12)
slake13 a écrit :
Sémantiquement dire que la ligne test1 associé avec la colonne suppression représente une donnée pointant vers le lien de suppression n'a que peu de sens.

D'un point de vue ergonomique c'est pourtant très exactement ce que tu présentes comme information à l'utilisateur. Tu as un bouton-pictogramme pas explicite en lui-même (au mieux, l'image rappelle plus ou moins la fonction), et c'est l'association des en-têtes verticaux et horizontaux du «tableau» visuel qui permettent de déduire la fonction exacte du bouton.

slake13 a écrit :
Je suis d'accord avec toi que ça a tout d'un tableau visuellement, mais sémantiquement en ce qui me concerne je pense que ça n'a pas la même valeur

Et c'est pour ça que tu as choisi une solution largement moins bonne qu'un tableau, comme l'indique Agylus en te montrant un rendu linéaire de ton code.

Utiliser un tableau (avec des éléments de tableau de données tels que des TH avec attribut scope qui va bien) n'est pas une solution idéale. On peux ergoter sur la différence entre des données et des liens donnant accès à des fonctions si on veut. Il reste qu'un tableau bien fichu est ici la solution la plus proche sémantiquement de ce que tu souhaites faire, la plus accessible, et cerise sur le gâteau la plus simple à mettre en place!

Maintenant, rien n'empêche d'imaginer une ergonomie différente, qui pourrait se coder avec autre chose qu'un tableau (indice: dans ce cas, ça ne ressemblera sans doute pas visuellement à un tableau).
Sujet clos
Aller à