Pillole CSS: come realizzare un layout fisso a due colonne?
Con l’introduzione dei framework CSS come 960gs, o Blueprint, realizzare layout con CSS è diventato davvero semplice. L’unica pecca che affligge questi framework è anche il loro punto di forza: nascondere le implementazioni all’utente, permettendo di realizzare layout complessi utilizzando la giusta combinazione di classi CSS.
Per un professionista però è importante capire quali sono i concetti fondamentali per la costruzione dei layout. Oggi vedremo uno dei metodi per realizzare un layout fisso.
Cos’è un layout fisso?
Un layout si dice fisso quando tutti gli elementi che lo compongono hanno una larghezza fissata a priori. Di solito l’unità di misura utilizzata per definire un layout fisso è il pixel (px). I layout fissi si oppongono ai layout “fluidi o liquidi”, in cui le larghezze dei vari componenti sono definite utilizzando le percentuali (%), permettendo al layout di “adattarsi” alla finestra che lo contiene.
Più strade portano allo stesso risultato
Ci sono molti modi per realizzare un layout fisso: utilizzando il posizionamento assoluto, ad esempio, oppure i margini negativi. In questo esempio utilizzerò i float, per il semplice motivo che è il metodo più semplice e flessibile.
Layout, ovvero organizzare il contenuto, non l’aspetto
Quando si realizza un layout (X)HTML + CSS molto spesso si fa l’errore di pensare prima all’aspetto visivo (“Quante colonne? Di che colore? Che font uso?”) piuttosto che al contenuto. La fretta di giungere ad un risultato “visivamente corretto” porta all’introduzione di molto markup aggiuntivo e inutile. Partendo dal contenuto, invece, si aggiungono man mano gli elementi necessari, garantendo la massima semplicità.
Immaginiamo di voler realizzare una pagina per una ricetta. La prima domanda che devi porti è: “Quali sono gli elementi di cui ho bisogno?”. Una ricetta è composta fondamentalmente di due parti: un elenco con gli ingredienti necessari, e le istruzioni di realizzazione. Quindi, in (X)HTML, verrebbero resi così:
<h2>Istruzioni</h2> <p>Introduzione...</p> <ol> <li>Istruzione 1</li> <li>Istruzione 2</li> .... </ol> <h2>Ingredienti</h2> <ul> <li>Ingrediente 1</li> <li>Ingrediente 2</li> <li>Ingrediente 3</li> ... </ul>
Le istruzioni vengono rese tramite una lista ordinata, mentre gli ingredienti utilizzano una lista non ordinata. Aggiungiamo un titolo alla pagina, una nota di copyright e il DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Le ricette di Valy</title>
</head>
<body>
<h1>Titolo del mio sito</h1>
<h2>Istruzioni</h2>
<p>Introduzione...</p>
<ol>
<li>Istruzione 1</li>
<li>Istruzione 2</li>
....
</ol>
<h2>Ingredienti</h2>
<ul>
<li>Ingrediente 1</li>
<li>Ingrediente 2</li>
<li>Ingrediente 3</li>
...
</ul>
<p>Copyright ©2010 Il mio sito originale</p>
</body>
</html>
Come puoi vedere nell’esempio la pagina ha senso anche senza nessuno stile applicato.
Realizzare il layout
Ora che abbiamo definito i componenti base del nostro layout, possiamo passare all’aspetto visivo. È bene sempre avere un’idea di massima di ciò che si vuole realizzare, quindi prepariamo uno “schema guida” o wireframe, come questo:
Quindi vogliamo che la larghezza totale sia di 1000 pixel: le sezioni “titolo” e “footer” si estenderanno per tutta la lunghezza, mentre il contenuto principale e quello secondario avranno una larghezza di 617 pixel e 383 pixel, rispettivamente. (Se sei curioso di sapere perché ho scelto questi numeri, ti consiglio di leggere “La sezione aurea” su Wikipedia)
Il primo passo verso la costruzione del layout è quello di racchiudere i vari elementi in “div” creando quindi delle sezioni semanticamente significative:
...
<body>
<div id="testata">
<h1>Titolo del mio sito</h1>
</div>
<div id="ricetta">
<h2>Istruzioni</h2>
<p>Introduzione...</p>
<ol>
<li>Istruzione 1</li>
<li>Istruzione 2</li>
....
</ol>
</div>
<div id="ingredienti">
<h2>Ingredienti</h2>
<ul>
<li>Ingrediente 1</li>
<li>Ingrediente 2</li>
<li>Ingrediente 3</li>
...
</ul>
</div>
<div id="note_legali">
<p>Copyright ©2010 Il mio sito originale</p>
</div>
</body>
...
Abbiamo quindi aggiunto i “div” con ID “testata, ricetta, ingredienti e note_legali”. Questo è markup semantico: infatti tali nomi riescono a dare il senso del possibile contenuto del tag molto meglio di “sopra, destra, sinistra, sotto”, riuscendo quindi a separare completamente l’aspetto visivo dal codice HTML.
Una volta completato il markup della nostra pagina, è tempo di lavorare con i CSS. Apri dunque un nuovo file nel tuo editor preferito e salvalo come “stile.css”. Come specificato nel wireframe, dobbiamo fissare una larghezza di 1000 pixel per il nostro layout e centrarlo :
body {
margin: 0 auto;
width:1000px;
}
Aggiungiamo poi un piccolo bordo al div “testata” e “note_legali”, per separare visivamente le due sezioni:
...
#testata {
border-bottom: 1px solid #000;
}
#note_legali {
border-top: 1px solid #000;
}
...
Ecco il nostro risultato intermedio. Ora non ci resta che realizzare le sezioni “ricetta” e “ingredienti” e, come detto precedentemente, utilizzeremo i float per affiancare i due elementi. Una volta definite le dimensioni, “flottiamo” a sinistra il div “ingredienti”, e a destra il div “ricetta”:
...
#ricetta {
float: right;
width: 617px;
}
#ingredienti {
float: left;
width: 383px;
}
...
Quando si utilizza il float, gli elementi vengono esclusi dal normale flusso della pagina: per ripristinarlo, bisogna applicare la proprietà “clear” ad un elemento che segue gli elementi flottati. Nel nostro esempio, il div “note_legali” è un perfetto candidato:
...
#note_legali {
border-top: 1px solid #000;
clear:both;
}
...
Con queste semplici regole CSS abbiamo realizzato un layout fisso a due colonne, con codice valido e semantico: qui puoi vedere il risultato finale.
E se volessi invertire le due colonne?
Dato che non abbiamo utilizzato markup presentazionale, per scambiare le due colonne é sufficiente invertire le direzioni del float dei due elementi “ricetta” e “ingredienti”, in questo modo:
...
#ricetta {
float: left;
width: 617px;
}
#ingredienti {
float: right;
width: 383px;
}
...
Se avessimo utilizzato ID come “destra” e “sinistra”, invece avremmo dovuto modificare anche il codice (X)HTML per riflettere i cambiamenti all’aspetto presentazionale della nostra pagina.
Conclusioni
In questo articolo abbiamo visto come realizzare un layout fisso a due colonne di base. Nella prossima “pillola” lo estenderemo al caso di tre colonne, e faremo alcune considerazioni sull’uso dei margini e del padding laterali. Alla prossima!
L'autore
14 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
gran bel post, e ottimo il ricordare che si possono opporre i float
Grazie iteand,
infatti è pratica comune flottare tutto solo a sinistra (o a destra, a seconda del linguaggio).
Io preferisco opporre i float perché si crea automaticamente lo spazio fra i due elementi (non nell’esempio dove ho messo di proposito delle misure precise) ed è possibile inserire il contenuto principale per primo nel markup.
Ottimo articolo… non ho capito bene la parte della “Sezione Aurea”. Ne avevo sentito parlare, perchè non è nuova come parola, ma non ho capito bene… su wikipedia c’è solo una lista interminabile di formule matematiche ed è difficile riuscire a centrare il succo.
Ma poi, tu e Sara vi siete messi d’accordo?
Prima Sara scrive l’articolo dei siti di pasticceria, con dolci e cioccolate varie… tu fai l’esempio con il ciambellone… :D
Ciao Antonio,
ho linkato wikipedia perché la matematica è una mia grande passione e mi fa sempre piacere diffonderla.
In parole (molto) povere, la sezione aurea è un rapporto tra due lunghezze, il cui valore approssimato è 1.618, numero che in matematica si chiama phi.
Questo rapporto è molto importante, perché presente in natura: in pratica è stato notato che facendo i rapporti tra varie lunghezze in natura il risultato era sempre questo numero, phi. (prova a misurare la distanza tra il tuo gomito e il polso, e dal polso alla punta delle dita, e poi fai il rapporto)
Tale rapporto è molto utilizzato nella stampa, in architettura e in molti altri campi, proprio perché da una sensazione di equilibrio.
Questo è il “succo”, poi io posso continuare sulla parte matematica, ma non sulle applicazioni :D
Per quanto riguarda il ciambellone, all’assaggio mi ha ispirato, e mi sono fatto dare la ricetta dalla mia fidanzata per condividerla con tutti i lettori di YIW :)
ah ecco, ora ho capito… leggendo tutte quelle formule (io adoro la matematica, ma ai tempi delle superiori ne ho fatta davvero poca e non perchè ne facevo poca io, ma perchè la professoressa non c’era mai), non avevo afferrato bene il concetto e il perchè l’esistenza di tutto questo. Grazie per la spiegazione, basta poco per capire :D
E’ la prima volta che leggo un articolo di YIW e non imparo nulla di nuovo, e questo mi rende immensamente felice, così come rende curioso il fatto che tu abbia scelto la sezione aurea come rapporto tra i lati.
Sinceramente sono un patito di questo numero, ci ho letto un libro intero, e nel design effettivamente ne avevo già sentito parlare su Smashing magazine in un articolo che proponeva interessanti collegamenti tra matematica e design.. in realtà non ho mai provato ad usarlo, ma il tuo risultato, almeno da un punto di vista di proporzioni, è interessante! Chissà che il rapporto di Dio on sbaragli il 960 grid!
Ciao Famba, significa che stai crescendo (professionalmente parlando ;) )
Per quanto riguarda le proporzioni, un approccio non esclude l’altro, mi spiego: seguire la griglia ti permette di dare un ritmo costante ai vari elementi.
Se un determinato componente della pagina necessita di particolare attenzione da parte dell’utente, puoi utilizzare questa divisione asimmetrica, frutto della sezione aurea.
Credo che, come in tutte le cose, ci voglia equilibrio :)
Ottimo articolo.. ma ho sempre qualche difficoltà a reperire poi l’articolo successivo..
L’autore ha scritto alla fine:
Nella prossima “pillola” lo estenderemo al caso di tre colonne, e faremo alcune considerazioni sull’uso dei margini e del padding laterali. Alla prossima!
Dov’è il caso di tre colonne ?
Grazie :)
ciao francesco, purtroppo just ha avuto dei problemi personali che gli impediscono in questo periodo di utilizzare la rete.
ti rispondo io per lui, qui puoi puoi trovare il successivo articolo riguardante la realizzazione di un layout a tre colonne.
Grazie.. siete sempre molto disponibili :)
Non posso che confermare questo sito come uno il preferito dei miei preferiti..
…e per noi questo è un onore, grazie!
il post che mi serviva grazie!
però c’è qualcosa che mi sballa quando cerco di mettere uno sfondo a queste colonne che devono camminare insieme nel senso dell’altezza. la colonna di sinistra ha un colore e quella di destra un’altro.
ho realizzato un div che contiene le due colonne come da tutorial qui esposto ed ho assegnato un’immagine di sfondo così che le due colonne vengono colorate da questo div che camminando mi riproduce l’immagine…e fin qui tutto ok.
ma non riesco a capire, nonostante le mille prove, perchè se metto un’altezza 100% a questo div che contiene l’immagine non si vede quest’ultima riprodotta, mentre se assegno un’altezza tipo 600px allora funziona.
Ma se ho un elemento div che si espande dentro e la pagina e va oltre questa misura non funziona più niente perchè lo sfondo rimane fisso alla dimensione fissata.
non so se sono stata chiara ma potete darmi qualche consiglio a riguardo. grazie mille per i tutorial che fate!
Buongiorno,
una domanda: se provo ad inserire successivamente al titolo (quindi al posto dell’elenco puntato) i due riquadri risultano sfalsati di una riga, ossia, i “titoli” dei due riquadri non giacciono sulla stessa riga. Come posso evitare questo?
grazie
Buongiorno,
molto utile!!
Una domanda: se provo ad inserire successivamente al titolo (quindi al posto dell’elenco puntato) un (in entrambe le colonne), i due risultano sfalsati di una riga, ossia, i “titoli” dei due riquadri non giacciono sulla stessa riga. Come posso evitare questo?
grazie