Template:Colonne/man
Il template {{Colonne}} serve per dividere il contenuto della pagina in colonne autoadattanti. Le colonne si distribuiscono in orizzontale finché hanno spazio a disposizione, poi scendono in verticale man mano che la finestra o lo schermo si restringe. A differenza del template {{Div col}}, si specifica manualmente il contenuto di ogni colonna affinché sia al suo interno indivisibile.
Sintassi
[cange 'a sorgende]{{Colonne}}
Questo testo appare nella prima colonna.
{{Colonne spezza}}
Questo testo appare nella seconda colonna.
{{Colonne spezza}}
Questo testo appare nella terza colonna.
{{Colonne fine}}
- Risultato
Questo testo appare nella prima colonna.
Questo testo appare nella seconda colonna.
Questo testo appare nella terza colonna.
Si può avere qualsiasi numero di colonne. Ogni colonna cerca di disporsi orizzontalmente in base allo spazio disponibile, e ha un piccolo stacco di 20 pixel sulla destra per prevenire il contatto con il testo della colonna successiva. Se non c'è abbastanza spazio orizzontale, le colonne sfilano man mano in verticale con un'andata a capo.
Attenzione: quando lo schermo è troppo piccolo, il template rinuncia automaticamente a distribuire le colonne in orizzontale per evitare di accalcare il testo.
Parametri
[cange 'a sorgende]Ci sono due parametri opzionali, valorizzabili con o senza nome.
- Primo parametro o "width": larghezza totale dell'insieme delle colonne. Può essere un valore assoluto (in centimetri, pollici, pixel, em, ecc., ad esempio
12cm) o relativo (in percentuale) rispetto alla larghezza della pagina (ad esempio50%). - Secondo parametro o "css": stili HTML aggiuntivi (ad esempio
background-color:...).
Esempi di utilizzo
[cange 'a sorgende]Normale
[cange 'a sorgende]Per creare una sezione multi-colonna in una pagina (in questo esempio, una lista di nomi propri) in cui lo spazio disponibile è del 100%, inserire le seguenti righe:
{{Colonne}}
*Andrea
*Antonio
*Bruno
*Carlo
{{Colonne spezza}}
*Francesco
*Giuseppe
*Marco
*Paola
{{Colonne spezza}}
*Roberto
*Sabrina
*Salvatore
*Silvia
{{Colonne fine}}
- Risultato
- Andrea
- Antonio
- Bruno
- Carlo
- Francesco
- Giuseppe
- Marco
- Paola
- Roberto
- Sabrina
- Salvatore
- Silvia
Larghezze differenti
[cange 'a sorgende]Per creare una sezione multi-colonna in una pagina in cui lo spazio disponibile è solo del 50%, inserire le seguenti righe:
{{Colonne|50%}}
Questo testo appare nella prima colonna.
{{Colonne spezza}}
Questo testo appare nella seconda colonna.
{{Colonne spezza}}
Questo testo appare nella terza colonna.
{{Colonne fine}}
- Risultato
Questo testo appare nella prima colonna.
Questo testo appare nella seconda colonna.
Questo testo appare nella terza colonna.
Allineamento del testo
[cange 'a sorgende]Il testo delle colonne è allineato di default a sinistra. Per modificarne l'allineamento, compilare il parametro css con text-align impostato su center oppure su right, così:
{{Colonne|css=text-align:right}}
Questo testo appare nella prima colonna.
{{Colonne spezza}}
Questo testo appare nella seconda colonna.
{{Colonne spezza}}
Questo testo appare nella terza colonna.
{{Colonne fine}}
- Risultato
Questo testo appare nella prima colonna.
Questo testo appare nella seconda colonna.
Questo testo appare nella terza colonna.
Elenchi numerati
[cange 'a sorgende]Per spezzare su più colonne un elenco numerato mantenendo intatta la numerazione si deve ricorrere a un piccolo espediente: nelle colonne successive alla prima bisogna "forzare" il primo valore (<li value=X>) e poi usare il tag HTML <li> al posto di #. Ovviamente si ha l'aggiornamento automatico della numerazione con l'inserimento di nuovi elementi nell'elenco.
{{Colonne}}
# A
# B
# C
# D
{{Colonne spezza}}
<ol>
<li value=5> E </li>
<li> F </li>
<li> G </li>
<li> H </li>
</ol>
{{Colonne spezza}}
<ol>
<li value=9> I </li>
<li> L </li>
<li> M </li>
<li> N </li>
</ol>
{{Colonne fine}}
- Risultato
- A
- B
- C
- D
- E
- F
- G
- H
- I
- L
- M
- N
Template correlati
[cange 'a sorgende]| Template | Vantaggi | Svantaggi |
|---|---|---|
| {{colonne}} |
|
|
| {{div col}} |
|
|