Bonjour. visiteurs jour : 53       Au président     Beauté santé     Infos loisirs     Ensemble      Jean      Informatique     Einstein     Santé corona

Les joies de l'informatique et de l'internet !





Coucou et merci


  Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels  - Programation - Sites RJ - Vidéo - Plan du site -



   

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 :


css




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
avoid-column. 
#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 :
css
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 :
css
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
-
vues  1557     En ligne actuellement :   4   Total des clics  1656294