Je découvre tout à fait par hasard ce billet de Nicole qui expose une solution très intéressante pour faire des colonnages.
L’astuce consiste à placer la propriété overflow sur le contenu, pour que celui-ci puisse s’adapter en fonction de son contexte : il n’est alors plus besoin de lui préciser une largeur. On peut alors, modifier la largeur de la colonne, en ajouter, en supprimer : le contenu s’adaptera toujours.
Elle utilise d’ailleurs cette technique sur son projet Object-Oriented CSS.
Seules précautions à prendre pour IE 6 :
- appliquer un
hasLayout(via unzoom:1ou unheight:1%au contenu ; - ne pas oublier de corriger le « Three Pixel Text Jog » (via un
margin-left:-3pxoumargin-right:-3px;).
Seuls inconvénients trouvés :
- l’impossibilité de « faire sortir » un élément en dehors du cadre contenu, celui-ci ayant un
overflow; - l’ordre du contenu qui se trouve inversé par rapport à l’affichage lorsqu’on utilise une colonne placée à droite.
14 commentaires ↓
Et la technique de Sandrina alors ? non ?
Intéressant. Je me demande ce qu’en pense Sandrina ?
Héhé !
Sandrina (Justino) avait en effet une technique similaire à base de
display:tableet de display:inline-block(pour IE 6). Mais elle présente un inconvénient : le contenu ne fait pas 100 % de la largeur offerte.Nicole en parle aussi rapidement sur son billet.
Avec l’inversion de l’ordre des colonnes, comment se comporte une navigation au clavier s’il y a des liens dans les colonnes ?
Bonsoir Vincent, Ton article tombe bien car j’avais aperçu ce fonctionnement au hasard d’une erreur CSS. Le seul inconvénient est que si une colonne est plus grande, sont contenu ne débordera pas sous la plus petite. Par ailleurs, la technique dont vous parlez proposée par Sandrina justino ne devrait pas marcher sous IE6. Le display : table n’étant pas pris en compte ou je me trompe ?
Effectivement, le display:table n’est pas reconnu par IE6, c’est pourquoi j’utilise le display:inline-block qui a pour inconvénient de ne pas prendre la largeur totale disponible. Bref, j’utilise cette technique pour ne pas avoir à fixer systématiquement les tailles des colonnes bien qu’elle ne soit pas parfaite. D’ailleurs, la technique de Nicole me parait plus complète, je pense que je l’utiliserai à l’avenir.
Technique intéressante mais les inconvénients sont, pour moi, vraiment bloquants.
Je note mais je garde ma méthode !
@Shemu : c’est quoi ta méthode ?
@Shemu : c’est quoi ta méthode ? (bis)
C’est pas « ma » méthode mais c’est celle que j’utilise.
C’est vrai qu’on peut faire comme cela aussi.
D’autres soucis se présentent alors :
Ça nous laisse quand même du choix tout ça, c’est bien !
Oui. Une question de préférence !
En cherchant un peu des infos sur hasLayout, je viens de tomber sur ce site, qui parle des différentes manières de démarrer un block formatting context : http://dev.l-c-n.com/IEW/simulations.php
J’ai un peu du mal à comprendre comment tout ça s’articule, mais ça a l’air bien 😉
J’avais testé cette technique une fois (il y a trois ans peut-être), et j’étais tombé sur un bug absolument rédhibitoire : l’utilisation d’une ancre faisait remonter le contenu en dehors de la zone de visualisation.
Il faudrait que j’essaie de le reproduire…
Laisser un commentaire