Dividere il testo in colonne con HTML

Se per stile, o motivi grafici, vogliamo dividere la nostra pagina in due parti, ecco come fare. Il codice HTML è estremamente semplice. Si deve copiare questo qua sotto e incollare nella sezione HTML e quindi incollarci il testo sopra:

                         
<div style="float: left; text-align: justify; width: 47%;">
TESTO PRIMA COLONNA
</div>
<div style="float: right; text-align: justify; width: 47%;">
TESTO SECONDA COLONNA
</div>
<div style="clear: both;">
</div>

Prendiamo in considerazione questa simpatica poesia in onore ai vini e vediamo come possiamo formattarla:

             
UN GIORNO DI MARZEMINO,
ALL'ALBA, AL PRIMO CHIARETTO,
CAMMINAVO NELLA CHAMPAGNE
DELL'OLTREPO' PAVESE,
IN MEZZO AL NEBBIOLO.
IL TEMPO ERA UN INFERNO,
IL CIELO ERA VERDICCHIO
TENDENTE AL GRIGNOLINO.
MI RIPARAI SOTTO UN PINOT
E LI' INCONTRAI UNA SOAVE
E BRUNA DONNA FUGATA
CHE AVEVA UN VESTITO ROSE'.
NON ESSENDO RECIOTO,
TUTTO SPUMANTE
LE DIEDI UN DOLCETTO
BACIO SUL BIANCO COLLIO
E SENZA SFURZAT
LE TOCCAI LA BARBERA
DELLA BONARDA.
SUBITO IL MIO MERLOT,
CHE NON E' ANCORA PASSITO,
SI FECE DURELLO
CHE ERA UN CANNONAU.
MA LEI DISSE "SIATE PIU' NOBILE
E MENO PRIMITIVO !".
DELUSO E ROSSO DI BORGOGNA,
LE DISSI: "CHARDONNAY
MOI, MADAME !" E CON L'AMARONE
IN BOCCA E UN GROPPELLO
IN GOLA, MI ARRANGIAI DA SOLO
E SAUVIGNON DE BRUT
           


2 COLONNE

Come detto prima, vediamo come possiamo formattarla per le diverse esigenze:

UN GIORNO DI MARZEMINO,
ALL'ALBA, AL PRIMO CHIARETTO,
CAMMINAVO NELLA CHAMPAGNE
DELL'OLTREPO' PAVESE,
IN MEZZO AL NEBBIOLO.
IL TEMPO ERA UN INFERNO,
IL CIELO ERA VERDICCHIO
TENDENTE AL GRIGNOLINO.
MI RIPARAI SOTTO UN PINOT
E LI' INCONTRAI UNA SOAVE
E BRUNA DONNA FUGATA
CHE AVEVA UN VESTITO ROSE'.
NON ESSENDO RECIOTO,
TUTTO SPUMANTE
LE DIEDI UN DOLCETTO
BACIO SUL BIANCO COLLIO
E SENZA SFURZAT
LE TOCCAI LA BARBERA
DELLA BONARDA.
SUBITO IL MIO MERLOT,
CHE NON E' ANCORA PASSITO,
SI FECE DURELLO
CHE ERA UN CANNONAU.
MA LEI DISSE "SIATE PIU' NOBILE
E MENO PRIMITIVO !".
DELUSO E ROSSO DI BORGOGNA,
LE DISSI: "CHARDONNAY
MOI, MADAME !" E CON L'AMARONE
IN BOCCA E UN GROPPELLO
IN GOLA, MI ARRANGIAI DA SOLO
E SAUVIGNON DE BRUT













NOTA BENE: i valori scritti in rosso sono da modificare a seconda delle dimensioni della tua pagina (delle dimensioni del body)



3 COLONNE

Le due colonne sono semplici, vediamo come possiamo fare per dividere il testo in 3 colonne o 4. Dobbiamo fare ricorso ai codici CSS, se può anche usare il codice scritto sopra, ma rimane la suddivisione fatta male. Invece, con questo codice:


       
<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 PRIMA COLONNA</div>
<div id="col2">
<div style="float: left; width: 47%;">
TESTO SECONDA COLONNA</div>
<div style="float: right; width: 47%;">
TESTO TERZA COLONNA</div>
<div style="clear: both;">
</div>
</div>
       

Un giorno di marzemino,
all'alba, al primo chiaretto,
camminavo nella champagne
dell'oltrepo' pavese,
in mezzo al nebbiolo.
Il tempo era un inferno,
il cielo era verdicchio
tendente al grignolino.
Mi riparai sotto un pinot
e li' incontrai una soave
e bruna donna fugata
Che aveva un vestito rose'.
non essendo recioto,
tutto spumante
le diedi un dolcetto
bacio sul bianco collio
e senza sfurzat
le toccai la barbera
della bonarda.
Subito il mio merlot,
che non e' ancora passito,
si fece durello
che era un cannonau.
ma lei disse "siate piu' nobile
e meno primitivo !".
deluso e rosso di borgogna,
le dissi: "chardonnay
moi, madame !" e con l'amarone
in bocca e un groppello
in gola, mi arrangiai da solo
e sauvignon de brut



















4 COLONNE

Per la divisione in 4 colonne dobbiamo usare nuovamente i fogli di stile CSS. Il codice da utilizzare è il seguente:

             

<style type="text/css"> #col11 {
width: 330px;
float: left;
text-align:justify;
}
#col21 {
width: 330px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<div id="col11">
<div style="float: left; width: 50%;">
TESTO PRIMA COLONNA</div>
<div style="float: right; width: 50%;">
TESTO SECONDA COLONNA</div>
<div style="clear: both;">
</div>
</div>
<div id="col21">
<div style="float: left; width: 50%;">
TESTO TERZA COLONNA</div>
<div style="float: right; width: 50%;">
TESTO QUARTA COLONNA</div>
<div style="clear: both;">
</div>
</div>



Che diventa così:


Un giorno di marzemino,
all'alba, al primo chiaretto,
camminavo nella champagne
dell'oltrepo' pavese,
in mezzo al nebbiolo.
Il tempo era un inferno,
il cielo era verdicchio
tendente al grignolino.
Mi riparai sotto un pinot
e li' incontrai una soave
e bruna donna fugata
Che aveva un vestito rose'.
non essendo recioto,
tutto spumante
le diedi un dolcetto
bacio sul bianco collio
e senza sfurzat
le toccai la barbera
della bonarda.
Subito il mio merlot,
che non e' ancora passito,
si fece durello
che era un cannonau.
ma lei disse "siate piu' nobile
e meno primitivo !".
deluso e rosso di borgogna,
le dissi: "chardonnay
moi, madame !" e con l'amarone
in bocca e un groppello
in gola, mi arrangiai da solo
e sauvignon de brut






Detto questo, è tutto. I codici sono restano personalizzabili, si ci può aggiungere uno sfondo, modificarne le larghezze. Se avete dei dubbi scrivetemi. 

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...