TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Editer sur plusieurs colonnes

nombre de colonnes

CSS3 permet d'afficher un contenu sur plusieurs colonnes. C'est la propriété column-count qui permet de déterminer le nombre de colonnes qui doit être utilisé pour en afficher le contenu de lélément. Ainsi pour afficher cet élément div sur deux colonnes on utilise la déclaration suivante : Pour des raison de compatibilité il est nécéssaire de déclarer les propriété pour les différents navigateurs :

largeur des colonnes

La propriété column-width détermine la largeur des colonnes d'un élément qui devient multi-colonnes.

Les propriétés column-count et column-with sont interdépendantes. En effet la valeur de l'une de ces propriétés détermine la valeur de l'autre.

Pour que la propriété column-with soit prise en compte il faut que column-count soit fixée à "auto" et inversement, pour que la propriété column-count soit prise en compte il faut que column-width soit fixée à "auto"

espacement entre les colonnes

L'espacement entre les colonnes est donné par la propriété column-gap.

barre de séparation entres colonnes

Pour insérer une barre de séparation entre les colonnes on utilise la propriété column-rule.

A la manière des bordures, trois valeurs caractérisent l'apparence de la barre de séparation :

afficher à cheval sur plusieurs colones

La propriété column-span permet d'afficher un élément à au sein d'un élément multi-colonnes en lui affectant la valeur "all". Dans un élément multi-colonnes la valeur par défaut de cette propriété vaut "1", et s'affiche alors dans une colonne.

Cette propriété n'est actuellement reconnue que par Chrome (-webkit-column-span") et Opéra

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007