Aide:Deux Colonnes
Il existe différentes méthodes pour afficher du texte sur plusieurs colonnes. On choisira le modèle en fonction de :
- la mise en page (nombre de colonnes, ligne séparatrice)
- le comportement en fonction de l'espace de nom
Critères de choix modifier
Les modèles suivant permettent l'ajout d'une ligne séparatrice :
| Méthode | Syntaxe |
|---|---|
| class=deuxcolonnes | <div class=deuxcolonnes style="column-rule: 1px solid black"></div> |
{{Colonnes}}
|
{{Colonnes|filet=1px solid black}}
|
{{Div col}}
|
{{Div col|style=column-rule: 1px solid black}}
|
Les modèles suivant permettent de choisir un nombre de colonnes supérieur ou égal à 3 :
| Méthode | Syntaxe |
|---|---|
{{Colonnes}}
|
{{Colonnes|nombre=3}}
|
{{Div col}}
|
{{Div col|cols=3}} ou {{Div col|3}}
|
Les modèles suivant permettent de choisir l'emplacement du saut de colonne :
| Méthode | Syntaxe |
|---|---|
{{ColG}} et {{ColD}}
|
ColG englobe le texte de la première colonne et ColD le texte de la seconde colonne. |
{{DeuxColonnes}}
|
{{DeuxColonnes}} doit être placé à l’emplacement du saut de colonne.
|
Synthèse des critères de choix modifier
Les critères de choix sont résumés dans le tableau ci-dessous.
| class=deuxcolonnes | {{Colonnes}}
|
{{Div col}}
|
{{ColG}}
|
{{Haut2Colonnes}}
| |
|---|---|---|---|---|---|
| Ligne séparatrice | Oui | Oui | Oui | Non | Non |
| Nombre de colonne dynamique | 2 colonnes | Oui | Oui | 2 colonnes | 2 colonnes |
| Emplacement du saut de colonne | Dynamique | Dynamique | Dynamique | Spécifié par l'utilisateur | Spécifié par l'utilisateur |
Fonctionnement technique des modèles modifier
Il existe différentes techniques en HTML pour afficher du texte en plusieurs colonnes :
- la propriété CSS column-count permet de répartir 1 bloc de texte en plusieurs colonnes divisées automatiquement ;
- on peut placer le texte dans des div flottants à gauche et à droite ;
- on peut répartir le texte dans plusieurs cellules d'un tableau.
| Première colonne. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. | Deuxième colonne. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. | Troisième colonne. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. |
Syntaxe modifier
Il existe plusieurs façons de construire des modèles pour la mise en page en colonne :
- on peut utiliser un modèle qui englobe le texte à diviser en plusieurs colonnes
{{Colonnes| TEXTE À RÉPARTIR SUR PLUSIEURS COLONNES }}
- on peut utiliser des modèles composés d'une partie à place en début du bloc, et une partie à place en fin du bloc
{{Div col}}
TEXTE À RÉPARTIR SUR PLUSIEURS COLONNES
{{Div col end}}
- il existe des modèles composés de trois parties : un début, un séparateur de colonne et un modèle de fin
{{Haut2Colonnes}}
DÉBUT DU TEXTE PARTAGÉ ENTRE DEUX COLONNES
{{DeuxColonnes}}
FIN DU TEXTE PARTAGÉ SUR DEUX COLONNES
{{Fin2Colonnes}}
| Technique HTML utilisée | column-count | div flottant | tableau |
|---|---|---|---|
| Classe | class=deuxcolonnes | ||
| Modèle qui englobe le texte | {{Colonnes}}
|
{{ColG}}
|
|
| Modèle en 2 parties | {{Div col}}
|
||
| Modèle en 3 parties | {{Haut2Colonnes}}
|
Implémentation modifier
Dans les schémas suivants : les rectangles correspondent à des colonnes de texte numérotées. Les colonnes blanches correspondent à l’espace Page:, les colonnes vertes à l'espace principal après transclusion.
Dans le cas où les colonnes se prolongent sur plusieurs pages, il faut vérifier que le texte soit homogène lors de la transclusion, plusieurs modèles de colonnes rajoutent un saut de ligne inexistant à chaque changement de page du fac-simile.
| class=deuxcolonnes | {{Colonnes}}
|
{{Div col}}
|
{{ColG}}
|
{{Haut2Colonnes}}
| ||
|---|---|---|---|---|---|---|
| Dans l'espace principal | 
|
Oui | Oui | Oui | ||
Page : 2 colonnes ; après transclusion : 2 colonnes modifier
En mode page, le texte se présente sous la forme de deux colonnes.
Après transclusion, la mise en page en 2 colonnes est conservée.
Exemple :
Avec {{Colonnes}}
modifier
| Code wiki |
|---|
{{Colonnes|TEXTE 1 et TEXTE 2|nombre=2}}
|
Avec {{Div col}}
modifier
| Code wiki |
|---|
{{Div col|2}}
TEXTE 1 et TEXTE 2
{{Div col end}}
|
Avec {{ColG}} et {{ColD}}
modifier
| Code wiki |
|---|
{{ColG|TEXTE 1}}
{{ColD|TEXTE 2}}
{{clr}}
|
Méthode recommandée : la classe CSS "deuxcolonnes" modifier
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor pharetra elit a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur, turpis ac ornare egestas, magna nisl pellentesque lacus, ut lacinia massa elit sit amet arcu. Curabitur non leo sit amet augue commodo volutpat. Nullam vitae nisi erat, eu placerat ante. Sed placerat pretium dui non facilisis. Vestibulum vitae lacus et tellus dignissim convallis. Donec pretium semper elementum. Praesent ultricies sagittis neque. Donec faucibus facilisis felis sed tincidunt.
- Ce modèle semble ne plus fonctionner dans l'espace principal. (au 28/05/2012)
- Cette méthode ne fonctionne que dans l'espace Page (voir common.css et l'espace de nom ns-104). (20/12/2019)
Le code CSS assurant cette fonction se trouve à la ligne 261 du common.css de Wikisource (MediaWiki:Common.css L-261).
Ancienne méthode : le modèle {{DeuxColonnes}}
modifier
Cete méthode est périmée ; elle ne permet pas de choisir dynamiquement le nombre de colonnes
Méthode inconnue : la classe CSS twocolumn modifier
à documenter
Modèle colonnes modifier
- Syntaxe :
{{colonnes|Texte}} - Exemple (avec nombre=3) :
Voir aussi modifier
- Catégorie:Modèles pour colonnes - catégorie qui recense les modèles pour colonnes.