Multi-colonnes en CSS3
Le W3C propose le module CSS3 nommé CSS Multi-column Layout Module qui est en Candidate Recommendation au 12 avril 2011.
Ce module commence enfin à être reconnu par les navigateurs récents !
exemple :
<style>
#conteneur {
width: 960px;
-webkit-columns: 3 auto;
-moz-columns: 3 auto;
columns: 3 auto;
}
#conteneur p {
margin: 0;
background-color: #dedede;
}
</style>
</head>
<body>
<div id="conteneur">
<p><strong>Etiam</strong> habebis...</p>
<p><strong>Vivamus</strong> sagittis lacus...</p>
<p><strong>Petierunt</strong> uti sibi...</p>
</div>
</body>
Résultat :
Source : Un article du JDN
Suite :
Réglage de l'espace entre les colonnes : les gouttières, avec la propriété column-gap qui accepte toutes les valeurs, sauf négatives et les pourcentages.
Exemple :
#conteneur {
width: 960px;
-webkit-columns: 3 auto;
-moz-columns: 3 auto;
columns: 3 auto;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
}
Placer des filets verticaux avec les règles columnrule-color , couleur du filet, column-rule-style ,
style du filet et column-rulewidth , largeur du filet.
#conteneur {
width: 960px;
-webkit-columns: 3 auto;
-moz-columns: 3 auto;
columns: 3 auto;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 1px solid #000;
-moz-column-rule: 1px solid #000);
column-rule: 1px solid #000;
}
imposer des sauts de colonnes avec les propriétés break-before , break-inside et break-after .
Les valeurs sont nombreuses pour :
break-before et break-inside : auto, always, avoid, left, right, page, column, avoid-page et
#conteneur p {
margin: 0;
background-color: #dedede;
break-before: column;
}
Attention cette propriété n'est reconnue que par les dernières versions d'Internet Explorer et Opera.
Voici l'affichage obtenu dans Opera :
Mise en place des sauts de colonnes. © Eni
5. Répartition sur plusieurs colonnes
La propriété column-span permet de répartir un élément sur plusieurs colonnes.
La valeur all permet une répartition sur toutes les colonnes de la mise en page.
Pour cet exemple, ajoutons un titre <h2> dans notre conteneur :
<div id="conteneur">
<h2>Cum sociis natoque...</h2>
<P>...</p>
...
</div>
Voilà le sélecteur ajouté :
#conteneur h2 {
column-span: all;
-webkit-column-span: all;
}
Notez que cette propriété n'est pas reconnue par Firefox.
Voici l'affichage obtenu avec la dernière version d'Opera :
Passage d'un objet sur plusieurs colonnes. © Eni
Générateur de multi-colonnes cliquer ici
Pour vous aidez à générer le code plus rapidement, vous trouverez à cette URL ,
un générateur de multi-colonnes en ligne, avec les préfixes constructeurs des navigateurs
sachant qu'Opera n'en a plus besoin
Total des visiteurs : 535372
dont aujourd'hui : 108 En ligne actuellement : 2 Total des clics 1347378