Lo sviluppo di una pagina web a due o più colonne può essere attuato sulla base di due metodi: il metodo delle faux columns, basato sulla proprietà float, ed il metodo basato sull’uso della dichiarazione display: table-cell.
Ce ne siamo occupati in un precedente articolo del blog: https://lnx.instantwebsites.it/iwblog/?p=926 concludendo che il primo dei due è ancora preferibile, non fosse altro per il fatto di essere consolidato nella pratica, oltre che per via del mancato support da parte di Internet Explorer 7. AGGIORNAMENTO: essendo nel frattempo IE7 divenuto obsoleto, la scelta tra le due tecniche si baserà sulla prassi preferita dallo sviluppatore. All’articolo menzionato si rinvia anche per le modifiche di posizionamento nel layout reattivo.
Quando il layout deve essere di tipo reattivo, si pone talvolta il problema della diversa disposizione delle colonne nella visualizzazione adattiva rispetto a quella normale.
Prendiamo ad esempio una struttura del tipo raffigurato nell’immagine seguente (ridotto al minimo indispensabile per gli scopi di questo tutorial):
Assegnando alle due colonne (ed al relativo box contenitore) la proprietà float: left ed inserendole nel codice HTML di pagina nell’ordine corrispondente, avremmo come risultato che nella visualizzazione adattiva – in cui la proprietà float viene annullata e i due box si comportano come elementi a livello di blocco – la colonna 1 si disporrebbe sopra e la colonna 2 sotto.
Si tratterebbe in effetti del normale posizionamento statico degli elementi, appunto, a livello di blocco che non a caso è definito per semplicità “posizionamento in base al flusso di codice”.
Nel foglio di stile avremmo dunque:
#colonna-1 { float: left; width: 360px; }
#colonna-2 { float: left; width: 600px; }
e per quanto concerne le Media Query:
@media (max-width:959px) { #colonna-1, #colonna-2 { float: none; width: auto; } }
Potrebbe però essere necessario invertire il comportamento delle colonne, vale a dire: nella visualizzazione normale, quella su schermo ampio, la colonna 1 dovrebbe posizionarsi a sinistra ma quando la viewport viene ridotta, dovrebbe scivolare sotto la colonna 2.
La soluzione è molto semplice e utilizza le caratteristiche della proprietà float stessa: la colonna 1 sarà inserita nel codice HTML di pagina dopo la colonna 2 e, nel foglio di stile, avremo:
#colonna-1 { float: left; width: 360px; }
#colonna-2 { float: right; width: 600px; }
e per quanto concerne le Media Query:
@media (max-width:959px) { #colonna-1, #colonna-2 { float: none; width: auto; } }
per cui nella visualizzazione adattiva – in cui la proprietà float viene annullata e i due box si comportano come elementi a livello di blocco – la colonna 2 si disporrebbe sopra e la colonna 1 sotto.
N.B.: il contenitore del layout è dimensionato in misura fissa a 960px di larghezza, quindi il layout reattivo deve intervenire quando la viewport è pari a 959px o meno.
Per visualizzare gli esempi ed esaminare il codice completo (HTML e CSS) dei due casi, utilizzare i link sottostanti.
Nella sezione <head> delle pagine di esempio è stato inserito il meta-tag viewport così impostato:
content=”width=device-width”
quindi è possibile simulare il comportamento del layout su un dispositivo mobile semplicemente ridimensionando la finestra del browser.
ESEMPIO 1:
Struttura a 2 colonne costruita con la proprietà float
Entrambe le colonne sono flottanti a sinistra e sono posizionate in ordine nel codice di pagina quindi quando viene attivata la visualizzazione reattiva, la prima colonna si posiziona sopra la seconda.
Clicca qui per vedere l’esempio
ESEMPIO 2:
Struttura a 2 colonne costruita con la proprietà float
La colonna 1 è inizialmente visualizzata a sinistra ed è flottante a sinistra; la colonna 2 è inizialmente visualizzata a destra ed è flottante a destra.
Si desidera che, quando viene attivata la visualizzazione reattiva, la colonna 1 si posizioni sotto l’altra: per fare questo, è sufficiente invertire l’ordine delle colonne nel codice della pagina HTML (prima la colonna 2, poi la colonna 1).
Clicca qui per vedere l’esempio
I tutorial pubblicati in questo blog sono usati nell’ambito dei corsi di web design organizzati da INSTANT WEBSITES a Vigevano (Pavia).
Puoi leggere tutti idettagli sui corsi stessi in queste pagine:
http://www.instantwebsites.it/corsi.html
http://www.corsidiwebdesignavigevano.it/corsi-di-web-design.php