Layout a due colonne: elementi di base



Questa tipologia di layout è adeguata per siti di dimensioni medie. Le sezioni fondamentali di un layout a due colonne sono:

  • header
  • navigazione
  • contenuti
  • footer

Navigazione a destra o a sinistra?

Nell'introduzione al layout a due e tre colonne abbiamo trattato le principali problematiche di progettazione per questi due tipi di impaginazione. Ma c'è una questione che riguarda esclusivamente il layout a due colonne: meglio avere la navigazione a destra o a sinistra?

Chiariamo subito che non si tratta di privilegiare una tecnica rispetto ad un'altra. Possiamo ottenere il risultato desiderato sia usando i float, sia il posizionamento assoluto. La scelta è solo una questione di gusto del progettista e/o di richiesta del committente.

Sebbene la navigazione a sinistra sia senza dubbio la più diffusa, c'è una questione da considerare. In occidente leggiamo dall'alto verso il basso e da sinistra verso destra. Avere la navigazione sulla destra favorisce così i contenuti, che hanno un privilegio visivo.

Gli esempi di layout a due colonne che proporremo, saranno tutti realizzati con la colonna secondaria a destra. Si tenga presente, comunque, che le modifiche al foglio di stile per avere la navigazione a sinistra sono davvero minime. Vediamo uno schema tipo di un layout a due colonne:

layout a due colonne

Ultimi articoli CSS

Bordi multipli con 'box-shadow' di CSS3

Il modo più rapido e semplice per circondare un box con più bordi di...

Sfumature lineari su IE6-9, linear-gradient CSS3 e un po' di SVG

Utilizzare la funzione linear-gradient CSS per creare sfumature...

Stili specifici per l'orientamento dell'iPad con le Media Queries

Gestire con gli stili e le media queries le modalità di...

Campo per la ricerca con i CSS

Dedicare la giusta attenzione al modulo per le ricerche, componente...

Box model 'naturale' con border-box

Dimenticare per sempre i problemi legati al box model grazie ad un...

Altri articoli

Guide CSS

Guida CSS3

Scoprire e usare al meglio tutte le novità dell'ultima versione dei...

Guida CSS Tecniche essenziali

Testo, immagini, layout, form, liste, tabelle: soluzioni pronte per...

Guida CSS di base

I CSS servono per gestire tutto il layout di un sito Web. E'...

Altre guide

Newsletter @CSS

Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti