Editor, Editors, USER, admin, Bureaucrats, Check users, dev, editor, Interface administrators, lookupuser, oversight, push-subscription-manager, Suppressors, Administrators, translator, widgeteditor
17,894
edits
Changes
Created page with "<includeonly><templatestyles src="Colonne/styles.css" /><!-- --><div class="responsive-columns" style="{{#if:{{{width|{{{1|}}}}}}|width:{{{width|{{{1|}}}}}};}} {{{css|{{{2|}}}..."
<includeonly><templatestyles src="Colonne/styles.css" /><!--
--><div class="responsive-columns" style="{{#if:{{{width|{{{1|}}}}}}|width:{{{width|{{{1|}}}}}};}} {{{css|{{{2|}}}}}}">
<div></includeonly><noinclude>
Il template {{tl|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 {{tl|Div col}}, si specifica manualmente il contenuto di ogni colonna affinché sia al suo interno indivisibile.
==Sintassi==
<pre>
{{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}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}</div>
Si può avere qualsiasi numero di colonne (ma è bene non esagerare). 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===
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 <code>12cm</code>) o relativo (in percentuale) rispetto alla larghezza della pagina (ad esempio <code>50%</code>).
*Secondo parametro o "css": stili HTML aggiuntivi (ad esempio <code>background-color:...</code>).
==Esempi di utilizzo==
=== Normale ===
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:
<pre>
{{Colonne}}
*Andrea
*Antonio
*Bruno
*Carlo
{{Colonne spezza}}
*Francesco
*Giuseppe
*Marco
*Paola
{{Colonne spezza}}
*Roberto
*Sabrina
*Salvatore
*Silvia
{{Colonne fine}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{Colonne}}
*Andrea
*Antonio
*Bruno
*Carlo
{{Colonne spezza}}
*Francesco
*Giuseppe
*Marco
*Paola
{{Colonne spezza}}
*Roberto
*Sabrina
*Salvatore
*Silvia
{{Colonne fine}}
</div>
=== Larghezze differenti ===
Per creare una sezione multi-colonna in una pagina in cui lo spazio disponibile è solo del 50%, inserire le seguenti righe:
<pre>
{{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}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}
</div>
=== Allineamento del testo ===
Il testo delle colonne è allineato di default a sinistra. Per modificarne l'allineamento, compilare il parametro <code>css</code> con <code>text-align</code> impostato su <code>center</code> oppure su <code>right</code>, così:
<pre>
{{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}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}
</div>
=== Elenchi numerati ===
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 (<code><li value=''X''></code>) e poi usare il tag HTML <code><nowiki><li></nowiki></code> al posto di <code>#</code>. Ovviamente si ha l'aggiornamento automatico della numerazione con l'inserimento di nuovi elementi nell'elenco.
<pre>
{{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}}
</pre>
; Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}
</div>
==Template correlati==
*[[Template:Div col]]
*[[Template:Div col end]]
{{Colonne/man/confronto div col}}
{{TDT}}
[[Category:Template di layout]]
</noinclude>
--><div class="responsive-columns" style="{{#if:{{{width|{{{1|}}}}}}|width:{{{width|{{{1|}}}}}};}} {{{css|{{{2|}}}}}}">
<div></includeonly><noinclude>
Il template {{tl|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 {{tl|Div col}}, si specifica manualmente il contenuto di ogni colonna affinché sia al suo interno indivisibile.
==Sintassi==
<pre>
{{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}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}</div>
Si può avere qualsiasi numero di colonne (ma è bene non esagerare). 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===
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 <code>12cm</code>) o relativo (in percentuale) rispetto alla larghezza della pagina (ad esempio <code>50%</code>).
*Secondo parametro o "css": stili HTML aggiuntivi (ad esempio <code>background-color:...</code>).
==Esempi di utilizzo==
=== Normale ===
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:
<pre>
{{Colonne}}
*Andrea
*Antonio
*Bruno
*Carlo
{{Colonne spezza}}
*Francesco
*Giuseppe
*Marco
*Paola
{{Colonne spezza}}
*Roberto
*Sabrina
*Salvatore
*Silvia
{{Colonne fine}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{Colonne}}
*Andrea
*Antonio
*Bruno
*Carlo
{{Colonne spezza}}
*Francesco
*Giuseppe
*Marco
*Paola
{{Colonne spezza}}
*Roberto
*Sabrina
*Salvatore
*Silvia
{{Colonne fine}}
</div>
=== Larghezze differenti ===
Per creare una sezione multi-colonna in una pagina in cui lo spazio disponibile è solo del 50%, inserire le seguenti righe:
<pre>
{{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}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}
</div>
=== Allineamento del testo ===
Il testo delle colonne è allineato di default a sinistra. Per modificarne l'allineamento, compilare il parametro <code>css</code> con <code>text-align</code> impostato su <code>center</code> oppure su <code>right</code>, così:
<pre>
{{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}}
</pre>
;Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}
</div>
=== Elenchi numerati ===
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 (<code><li value=''X''></code>) e poi usare il tag HTML <code><nowiki><li></nowiki></code> al posto di <code>#</code>. Ovviamente si ha l'aggiornamento automatico della numerazione con l'inserimento di nuovi elementi nell'elenco.
<pre>
{{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}}
</pre>
; Risultato
<div style="padding:0.5em 1em; border:1px dotted gray; background:#EFE; font-size:90%">
{{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}}
</div>
==Template correlati==
*[[Template:Div col]]
*[[Template:Div col end]]
{{Colonne/man/confronto div col}}
{{TDT}}
[[Category:Template di layout]]
</noinclude>