Pubblicato il 11/11/15e aggiornato il

Come suddividere il testo di un articolo in 2, 3 o 4 colonne.

Come mostrare un testo incolonnato e giustificato in un articolo o in una pagina web utilizzando il CSS.
La presentazione di un testo di un articolo divisa in colonne era una esigenza assoluta fino a qualche decennio fa. Il formato dei giornali era infatti del tipo lenzuolo e per facilitare la lettura gli articoli dovevano essere necessariamente suddivisi in colonne. Anche il layout della prima pagina con molte colonne permetteva l'inserimento di più titoli. Con l'avvento dei tabloid le colonne sono diminuite di numero ma sono rimaste e solo con i quotidiani online questa grafica non sembra più così essenziale.

Un'altra particolarità dei quotidiani è quella della giustificazione del testo. Si tratta di mostrare le varie colonne di testo allineate a destra oltre che a sinistra. Si può introdurre la giustificazione usando l'apposita icona nell'Editor oppure con i CSS utilizzando il tag text-align:justify;. Consiglio di utilizzare la giustificazione anche nei blog meno curati perché questa scelta grafica dà una impressione di professionalità a tutto il sito.

testo-giustificato
In questo post vedremo come pubblicare articoli suddivisi in colonne e con testo giustificato.

COME PUBBLICARE UN ARTICOLO SU DUE COLONNE


Per pubblicare un post su due colonne su Blogger dovremo aprire l'Editor e andare in Modalità HTML quindi utilizzare una struttura di codice come questa

<div style="float: left; text-align: justify; width: 47%;">
Testo o codice della prima colonna</div>
<div style="float: right; text-align: justify; width: 47%;">
Testo o codice della seconda colonna
</div>
<div style="clear: both;">
</div>

a cui si deve aggiungere il testo delle due colonne anche formattato e pure con l'aggiunta di immagini. Ho usato una percentuale del 47% per lasciare uno spazio tra le due colonne. Si può variare questa percentuale per avvicinare o allontanare le colonne. Il risultato sarà simile a questo

testo-diviso-colonne


COME PUBBLICARE UN ARTICOLO SU TRE COLONNE


Il codice da usare quando si vuole pubblicare un articolo su tre colonne invece è questo

<style type="text/css">
#col1 {
width: 260px;
float: left;
text-align:justify;
}
#col2 {
width: 600px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<div id="col1">
Testo o codice della prima colonna
</div>
<div id="col2">
<div style="float: left; width: 47%;">
Testo o codice della seconda colonna
</div>
<div style="float: right; width: 47%;">
Testo o codice della terza colonna
</div>
<div style="clear: both;">
</div>
</div>

Dove ci sono due divisioni. La prima ci permette di dividere il post in una colonna di 260 pixel e una di 600 pixel. La seconda colonna poi viene suddivisa in due parti utilizzando il codice precedente. L'utilizzo di un codice come questo porta al seguente risultato

testo-tre-colonne

Naturalmente le larghezze sono puramente indicative e possono essere adattate al layout della pagina.

COME PUBBLICARE UN ARTICOLO DIVISO IN 4 COLONNE


In linea di massima credo che tre colonne sia la suddivisione massima per un articolo online. Se volessimo optare per quattro colonne potremmo comunque usare questo codice

<style type="text/css">
#col11 {
width: 430px;
float: left;
text-align:justify;
}
#col21 {
width: 430px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<<div id="col11">
<div style="float: left; width: 47%;">
Testo o codice della prima colonna
</div>
<div style="float: right; width: 47%;">
Testo o codice della seconda colonna
</div>
<div style="clear: both;">
</div>
</div>
<div id="col21">
<div style="float: left; width: 47%;">
Testo o codice della terza colonna
</div>
<div style="float: right; width: 47%;">
Testo o codice della quarta colonna
</div>
<div style="clear: both;">
</div>
</div>

che porta a questo risultato

articolo-suddiviso-colonne

Come in precedenza le percentuali e le misure possono essere modificate. Per rendere il layout del sito ancora più simile a quello di un quotidiano si possono aggiungere al titolo occhiello e cappello.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.