Layout liquido a due colonne
Giovedì 25 Ottobre 2007 - 08:38
di Alessandro Fulciniti
Come promesso la scorsa settimana in questo post, eccomi a presentarvi la mia soluzione di layout a due colonne. Cominciamo con gli esempi: layout con navigazione a destra e con navigazione a sinistra. Ecco in breve le caratteristiche principali:
- Nell’HTML, la colonna principale precede la navigazione
- Codice HTML e CSS validi
- Layout liquido con colonna secondaria a larghezza fissa (250px)
- Larghezza minima di 760px e larghezza massima di 1240px
- Testati su IE dalla versione 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari
- Nessun vincolo sulla lunghezza relativa delle due colonne, che grazie alle false colonne daranno l’impressione di essere della stessa altezza
- CSS esterni e modulari: tipografia, layout, colori per una facile personalizzazione
- Commento condizionale e CSS dedicato per servire min-width e max-width anche su IE fino alla versione 6
Ora, probabilmente ci vorrebbe un articolo intero per spiegare i dettagli implementativi dei due esempi… per brevità rimando agli articoli da cui è scaturita la soluzione: si è trattato infatti solo di riprendere alcuni esempi e sostanzialmente fare il copia-incolla-verifica.
Per quanto riguarda la tipografia, sono partito dal CSS risultante da Ritmo verticale nella tipografia. Per il layout, la base è stata quella del
layout con i margini negativi, oltre che Layout Gala. Per le false colonne… si tratta di una tecnica nota ai più: la trovate spiegata in questa pagina dell’articolo Usare il background.
Per ciò che riguarda il commento condizionale per IE6 e inferiori, la spiegazione di come emulare le due proprietà min-width e max-width la trovate in 10 Consigli per prepararsi a Internet Explorer 7.
Due parole per i test di resa: se avete installate diverse versioni di IE sulla stessa
macchina, verranno tutte riconosciute come la versione più recente. In sostanza, se
avete installato IE7 e le versioni stand-alone delle precedenti, nell’HTML per poter
effettuare i test di resa dovrete modificare il commento condizionale:
<!--[if lte IE 6]>
Nel seguente, così da poter verificare il supporto di max-width e min-width
anche sulle versioni di IE fino alla 6:
<!--[if IE]>
A fase di sviluppo e test ultimata, sarebbe bene ripristinare il commento condizionale alla sua versione originale. Altri piccoli suggerimenti: rimuovendo o modificando il CSS relativo ai colori, avrete una buona base in bianco per la personalizzazione grafica e cromatica. Per quanto riguarda il font di base: è di 16 px con il carattere di default (o sul valore medio) impostato sul browser; se dovesse risultare troppo grande per i vostri gusti, basterà cambiare il font-size da 100.01% a 76% nel CSS per la tipografia.
Concludo segnalando alcune alternative, dato che per alcuni (me incluso) il fatto che la colonna secondaria si presenti a larghezza fissa potrebbe costituire un limite: ecco quindi Layout liquido a due colonne
e Layout elastico a due colonne.
Nel primo articolo trovate anche le versioni a tre colonne, nel secondo ci sono invece alcune soluzioni ibride che personalmente ritengo molto valide e interessanti.
Questo è tutto per ora… anzi no: ho preparato uno zip per il download con
i due esempi e i file necessari. Alla prossima!
Commenti
1
Grande! lo userò come base di partenza per i prossimi progetti! :-)
Grazie ancora!# - postato da Multimedia Player - 25 Ottobre 2007 - 09:17
2
Domanda e se volessi estendere il footer fino alla fine della pagina?
width:100% funziona ma l’height:100% sembra di no o ci sono altri trucchi?
3
Ottimo lavoro, una base veramente solida da cui partire per un layout a 2 colonne.
Sicuramente meglio dell’esempio citato la settimana scorsa, adesso sì che codice e realizzazione sono esemplari :)
4
@smash
si può, ma te lo sconsiglio. basta dare altezza 100% al tag html e al tag body. Successivamente gli elementi interni possono ottenere altezze percentuali. Ma non è troppo compatibile tra i browser e gestire tutto tramite css diventa molto complicato. Alla fine ho rinunciato a cercare una soluzione cross-browser.
5
Ottima base per lo sviluppo di siti internet. Grazie mille.
6
Grazie mille: lo sto già provando!
7
Ottimo! Un bel lavoro…
Grazie :)
8
gran bel lavoro rispetto all’esempio della settimana scorsa ;-)
ho apprezzato molto la separazione dei differenti css.
una domanda: sono da poco passato a vista e non ho ancora capito come testare ie6
9
Con Opera9 e Firefox2 funziona bene. Con IE7, no.
In pratica, digitando per esempio, http://blog.html.it/liquido/li.....uido1.htmllo sfondo violetto non si estende per tutta la pagina e bisogna fare il refresh per vedere il risultato finale.
Inoltre, la riga di piede risulta alta il doppio circa rispetto a Opera e Firefox.
Ciao# - postato da pietro - 25 Ottobre 2007 - 10:52
10
Intanto grazie per il layout, e confermo quanto postato da Pietro, anch’io con IE7 ho riscontrato lo stesso effetto sul background di pagina.
# - postato da Alessandro Adami - 25 Ottobre 2007 - 12:28
11
Per quanto concerne i commenti condizionali, esiste un rimedio apparso su Position Is Everything. Occorre “pastrocchiare” un po’ col registro di Windows, ma funziona.
# - postato da P&M - 25 Ottobre 2007 - 15:22
12
@ Smash e Paolo:
Tempo fa Alessandro Fulciniti aveva proposto questa soluzione.Forse vi può tornare utile.
# - postato da P&M - 25 Ottobre 2007 - 16:09
13
Non sono mai riuscito in un layout fluido a rendere una tabella fluida senza che mi invadesse l’elemento float laterale, soluzioni?
# - postato da mixio - 22 Dicembre 2007 - 14:53
14
Mixio, dovrebbe bastarti assegnare una larghezza percentuale alla tabella, tipo:
table{table-layout: fixed;width: 90%;margin: 0 auto}
Ciao!
# - postato da Alessandro Fulciniti - 22 Dicembre 2007 - 22:51
15
Ciao,
ho visto l’esempio con Firefox 2.0.0.11, ti volevo solo segnalare che dà dei problemi di visualizzazione a seconda della grandezza del carattere, all’inizio quando ho aperto la pagina entrambe le colonne erano a fondo bianco, poi ho ingrandito il font e mi è apparso il colore giallo della colonna di dx. A ingrandire inoltre si sovrappone il titolo “Header” sul testo delle due colonne.Il font di default del mio firefox è Times New Roman - Dimensione: 16
Ciao
# - postato da Vanessa - 01 Febbraio 2008 - 13:35