Recentemente, tecniche come quelle dei Float: teoria e pratica e dei Layout con margini negativi e soprattutto quella denominata Any Order Columns, hanno portato i layout CSS a nuovi livelli di sviluppo finora impensabili.
Ho così pensato di introdurre questi nuovi modi di fare layout attraverso quella che è stata quasi una sfida personale: realizzare il maggior numero possibile di layout. La quantità non è stata l'unico obbiettivo che mi sono posto nel realizzare i molti esempi di questa serie di articoli. Ciascuno di essi infatti:
- usa lo stesso markup di base;
- usa un layout che non impone vincoli sulla lunghezza relativa delle colonne;
- ha un CSS semplice e logico che non usa hack o workaround;
- ha un'ottima compatibilità: sono stati tutti testati con successo su IE5, IE5.5, IE6, Opera 8.5, Firefox 1.6 e Safari.
Sono risultati circa 35 layout che presenterò in questa serie di articoli. Assolutamente non si tratta di tutti i possibili layout generabili dallo stesso markup, ma sono senz'altro una parte molto significativa, utile alla comprensione delle tecniche qui esposte (margini negativi e in alcuni casi float opposti), che può costituire un solido punto di partenza per i vostri progetti futuri nel momento in cui vorrete disporre di un layout di base già pronto.
La varietà dei layout è quasi impressionante: si tratta infatti di layout a due e tre colonne, liquidi o fissi, con colonne percentuali o a larghezza fissa e soprattutto con diverse disposizioni orizzontali delle colonne. Nella realizzazione non ho utilizzato grafica, ma per ciascuno di essi è possibile adottare facilmente la tecnica delle false colonne e delle Layout liquido a 2 colonne con i CSS.
Per la fase di test mi sono servito di un piccolo script che mi è venuto molto utile, ovvero il filler text a richiesta che ho presentato sul blog. Ho pensato di lasciarlo negli esempi così che possiate testarli variando la lunghezza relativa delle colonne. Ma ora non indugiamo oltre e procediamo con il codice.
Il markup di base
Prima di procedere con CSS ed esempi, diamo uno sguardo al markup che verrà usato per tutti i layout. Essenzialmente si tratta di un markup adatto per siti con cinque sezioni portanti: header, contenuti principali, navigazione, sezione aggiuntiva (per esempio per una navigazione secondaria, link, sponsor eccetera), footer. Ecco il codice HTML di base:
<div id="container">
<div id="header">Header</div>
<div id="wrapper">
<div id="content">Contenuto</div>
</div>
<div id="navigation">Navigazione</div>
<div id="extra">Sezione extra</div>
<div id="footer">Footer</div>
</div>
Da notare il contenitore aggiuntivo (con id="wrapper") per la sezione dei contenuti principali: sebbene in alcuni esempi il suo uso sia superfluo, nella maggiorparte dei casi ci consente molta flessibilità e semplicità del CSS.
Layout liquidi tre con colonne in percentuale
Apriamo la serie con i layout liquidi con tre colonne percentuali. Sebbene ci siano molti modi per realizzare layout di questo tipo, ho pensato di utilizzare i margini negativi così da introdurre una delle tecniche più usatae nell'intera serie di esempi.
Ecco il primo esempio: la colonna dei contenuti è quella centrale, la navigazione si trova a sinistra e la colonna supplementare a destra. Le due colonne laterali sono larghe il 25% della pagina.
Per quanto riguarda il CSS, ho disposto principalmente due sezioni: una per tipografia e colori (comune a tutti i layout utilizzati) e una dedicata espressamente al layout. Ci concentreremo ovviamente su quest'ultima, che nel caso dell'esempio risulta:
div#wrapper{float:left; width:100%}
div#content{margin: 0 25%}
div#navigation{float:left; width:25%; margin-left:-100%}
div#extra{float:left; width:25%; margin-left:-25%}
div#footer{clear:left; width:100%}
Il wrapper, ovvero il contenitore aggiuntivo per i contenuti, viene reso float a sinistra e con una larghezza pari al 100%, cioè tutta la larghezza del viewport: il contenuto effettivo verrà infatti regolato con i margini pari alla larghezza delle due colonne laterali. Renderlo float ci consente di poter affiancare altri elementi grazie ai margini negativi.
La navigazione infatti si dovrebbe disporre oltre il lato destro della finestra, ma rendendola float:left e traslandola del 100% verso sinistra con i margini negativi la sistemeremo sul lato sinistro dei contenuti.
I margini negativi vengono usati anche per la colonna extra, che non subirà l'effetto del float della navigazione ma solo quello del wrapper: basterà quindi verso sinistra con un margin-left: -25%, valore che corrisponde alla sua larghezza.
Infine il footer avrà il clear:left impostato così da evitare che una delle tre colonne ci finisca sopra. La dichiarazione sulla larghezza al 100% potrebbe sembrare totalmente ininfluente, ma è necessaria per evitare un problema di resa su IE; negli altri browser ovviamente non ha nessun effetto. Il nostro esempio è così ultimato. Il CSS è molto semplice e breve: tutto sta nel capire l'uso dei margini negativi.
Il secondo esempio è molto simile a quello appena visto, solo che le due colonne laterali sono scambiate di posto. Per ottenere l'effetto è bastato invertire nel CSS i margini per la navigazione e la colonna aggiuntiva:
div#wrapper{float:left; width:100%}
div#content{margin: 0 25%}
div#navigation{float:left; width:25%; margin-left:-25%}
div#extra{float:left; width:25%; margin-left:-100%}
div#footer{clear:left; width:100%}
Con il terzo esempio iniziamo a vedere layout liquidi a tre colonne percentuali in cui la colonna dei contenuti non è disposta centralmente. Nonostante la differente disposizione delle colonne, la costruzione è molto simile a quella dei due esempi precedenti. Ecco il CSS per il layout:
div#wrapper{float:left; width:100%}
div#content{margin-right: 50%}
div#navigation{float:left; width:25%; margin-left:-50%}
div#extra{float:left; width:25%; margin-left:-25%}
div#footer{clear:left; width:100%}
Anche in questo caso infatti il wrapper è reso float a sinistra con larghezza 100%. Al div dei contenuti viene assegnato un margine del 50% per creare spazio per le colonne secondarie: queste ultime sono infine traslate rispettivamente del 50% e del 25% verso sinistra.
In maniera analoga si ottiene il quarto esempio, in cui vengono solo scambiati i margini dei div per la navigazione e la sezione aggiuntiva.
Nel quinto esempio la colonna dei contenuti occupa la metà destra del viewport. Potrà sembrare strano, ma anche qui i div con id #wrapper, #navigation e #extra sono tutti e tre resi float a sinistra, e sistemati con l'aiuto dei margini negativi. Ecco il CSS:
div#wrapper{float:left; width:100%}
div#content{margin-left: 50%}
div#navigation{float:left; width:25%; margin-left:-100%}
div#extra{float:left; width:25%; margin-left:-75%}
div#footer{clear:left; width:100%}
Arriviamo così all'ultimo esempio dei layout liquidi con colonne percentuali, concludendo così tutte le possibili disposizioni delle tre sezioni verticali. Partendo dall'esempio precedente è bastato scambiare i margini delle due colonne secondarie.
Riepiloghiamo quindi i sei layout liquidi con tre colonne percentuali:
- layout liquido 1
- layout liquido 2
- layout liquido 3
- layout liquido 4
- layout liquido 5
- layout liquido 6
Layout fissi con colonne a larghezza fissa
Per ottenere layout fissi con colonne a larghezza fissa attraverso i margini negativi il procedimento è sostanzialmente identico a quello utilizzato per i layout liquidi a colonne percentuali. L'unica differenza è ovviamente l'uso di larghezze e margini in pixel.
Rivediamo un attimo il markup di base, già utilizzato per gli esempi precedenti:
<div id="container">
<div id="header">Header</div>
<div id="wrapper">
<div id="content">Contenuto</div>
</div>
<div id="navigation">Navigazione</div>
</div>
<div id="extra">Sezione extra</div>
<div id="footer">Footer</div>
</div>
Ecco quindi il primo esempio, in cui la colonna dei contenuti è disposta centralmente e larga 400px, mentre le due colonne laterali sono di 150 px ciascuna. Il CSS per il layout risulta:
div#container{width:700px}
div#wrapper{float:left; width:100%}
div#content{margin: 0 150px}
div#navigation{float:left; width:150px; margin-left:-700px}
div#extra{float:left; width:150px; margin-left:-150px}
div#footer{clear:left; width:100%}
Solo intervenendo sui margini è possibile otttenere le altre cinque disposizioni possibili per le tre colonne, proprio come abbiamo fatto per i layout liquidi. Ecco quindi i sei layout con tre colonne a larghezza fissa:
Abbiamo visto i layout liquidi a tre colonne percentuali e i layout a tre colonne a larghezza fissa. Prima di proseguire, rivediamo il codice HTML di base:
<div id="container">
<div id="header">Header</div>
<div id="wrapper">
<div id="content">Contenuto</div>
</div>
<div id="navigation">Navigazione</div>
<div id="extra">Sezione extra</div>
<div id="footer">Footer</div>
</div>
Il markup appena visto è stato usato per tutti gli esempi e, grazie al contenitore aggiuntivo per i contenuti, è in grado di offrirci un ottimo livello di personalizzazione del layout.
Layout fluido con colonne secondarie a larghezza fissa
Arriviamo così ad un'altra delle tipologie più diffusa di layout, ovvero i layout fluidi a tre colonne con colonne secondarie a larghezza fissa. Ecco il nostro primo esempio della serie, in cui la colonna dei contenuti è centrale, la navigazione a sinistra e la colonna aggiuntiva a destra. Ecco il CSS:
div#wrapper{float: left;width: 100%}
div#content{margin: 0 200px}
div#navigation{float: left;width: 200px;margin-left: -100%}
div#extra{float: left;width: 200px;margin-left: -200px}
div#footer{clear: left;width: 100%}
Come per gli esempi visti nella prima parte, anche in questo caso è bastato utilizzare i float a sinistra e i margini negativi. Rivediamo il meccanismo: il wrapper è reso float a sinistra con larghezza 100%, e i contenuti hanno i margini laterali di 200px, ovvero la larghezza di entrambe le colonne secondarie.
La navigazione viene resa float a sinistra, ma è traslata del 100% verso sinistra attraverso i margini negativi. La colonna aggiuntiva, che non subirà l'effetto del float della navigazione ma solo quello del wrapper, viene anch'essa resa float a sinistra riportata dentro il viewport grazie ad un margine sinistro negativo pari alla sua larghezza.
Il secondo esempio è facilmente ottenibile partendo dal primo solo scambiando i margini delle due colonne secondarie: in questo caso infatti la colonna di navigazione è a destra. Ecco il CSS:
div#wrapper{float: left;width: 100%}
div#content{margin: 0 200px}
div#navigation{float: left;width: 200px;margin-left: -200px}
div#extra{float: left;width: 200px;margin-left: -100%}
div#footer{clear: left;width: 100%}
Nel terzo esempio la colonna dei contenuti è a sinistra, e le due colonne secondarie sono alla sua destra. Ecco il foglio di stile:
div#wrapper{float:left;width:100%}
div#content{margin-right: 400px}
div#navigation{float:left;width:200px;margin-left:-400px}
div#extra{float:left;width:200px;margin-left:-200px}
div#footer{clear:left;width:100%}
Anche qui si sono usati solo float a sinistra e margini negativi, e la tecnica è analoga a quella dei due esempi precedenti: è bastato giocare sui margini dei contenuti e due colonne secondarie.
Il quarto esempio è stato ottenuto dal terzo solo invertendo i margini delle due colonne secondarie.
Il quinto esempio, insieme al sesto che vedremo tra breve, è forse uno dei più difficili concettualmente tra tutti i layout della serie. In via teorica sarebbe possibile ottenerlo partendo dal terzo esempio e rendendolo totalmente speculare, ovvero invertendo il senso del float (left con right) e i lati dei margini.
In pratica però le cose non si sono rivelate così semplici, e ho riscontrato problemi di resa su alcuni browser. Uno degli aspetti che mi ha sempre affascinato dei CSS è il fatto che offrono sempre molte possibilità e lo stesso effetto si può ottenere in svariati modi.
Negli altri esempi visti abbiamo usato i margini negativi sulle colonne secondarie, mentre nell'esempio 5 i margini negativi sono stati applicati solo al wrapper. Vediamo il CSS:
div#wrapper{float: right;width: 100%;margin-left: -400px}
div#content{margin-left: 400px}
div#navigation{float: right;width: 200px}
div#extra{float: right;width: 200px}
div#footer{clear: right;width: 100%}
Il wrapper viene reso float:right e con larghezza 100%. Il suo margine sinistro è negativo, ed è pari a -400px. È importante a questo punto fissare un aspetto essenziale. Finora abbiamo utilizzato i margini negativi concordi con il senso del float, con conseguente effetto di traslare gli elementi. Se il margine negativo è sul lato opposto a quello del float, non ha effetto sulla posizione dell'elemento, ma ha il solo compito di cedere spazio ad elementi adiacenti.
Nel caso dell'esempio il wrapper quindi, pur occupando tutta la finestra, cederà spazio sul suo lato sinistro per le due colonne secondarie. A questo punto basta regolare anche il margine sinistro dei contenuti effettivi, e rendere float a destra le due colonne secondarie.
Nel sesto esempio, rispetto al quinto, le due colonne secondarie secondarie sono scambiate di posto. Il wrapper lascia ancora 400px alla sua sinistra, ma in questo caso navigazione e colonna aggiuntiva sono resi rispettivamente float a sinistra e destra. Ecco il CSS:
div#wrapper{float: right;width: 100%;margin-left: -400px}
div#content{margin-left: 400px}
div#navigation{float: left;width: 200px}
div#extra{float: right;width: 200px}
div#footer{clear: both;width: 100%}
Abbiamo così visto le sei disposizioni possibili dei layout liquidi con colonne a larghezza fissa. Riepiloghiamo gli esempi visti:
Layout a tre colonne assortite
Concludiamo questa seconda parte della serie con alcuni layout un po' particolari. Grazie ai margini negativi siamo infatti in grado di realizzare layout in cui per esempio una colonna ha larghezza fissa e una ha larghezza percentuale.
È il caso del prossimo esempio, in cui la colonna di navigazione ha larghezza fissa di 200px, la colonna aggiuntiva è il 33% della finestra e la colonna dei contenuti, disposta centralmente, assume la restante larghezza utile. Ecco il CSS:
div#wrapper{float: left;width: 100%}
div#content{margin: 0 33% 0 200px}
div#navigation{float: left;width: 200px;margin-left: -100%}
div#extra{float: left;width: 33%;margin-left: -33%}
div#footer{clear: left;width: 100%}
Dopo aver reso float e con larghezza 100% il wrapper e aggiustato i margini per il contenuto effettivo, si specificano larghezza e margini per le colonne secondarie. La navigazione, larga 200px, viene traslata del 100% così da disporsi alla sinistra dei contenuti. La colonna aggiuntiva, larga il 33% del viewport, viene traslata anch'essa verso sinistra, ma solo di un valore pari alla sua larghezza così da disporsi sulla destra dei contenuti.
In maniera del tutto analoga è possibile ottenere moltissimi layout a colonne assortite. Ecco altre tre varianti:
Nelle varianti 3 e 4 si sono usati i margini negativi anche per il wrapper, così da lasciare spazio aggiuntivo. Sinceramente non so se questo tipo di layout potrà mai incontrare un'esigenza o un'utilità pratica, ma ho pensato comunque di mostrare come sia facile ottenere layout simili grazie ai margini negativi.
Abbiamo visto svariati layout a tre colonne. Vedremo ora come un markup con cinque sezioni portanti (header,contenuti, navigazione, sezione aggiuntiva e footer) è adeguato per ottenere diversi layout a due colonne.
Prima di occuparci dei CSS e degli esempi, rivediamo un attimo il markup di base, che è comune a tutti i layout della serie:
<div id="container">
<div id="header">Header</div>
<div id="wrapper">
<div id="content">Contenuto</div>
</div>
<div id="navigation">Navigazione</div>
<div id="extra">Sezione extra</div>
<div id="footer">Footer</div>
</div>
Siamo quindi pronti per presentare i diciotto layout a due colonne. Iniziamo subito.
Layout fluidi a due colonne
Il primo esempio è un layout a due colonne in cui i contenuti sono a sinistra e la colonna destra contiene navigazione e sezione aggiuntiva. L'implementazione, come in molti altri esempi della serie, avviene grazie ai margini negativi. Ecco il CSS:
div#wrapper{float: left;width: 100%;margin-left: -200px}
div#content{margin-left: 200px}
div#navigation{float: right;width: 200px}
div#extra{float: right;clear: right;width: 200px}
div#footer{clear: both;width: 100%}
Vediamo brevemente il principio: il wrapper viene reso float a sinistra con larghezza del 100% e traslato di 200px verso sinistra, così da lasciare posto per la colonna laterale. Il contenuto ha un margine sinistro di tale valore per impedire che venga tagliato fuori dallo schermo. La navigazione è resa float a destra, con larghezza di 200px. Lo stesso avviene per la colonna aggiuntiva, che inoltre ha un clear impostato per non disporsi affiancata alla navigazione. Il footer infine, avrà il clear su entrambi i lati. Il nostro primo esempio è così ultimato: rivediamolo.
Il secondo esempio è l'esatto speculare del precedente: margini e lati dei float sono infatti invertiti. Ecco il CSS:
div#wrapper{float: right;width: 100%;margin-right: -200px}
div#content{margin-right: 200px}
div#navigation{float: left;width: 200px}
div#extra{float: left;clear: left;width: 200px}
div#footer{clear: both;width: 100%}
Nel terzo esempio la colonna laterale ha larghezza percentuale. Ecco il CSS:
div#wrapper{float:left;width:100%;margin-left:-33%}
div#content{margin-left:33%}
div#navigation{float:right;width:32.9%}
div#extra{float:right;clear:right;width:32.9%}
div#footer{clear:both;width:100%}
La cosa da notare è l'uso delle percentuali: le sezioni secondarie hanno una larghezza del 32.9% così da evitare che errori di arrotondamento stravolgano il layout: con una larghezza percentuale esattamente pari al margine del wrapper è infatti possibile che le colonne laterali inizino verticalmente dopo il contenuto.
Il quarto esempio è l'esatto speculare del precedente.
Il quinto esempio è forse uno dei più semplici di tutta la serie. I contenuti occupano tutta la larghezza della finestra, e le due colonne laterali, affiancate e di pari larghezza, sono disposte sotto. Ecco il CSS per quanto riguarda il layout:
div#navigation{float: left;width: 50%}
div#extra{float: left;width: 49.9%}
div#footer{clear: left;width: 100%}
Da notare che non ci sono regole necessarie per i contenuti. Solo cambiando left in right è possibile ottenere il sesto esempio in cui le due sezioni secondarie sono scambiate di posto.
Nel settimo esempio la navigazione è affiancata ai contenuti, ed entrambe hanno larghezza percentuale, mentre la sezione aggiuntiva ricopre tutta la larghezza del viewport. In questo caso si sono usati i float opposti. Ecco le uniche tre regole per il layout:
div#wrapper{float: right;width: 70%}
div#navigation{float: left;width: 29.9%}
div#extra{clear :both;width: 100%}
Per ottenere l'ottavo esempio è bastato invertire i due lati dei float.
Se si vuole avere un layout simile ma con la navigazione a larghezza fissa bisognerà ricorre ai margini negativi. Ecco così il nono esempio e il relativo CSS:
div#wrapper{float: left;width: 100%}
div#content{margin-left: 200px}
div#navigation{float: left;width: 200px;margin-left: -100%}
div#extra{clear: left;width: 100%}
Ecco quindi l'esempio dieci, l'esatto speculare di quello appena visto, che conclude la serie dei layout fluidi a due colonne.
Layout fissi a due colonne
Arriviamo così alla parte conclusiva di questa serie: vedremo ora otto layout a larghezza fissa, tutti costruiti sul markup di base. Ecco il primo esempio per questa tipologia, in cui navigazione e sezione aggiuntiva si trovano alla destra dei contenuti principali. L'implementazione è piuttosto semplice e float opposti. Ecco il CSS:
div#container{width: 700px;margin: 0 auto}
div#content{float: left;width: 500px}
div#navigation{float: right;width: 200px}
div#extra{float: right;clear: right;width: 200px}
div#footer{clear: both;width: 100%}
Invertendo i lati del float dell' esempio precedente è possibile ottenere l'esatto speculare.
Anche il prossimo esempio usa i float opposti. In questo caso però la sezione aggiuntiva si dispone sotto i contenuti principali, ricalcandone la larghezza e il lato del float:
div#container{width: 700px;margin: 0 auto}
div#content{float: left;width: 500px}
div#navigation{float: right;width: 200px}
div#extra{float: left;width: 500px}
div#footer{clear: both;width: 100%}
Ecco come al solito l'esempio con le colonne scambiate di posto.
Negli esempi quindici e sedici rispetto ai due appena visti la sezione extra occupa tutta la larghezza del layout anzichè solo quella dei contenuti. Per entrambi è bastato non dichiarare float la sezione aggiuntiva.
Infine negli esempi diciasette e diciotto i float opposti sono stati applicati solo sulle due colonne secondarie, che occupano ciascuna metà della larghezza del layout e sono disposte sotto il contenuto principale.
Conclusioni
Abbiamo visto come lo stesso markup possa servire moltissimi layout. Nei 40 esempi mostrati non abbiamo usato hack o workaround, ma poche regole CSS logiche e semplici che conseguono un'ottima compatibilità cross-browser: tutti gli esempi sono infatti testati su Internet Explorer 5, 5.5 e 6, Opera, Firefox e Safari.
