Template:Colonne

---

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.

{{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

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.

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 esempio 50%).
• Secondo parametro o "css": stili HTML aggiuntivi (ad esempio background-color:...).

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

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

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

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

• Template:Colonne spezza
• Template:Colonne fine
• Template:Div col
• Template:Div col end

Template	Vantaggi	Svantaggi
{{colonne}}	Permette di decidere il punto esatto in cui inizia la colonna successiva; dà un aspetto omogeneo anche con i browser più vecchi; permette di utilizzare anche solo parzialmente la larghezza dello schermo.	Utilizza le tabelle; occorre ricalibrare manualmente le colonne quando si aggiungono o rimuovono elementi in una lista; occorre fare qualche magia - <ol start="numero ultimo elemento colonna precedente + 1"> - per gestire gli elenchi numerati; ha problemi di sovrapposizione quando ci sono immagini o sinottici a destra.
{{div col}}	Il numero di colonne è automatico e si adatta alla larghezza dello schermo; utilizza i CSS e non le tabelle; funziona correttamente con i browser basati su WebKit (Safari, Chrome…), Gecko (Firefox…), Presto (Opera) e Trident (solamente a partire da Internet Explorer 10); nei browser che non lo supportano le colonne sono ignorate, ma non è compromessa la leggibilità; non ha problemi di sovrapposizione con le immagini flottanti; il contenuto si ridispone automaticamente quando si aggiungono nuovi elementi; non ha problemi né con gli elenchi puntati né con quelli numerati; gli utenti possono personalizzare la larghezza standard delle colonne.	Utilizza attributi CSS non ancora ratificati; non funziona con le versioni di Internet Explorer (basato su Trident) precedenti alla 10; non è possibile spezzare una colonna a piacimento.