Template:Div col

Da WikiAppunti.
Jump to navigation Jump to search

Il template {{Div col}} serve per impaginare delle liste in colonne, con l'opzione di specificare un carattere di formato minore. Il numero effettivo di colonne dipende dalla larghezza dello schermo.

Opera insieme al template {{Div col fine}}, che va posto alla fine della porzione di testo disposta su più colonne.

Si può creare un qualsiasi numero di colonne. Ogni colonna ha la stessa larghezza, equamente divisa in base allo spazio disponibile orizzontalmente.

Si consiglia vivamente di evitare i layout con oltre 3 colonne, per problemi di sovrapposizione delle stesse quando un utente ha impostato caratteri grandi di visualizzazione. Molte persone, affette da ipovedenza, per poter leggere sullo schermo sono costrette a visualizzare le pagine Web con dimensioni dei caratteri maggiori e, spesso, a basse risoluzioni (800×600 o al massimo 1024×768). L'adozione di queste configurazioni è incompatibile con un numero eccessivo di colonne in quanto si ottengono sovrapposizioni del testo su colonne adiacenti e, in certi casi, anche la comparsa della barra di scorrimento orizzontale per insufficiente larghezza della finestra.

Parametri[modifica sorgente]

  • cols: specifica colonne normali (predefinito) o più strette (inserendo strette o 3; la larghezza standard delle colonne è stabilita dalle classi colonne e colonne_strette definite in MediaWiki:Common.css (può anche essere il primo parametro senza nome).
  • dim: alternativo a cols, specifica manualmente la larghezza delle colonne (es. 200px o 15em).
  • small: se riempito con yes visualizza il testo in caratteri più piccoli (può anche essere il secondo parametro senza nome).

{{Div col
|cols = 
|dim = 
|small = yes
}}

Esempi[modifica sorgente]

Sintassi minima:
{{Div col}}
* a
* b
* c
* d
* e
{{Div col fine}}
  • a
  • b
  • c
  • d
  • e

{{Div col|cols=3|small=yes}}
* a
* b
* c
* d
* e
* f
{{Div col fine}}
  • a
  • b
  • c
  • d
  • e
  • f

{{Div col|dim=100px}}
* a
* b
* c
* d
* e
* f
{{Div col end}}
  • a
  • b
  • c
  • d
  • e
  • f


Personalizzazione[modifica sorgente]

Gli utenti registrati, nel proprio foglio di stile, possono cambiare la larghezza di default delle colonne inserendo questi codici con un numero di "em" diverso:

.colonne {
 -moz-column-width:30em;
 -webkit-column-width:30em;
 column-width:30em;
}
.colonne_strette {
 -moz-column-width:20em;
 -webkit-column-width:20em;
 column-width:20em;
}

Template correlati[modifica sorgente]

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;
  • è possibile personalizzare per utente la larghezza standard delle colonne.