Aide table vs css

Bonjour,

Voici je pense une bonne situation où il m'est diffcile de défendre le bien fondé des css par rapport aux tables :

http://denis.rhubarbe.org/wip/css/testtable.html

Ce menu est fait en table et l'ont me demande afin de prouver l'efficacité des css de le refaire "proprement". Afin d'être parfaitement prêt à argumenter pourriez-vous me conseiller sur une méthode efficace...

Voici deux points où j'ai un peu plus de mal :

- les textes se trouvant dans les colonnes en vis à vis doivent être alignés, même si l'un des textes et sur deux lignes.
- lorsqu' un texte est en deux lignes, le début de cette seconde ligne doit-être aligné sur la première, donc après l'espace laissé par la puce.

merci

Bonjour,

Rho ça doit bien être faisable.

Ce qui est important c'est la sémantique (le sens) à donner à ce menu et ses éléments.

Pourquoi y a-t'il deux colonnes ? Les éléments sur une même ligne ont-ils un sens entre eux ? Doit-on lire l'information de haut en bas sur la première colonne, puis passer sur la seconde ou bien lire de droite à gauche en passant respectivement sur la première puis la seconde colonne ?

Le texte bidon ne facilite pas cette compréhension.
Avec cette structure de tableau il semble que l'information est lue ligne par ligne (une ligne étant composée des éléments des deux colonnes).

Une fois que j'aurai cette sémantique en main je pourrai tenté de t'aider.


[edit:] D'ailleurs si ça se trouve effectivement un tableau serait bien adapté (encore une fois tout dépend du sens que tu veux lui donner) mais en tout cas il doit y avoir moyen de réduire un peu le nombre de cellules.
Modifié par Sebastien D. (28 Nov 2007 - 11:12)

Hello Sebastien,

Voilà j'ai mis à jour la page, en gros oui cela pourrait être un tableau, c'est vrai que sans doute cette présentation n'est pas la plus ergonomique d'ailleurs dans cet, exemple là on a un nombre impaire de rubriques du coup on se retrouve avec un blanc ce qui n'est pas super pour l'équilibre de la page.

Mais lorsqu'on est chargé de la découpe d'une maquette approuvée par le client... peut-on, doit-on remettre celle ci en cause ?
la suite doit être un long débat

Par contre ta remarque me semble intéressante à la création du layout, donc j'attends la suite avec impatience

kedis a écrit :

Mais lorsqu'on est chargé de la découpe d'une maquette approuvée par le client... peut-on, doit-on remettre celle ci en cause ?
la suite doit être un long débat

ça c'est effectivement un autre débat (beaucoup plus long) dont on va s'abstenir ici.

kedis a écrit :

Par contre ta remarque me semble intéressante à la création du layout, donc j'attends la suite avec impatience

Mince la pression...

Je réfléchis à ton problème quand j'ai cinq minutes de libre.

Bonjour kedis,

Je rejoins Sébastien sur l'analyse, un tableau peut parfaitement être la solution dans ce cas de figure
A priori les liens se lisent de gauche à droite (touche tab)
Cette liste est-elle destinée à être insérée dans une page avec du contenu (tu parles de menu) ou demeurera-t-elle sur une page à part ?

En ce qui concerne "l'équilibre", tu peux aussi ajouter et afficher une ligne vide de contenu dans ton tableau :

[b]css[/b]
tr,  th, td{ empty-cells: show; }
[b]html[/b]
<td valign="top" width="18"> </td>
<td valign="top" width="22" class="ligneGrise" ><img src="img/bullet.png" width="12" height="12" class="bullet" /></td>
<td valign="top" class="ligneGrise" width="450"><a href="#"> </a></td>

Reste à vérifier la validité (accessibilité,sémantique,etc...) de ce code, ce que ne manqueront pas de faire les véritables spécialistes de ce site

Cdt,
Sylvain
Modifié par 6l20 (28 Nov 2007 - 12:02)

Je mets par écrit mes pensées.

D'un point de vue sémantique, il faut que ces liens soit regroupé dans un seul ensemble déjà pas question de faire deux listes distinctes. On pourrait tout mettre dans une seule et limiter la hauteur pour qu'elle se dispatche sur deux colonnes mais on ne pourra pas faire que deux éléments au même niveau (ce qui est visuellement une ligne) soient de même hauteur.

Déjà on peut alléger ce tableau.
(Je mets une version alléger dans quelques minutes)

Salut,

Bon alors, à la louche, étant donné ce que tu as dit, je verrai bien ça (en supposant que ta liste se lise comme un texte (gauche - droite - descente - gauche - droite ...) :

- une liste pour l'ensemble
- les items en float : left
- les items de gauche sont en clear : left
- un padding pour la puce (ou pour le lien en le mettant en display : block)

Bon déjà une
version tableau bien allégée.

J'ai ai profité pour faire deux trois modifications CSS genre un display: block; sur les liens pour qu'ils prennent toute la largeur de la cellule.
Les puces sont mises en images de fond, de toute façon elles ne sont là que pour la décoration et n'apportent aucune information.
Les polices et tailles sont pas tout à fait les mêmes (je les ai passées en tailles relatives) mais ça se règle facilement.

Je vois au passage qu'il manque l'écart entre les deux colonnes, je vais rajouter ça.

Pour l'utilisation d'une liste je vais tenter la proposition de Marvin Le Rouge.
Ça ce voit que je n'ai rien à faire ce midi

EDIT: T'as pas une autre catégorie de bestioles que je puisse mettre à la place du dernier "texte" ?
Modifié par Sebastien D. (28 Nov 2007 - 12:42)

D'ailleur j'ai un petit soucis, j'ai plus la main avec les tableau. Je ne vois pas comment créer un espace entre les deux colonnes sans avoir à ajouter de cellules vides.

Voilà les deux versions sont en ligne.

Pour la tableau se serait pas mal de pouvoir faire la séparation entre les deux colonnes sans avoir à ajouter une cellule vide. Mais là je bloque (ça me fait réviser ^^).

Pour la version liste, on n'arrive pas tout à fait au résultat escompté concernant l'alignement horizontal lorsque que le texte est placé sur deux lignes.

EDIT: Ce post tombe bien j'ai un menu dans le genre à faire d'ici quelques jours.
Modifié par Sebastien D. (28 Nov 2007 - 14:06)

Et si mettais simplement un espace comme ici entre les 2 cellules?

Ipszy a écrit :
Et si mettais simplement un espace comme ici entre les 2 cellules?

Je ne vois pas vraiment ce que tu as fait.
Il n'y a pas plus d'espace entre les deux colonnes ?
En fait ce que je voudrais c'est que la ligne grise ne fasse pas continue.

Ya juste un souci avec la version sans tableau.

il me semble que

kedis a écrit :
- les textes se trouvant dans les colonnes en vis à vis doivent être alignés, même si l'un des textes et sur deux lignes.
- lorsqu' un texte est en deux lignes, le début de cette seconde ligne doit-être aligné sur la première, donc après l'espace laissé par la puce.

Désolé de ne pas être plus aidant, mais j'ai pas mal de boulot aujourdh'ui !
Modifié par Cocci_uk (28 Nov 2007 - 14:20)

Sebastien D. a écrit :

Pour la version liste, on n'arrive pas tout à fait au résultat escompté concernant l'alignement horizontal lorsque que le texte est placé sur deux lignes.

J'ai bien repéré ce problème. Je ne trouve aucune solution pour l'instant.
Modifié par Sebastien D. (28 Nov 2007 - 14:32)

Bon pour commencer, merci de votre aide... c'est assez impressionnant de voir la réactivité sur ce site !

Maintenant il reste un point sensible que j'ai cité qui n'est pas résolu dans la version css, c'est que les lignes horizontales doivent être alignées.
Et je sais comme il est difficile de gérer les hauteurs...

Si ce point est résolu, cela permettrait de convertir mes collègues aux joies des css, le défi est donc de taille pour la "Cause"

edit : juste un peu en retard !
Modifié par kedis (28 Nov 2007 - 14:39)

kedis a écrit :
Si ce point est résolu, cela permettrait de convertir mes collègues aux joies des css, le défi est donc de taille pour la "Cause"

En même temps, quitte à "convertir" tes collègues, il vaudrait mieux choisir un exemple dans lequel les données ne seraient pas tabulaires ... auquel cas une table est toute indiquée...
Modifié par Heyoan (28 Nov 2007 - 14:42)

En fait je n'ai pas choisi le cas, c'est plutôt une sorte de défi...
Je ne suis pas contre l'utilisation de tableau si cela est plus indiqué, mais encore faut-il être certain que ça l'est (apparemment oui)

sinon c'est un problème que je rencontre souvent, celui des hauteurs, c'est sans doute possible de le résoudre en donnant une taille fixe aux li mais dans ce cas on contraint une hauteur définie et si de nouvelles rubriques plus longues doivent être ajoutées cela risque de poser des problèmes...

kedis a écrit :
Voici je pense une bonne situation où il m'est diffcile de défendre le bien fondé des css par rapport aux tables :

http://denis.rhubarbe.org/wip/css/testtable.html

Cet exemple utilise DÉJÀ les CSS. Qu'y a-t-il à prouver?

Plus sérieusement, la bonne approche (notamment dans une perspective d'«évangélisation», mais on devrait plutôt parler de formation continue et de mise à jour des connaissances et des pratiques) consiste non pas à bannir les tableaux et à se lancer des défis «tableless», mais à passer le maximum de données de mise en page dans la feuille de style.

Ici, on a un tableau à cinq colonnes. Comme l'a montré Sébastien, les puces peuvent très bien passer en image de fond (ce qui allège le code HTML et rend les modifications plus simples), et le tableau peut être simplifié sur deux colonnes.

Pour corriger l'exemple de Sébastien (version en tableau simple), il suffirait de:
- Supprimer la colonne centrale.
- Appliquer un border-right: solid 18px white; aux td de gauche. On peut aussi creuser du côté d'un border-spacing: 18px 0; (mais test rapide pas concluant sous IE6... à creuser). À la rigueur, on peut aussi dessiner les bordures entre les lignes avec une image de fond, ce qui permet d'utiliser simplement un peu de padding-right sur la colonne de gauche. Et puis on peut potasser ceci:
http://www.w3.org/TR/CSS21/tables.html

On obtient donc un tableau simplifié sur deux colonnes, dont le principal intérêt est de permettre une mise en page difficile à obtenir à partir d'une liste de blocs (ul li). Sans cette contrainte, on aurait bien sûr pu se passer de tableau (pour peu que cela simplifie les choses encore un peu plus).

Moralité: ne pas hésiter à avancer des compromis, notamment lorsqu'ils permettent d'augmenter la productivité (ou de garder une productivité égale).

La question n'est pas: «peut-on faire ceci sans tableau de mise en forme?», mais «peut-on faire ceci plus simplement ou plus efficacement?»
Modifié par Florent V. (28 Nov 2007 - 16:16)

En discutant avec Kedis, j'en suis venu à me dire que finalement le seul avantage des tables dans ce cas précis c'était leur faculté d'adapter la taille de leurs cellules aux cellules adjacentes.

Je me suis demandé alors dans quelle mesure la solution n'était pas de reproduire ce comportement en javascript, histoire de garder le meilleur des 2 mondes.

Exemple ici : http://magus.be/xhtml/

J'ai honteusement repris la CSS de Sebastien, mais l'idée ici était de faire du javascript
Je me base ici sur la libraire mootools mais ce code est adaptable facilement avec n'importe quelle autre librairie et même aussi sans


Modifié par LeMagu(s) (28 Nov 2007 - 16:29)

Florent V. a écrit :

Cet exemple utilise DÉJÀ les CSS. Qu'y a-t-il à prouver?

Un excès de zèle peut-être

Florent V. a écrit :

Appliquer un border-right: solid 18px white; aux td de gauche

Punaise j'avais même pas pensé à ça...

Florent V. a écrit :

On peut aussi creuser du côté d'un border-spacing: 18px 0; (mais test rapide pas concluant sous IE6... à creuser).

Effectivement IE6 n'aime pas trop le border-spacing. J'avais déjà rencontré pas mal de problèmes avec cette propriété.

Florent V. a écrit :

La question n'est pas: «peut-on faire ceci sans tableau de mise en forme?», mais «peut-on faire ceci plus simplement ou plus efficacement?»

Sans non plus rentrer toujours dans les solutions de facilité qui sont bien souvent des choix pas vraiment propres.

Dans ce cas, effectivement, le tableau de présentation étant autorisé pourquoi s'en passer ?
C'est d'ailleurs la solution qui a été optée dès le début.
Modifié par Sebastien D. (28 Nov 2007 - 16:36)