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 una parte molto significativa
La varietà false colonne Layout liquido a 2 colonne con i CSS
Per la fase di test filler text a richiesta blog
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="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"
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#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 100%
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%
Infine il footer avrà il clear:left esempio
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
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
Nel quinto esempio #wrapper #navigation #extra
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
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="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
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:
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#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
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.
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
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 quinto esempio terzo esempio
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
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 sinistro lato opposto cedere spazio
Nel caso dell'esempio
Nel sesto esempio
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#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:
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#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
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
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%
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
Nel settimo esempio
div#wrapper{float: right;width: 70%}
div#navigation{float: left;width: 29.9%}
div#extra{clear :both;width: 100%}
Per ottenere l'ottavo esempio
Se si vuole avere un layout simile ma con la navigazione a larghezza fissa bisognerà ricorre ai margini negativi. Ecco così il nono esempio
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
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#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
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
Infine negli esempi diciasette diciotto
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.
