Display: table-cell; [Resolu]

Il y a un certain consensus sur le web à propos de table-cell par rapport à inline-block par exemple. Pour styler un menu, ce display doit-il être systématique?
Modifié par jmlapam (09 Jan 2012 - 18:06)

Non, surtout que cette propriété n'est pas supporté par IE7. (et qu'au fond, pour un menu simple, ça n'offre pas d'avantage réel)

Le display table doivent être utilisé dans certains cas où il est nécessaire:

- Colonnes réellement de même hauteur
- Si on veut qu'un contenu occupe l'espace restant, ou que la largeur de chaque bloc soit proportionnel au contenu de ses frères et soeurs (le menu de mon site perso utilise ce comportement de table par exemple)
- Centrer un contenu verticalement

Il y a possiblement d'autres cas de figure, mais pour placer des éléments un à côté de l'autre, inline, inline-block et float offrent des solutions beaucoup plus supportés des navigateurs obsolètes et simple d'application (le display table CSS est quand même particulier car il doit générer des éléments table, tr et td factice selon le cas).

Ah d'accord, merci de tes explications.
Mais alors comment tu résous le souci des différences de largeurs, parce que souvent c'est pénible à styler quand tu as un menu qui est plus grand que les autres?
Modifié par jmlapam (08 Jan 2012 - 19:40)

Que veux-tu dire ?

Comment je fais quand je veux donner la même largeur à chaque élément de menu ?

Bah par exemple,

Si j'ai pas trop mal capté ce que fait table-cell, les différentes items peuvent s'adapter en fonction du plus grand.

a écrit :
Si j'ai pas trop mal capté ce que fait table-cell, les différentes items peuvent s'adapter en fonction du plus grand.

Oui, tout comme si tu fais un tableau HTML.

Pour faire des items de menus de mêmes largeurs, suffit de leur fixer la même (e.g. width: 200px; ou en pourcentage)

Ok c'est bon merci à toi, j'ai résolu mon souci.