Bonjour. visiteurs jour : 223       Au président     Beauté santé     Infos loisirs     Ensemble      Jean      Informatique     Relativité     Relativity

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  1709           
             En ligne actuellement :   2    Total des clics  1714453