28173 sujets

CSS et mise en forme, CSS3

bonjour,
je viens vers vous pour un conseil, les css n'étant pas (encore) ma spécialité, je suis plutôt côté serveur (PHP et cie).
pour l'admin d'un site j'aimerai présenter les articles un peu dans le style de l'image en pièce jointe (screenshot du site fnac.com, tout réalisé avec des tableaux), donc je me demande si je dois utiliser les listes de définition ou alors une simple liste ordonnée. qu'en pensez-vous ? des idées sur la facon de coder ?

en schéma le résultat serait quelque chose dans ce genre :

<img> <nom du produit> <icone1> <icone2>
<prix>

upload/12116-itemslist.jpg
Modifié par jroy (03 Sep 2007 - 15:28)
Modérateur
Salut,

Un tableau est adapté à la situation. Tu as bien des données tabulaires ici donc pourquoi changer ? Smiley smile
pour éviter de mettre un tableau justement Smiley smile

c'est aussi le meme genre de présentation sur le site de digg.com, et dans ce cas c'est présenté sans tableau.
jroy a écrit :
pour éviter de mettre un tableau justement Smiley smile

C'est un non sens amha, table est un élément html sain, accessible et inoffensif mais, avant tout, prévu pour baliser des données tabulaires. Tu essayes aussi d'éviter l'élément p pour introduire un paragraphe? Smiley sweatdrop
je ne suis pas du tout contre la balise p Smiley cligne
et je vais de ce clic lire l'article qu'on me conseil.

... et vu le nombre de post de vous 2 je crois que vos conseils sont plutôt béton, merci !
après avoir lu l'article indiqué ci-dessuis je crois que je ferai affaire avec

<table>
<tr>
<td><img>
<td><le nom du produit><br />liste d'icones

(edit de la derniere colonne)

merci à vous 2.
Modifié par jroy (03 Sep 2007 - 16:36)
Moi qui ai encore plus de posts que les deux autres réunis (hé hé Smiley biggol ), je me permets juste une petite nuance: on pourrait tout aussi bien se passer de tableau si c'est jouable et pas trop couteux à mettre en place.

Si je regarde l'image d'exemple donnée, je vois trois colonnes (peut-être quatre?), avec:
- dans la première, une image d'illustration, qui sera probablement une <img alt=""> dans le code HTML (sauf si on veut mettre un lien sur l'image, auquel cas on reprendra peut-être l'intitulé du lien de la colonne suivante, tant pis pour le doublon...);
- dans la seconde, trois types d'informations différentes, à savoir un nom de produit, un descriptif de produit, et un lien donnant accès à une fonctionnalité du site;
- dans la troisième, le prix.

L'archétype du tableau de données, c'est une colonne = un type de données. Ici, on en a trois dans la deuxième colonne. Bref, c'est plus de la mise en page que de la structuration logique poussée dans ses retranchements. Smiley smile

Ceci dit, utiliser un tableau est une solution technique tout à fait pertinente ici: on obtient un flux HTML correctement ordonné, c'est accessible, et c'est facile à mettre en place.

Mais on aurait aussi bien pu faire autrement. Smiley smile
Modérateur
Florent V. a écrit :
L'archétype du tableau de données, c'est une colonne = un type de données. Ici, on en a trois dans la deuxième colonne. Bref, c'est plus de la mise en page que de la structuration logique poussée dans ses retranchements. Smiley smile
On peut tout de même considérer les éléments qui se trouvent dans la deuxième colonne comme un ensemble.
Pour certains langages (autres que structurel), je veux bien qu'on dise qu'un tableau ne devrait contenir qu'un type de données mais en (x)html, il y a un document qui le précise ? Smiley kiwiz

Florent V. a écrit :
Mais on aurait aussi bien pu faire autrement. Smiley smile
C'est à dire ? Smiley ravi

Je voyais bien d'autres options se profiler à l'horizon mais mon petit doigt m'a dit qu'il y aurait certainement plus à redire... Smiley langue
koala64 a écrit :
On peut tout de même considérer les éléments qui se trouvent dans la deuxième colonne comme un ensemble.

Oui. Mais cet ensemble est relativement arbitraire. En fait, le seul ensemble logiquement cohérent se situe à l'échelle de la ligne: chaque ligne correspond à un produit. Pour le découpage en colonnes, par contre, c'est très arbitraire. Pourquoi pas le prix à gauche avec le descriptif? Pourquoi pas la fonction «Ajouter au panier» séparée du descriptif, ou associée au prix?

Donc, à partir du moment où la seule véritable structuration est «une ligne = un produit», on aurait aussi bien pu utiliser une liste ul. Ou une série de divs, pourquoi pas.

Bien sûr, pour l'organisation de données statistiques ou scientifiques, un tableau à l'organisation rigoureuse est un plus indéniable. Cela permet de croiser des informations sur deux axes. Ici, les colonnes sont plutôt indéfinies, le but recherché n'est pas vraiment le croisement d'informations.

Mais de toute façon, les notions de tableau de mise en page et de tableau de données sont très floues. On peut bien sûr prendre les exemples bien déterminés du tableau de découpage made in ImageReady d'une part (mise en page) et du tableau de données scientifiquement organisées d'autre part, mais tout ce qui se trouve entre les deux est beaucoup plus flou. Pour beaucoup de contenus, le tableau est une modalité de présentation intéressante, mais pas indispensable.

Bref, ce que je voulais surtout dire c'est: pas la peine d'affirmer trop vite que «ce sont des données tabulaires» (ou l'inverse!) quand on n'est pas dans un cas tout à fait tranché. Ce qui n'empêche pas de conseiller l'utilisation d'un tableau. Smiley cligne

koala64 a écrit :
Pour certains langages (autres que structurel), je veux bien qu'on dise qu'un tableau ne devrait contenir qu'un type de données mais en (x)html, il y a un document qui le précise ?

Une cellule de tableau peut contenir tout et n'importe quoi. Tout simplement parce que les tableaux en HTML ne sont pas définis «sémantiquement» mais techniquement. Et tout ce qui n'est pas contraire aux règles techniques est autorisé.

koala64 a écrit :
Je voyais bien d'autres options se profiler à l'horizon mais mon petit doigt m'a dit qu'il y aurait certainement plus à redire... Smiley langue

Je vois deux trois choses, et s'il y avait un intérêt à ne pas figer la mise en page avec un tableau (styles multiples suivant les préférences de l'utilisateur, par exemple), ça vaudrait le coup d'y passer un chtit peu plus de temps. Mais sinon un tableau sera plus rapidement mis en place.