- Learn
- Guida Layout dei siti con i CSS
- Layout a due colonne con il float
Layout a due colonne con il float
Il layout che abbiamo visto non dà vincoli sulla lunghezza relativa delle due colonne. Se sappiamo a priori che in tutte le pagine in cui useremo un layout a due colonne con i float la colonna dei contenuti sarà più lunga della colonna di navigazione, possiamo facilmente separare le due colonne. Le due soluzioni che possiamo adottare sono:
- separare le due colonne con un bordo fine;
- separare le due colonne con l’uso del colore.
Vedremo qui di seguito come poter avere le due colonne di colore distinto, e soprattutto avere l’effetto che la colonna di navigazione si estenda fino al footer. Allo stesso modo, è possibile assegnare solo un border-right al div dei contenuti.
Layout a due colonne cromatiche
Vogliamo assegnare un colore diverso alle due colonne, ed avere l’idea che la colonna secondaria si estende cromaticamente fino al footer. Se ci avete già provato, avrete visto che giocare con l’altezza non ha effetto. Il trucco è semplice: invece di assegnare un colore di sfondo alla navigazione, assegniamo un colore di sfondo al container e al div principale. In questo caso la navigazione erediterà il colore del container e darà l’impressione di estendersi fino al footer. Ecco allora il layout con due colonne di colore diverso.
Un limite che si può superare
I problemi però non mancano. Ecco come rende il layout dell’esempio precendente nel caso in cui la colonna secondaria sia la più lunga.
C’è un’alternativa, che si rivela efficace in entrambi i casi: usare un’immagine di background per il contenitore principale. L’idea è semplice: usare un piccola immagine alta pochi pixel da ripetere verticalmente su tutto il container. Questa immagine deve essere larga quanto la navigazione, e implicitamente introduce una condizione: la colonna di navigazione dovrà per forza essere dimensionata in pixel.
Ecco come ottenere un background che si ripete verticalmente lungo tutto il container:
div#container{
background: url(rightcol.jpg) repeat-y top right
}
Applicare questa soluzione è semplicissimo: basterà realizzare una piccola immagine del colore che vogliamo con un qualsiasi programma di grafica. Ed ecco il layout a due colonne con background, anche nel caso in cui la colonna di navigazione sia la più lunga.
Scarica lo zip di questa lezione
Se vuoi aggiornamenti su Layout a due colonne con il float inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Web design per smartphone: la viewport
In questo video è illustrato il concetto di viewport, ovvero di area rettangolare di visualizzazione di un sito internet su […]