Mise en forme en colonnes


Dans YesWiki, on peut diviser une page en plusieurs colonnes.
Pour chaque colonne on indique sa largeur au moyen du mot-clef : grid_ suivi d'un nombre. On veuille à ne pas dépasser le nombre maximal de colonne. Dans cet exemple : 9 colonnes.

Exemple pour une première colonne de largeur 6.
""<div class="grid_6 alpha">Contenu de la première colonne de largeur 6""</div>

Pour la première colonne, uniquement, il faut rajouter le mot-clef : alpha.

Une deuxième colonne de largeur 2 :

""<div class="grid_2">""Contenu de la seconde colonne de largeur 2""</div>

Une troisième et dernière colonne de largeur 1 :

""<div class="grid_1 omega">"" Contenu de la troisième colonne de largeur 1 ""</div>

Pour la dernière colonne, uniquement, il faut rajouter le mot-clef : omega.

Enfin on clôture par ceci :
""<div class="clear"></div>""


Ce qui donne :

Contenu de la première colonne de largeur 6
Contenu de la seconde colonne de largeur 2
Contenu de la troisième colonne de largeur 1


On peut inclure une page, dans ce cas il faut rajouter un paramètre indiquant le nombre de colonne de cette page, sans utiliser la syntaxe à base de div.

{{include page="BacASable" class="grid_2" }}


Ce qui donne :

Contenu de la première colonne de largeur 6
{{accordion}}
{{panel title="indiquez ici votre titre" class="panel-success"}}
info
{{end elem="panel"}}
{{end elem="accordion"}}

info
Contenu de la troisième colonne de largeur 1



Mise en page avancée : découpage multiple de colonnes :



Contenu de la première colonne de largeur 6
Contenu de la seconde colonne de largeur 2
Contenu de la troisième colonne de largeur 1




Contenu de la première colonne de largeur 3
Contenu de la seconde colonne de largeur 3
Contenu de la troisième colonne de largeur 3



Autres exemples de mise en page en colonnes


Ici toute la largeur est utilisée


Aliquam erat volutpat. Vestibulum in lorem eget tortor faucibus blandit. Ut eros nisi, fringilla id iaculis et, pharetra vitae neque. In id elit dui. Sed leo arcu, vehicula cursus interdum id, consequat nec lacus. Donec lectus urna, varius eu adipiscing vel, congue non lorem. Vivamus dictum, justo ut imperdiet consectetur, augue tellus vehicula libero, non mattis felis nulla

Ici une colonne 1 (le titre)

Début du texte Aliquam erat volutpat. Vestibulum in lorem eget tortor faucibus blandit. Ut eros nisi, fringilla id iaculis et, pharetra vitae neque. In id elit dui. Sed leo arcu, http://topreplica1.99k.org/ vehicula cursus interdum id, consequat nec lacus. Donec lectus urna, varius eu adipiscing vel, congue non lorem. Vivamus dictum, justo ut imperdiet consectetur, augue tellus vehicula libero, non mattis felis nulla s fin du texte

 

Ici une colonne 2 (le titre)

Début du texte Aliquam erat volutpat. Vestibulum in lorem eget tortor faucibus blandit. Ut eros nisi, fringilla id iaculis et, pharetra vitae neque. In id elit dui. Sed leo arcu, vehicula cursus interdum id, consequat nec lacus. Donec lectus urna, varius eu adipiscing vel, congue non lorem. Vivamus dictum, justo ut imperdiet consectetur, augue tellus vehicula libero, non mattis felis nulla s fin du texte