CSS Layout a 2 colonne

16
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014 1 Layout a due colonne con i CSS Il layout a due colonne è adatto a siti di medie dimensioni e si compone solitamente di cinque sezioni fondamentali: header navigazione principale navigazione secondaria contenuti footer La navigazione secondaria (sidebar) viene affiancata alla sezione contenuti, a sinistra o a destra. Vediamo il codice HTML di questo layout: <!DOCTYPE html> <html> <head> <title>Layout a due colonne</title> </head> <body> <div id="wrapper"> <div id="header"> LAYOUT A DUE COLONNE<br> HEADER </div> <!-- end header --> <div id="navigation"> NAVIGATION </div> <!-- end navigation --> <div id="sidebar"> SIDEBAR </div> <!-- end sidebar --> <div id="content"> CONTENT </div> <!-- end content --> <div id="footer"> FOOTER </div> <!-- end footer --> </div> <!-- end wrapper --> </body> </html> Solitamente, per questo tipo di pagine la sidebar viene impostata ad una larghezza fissa, mentre il content ad una larghezza in percentuale. Nel seguito vengono mostrati tre diversi approcci per il layout proposto: il primo utilizza la proprietà position per affiancare le due colonne, il secondo la proprietà float. Il terzo approccio mostra un layout flexbox.

description

Layout a due colonne con i CSS

Transcript of CSS Layout a 2 colonne

Page 1: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

1

Layout a due colonne con i CSS

Il layout a due colonne è adatto a siti di medie dimensioni e si compone solitamente di

cinque sezioni fondamentali:

header

navigazione principale

navigazione secondaria

contenuti

footer

La navigazione secondaria (sidebar) viene affiancata alla sezione contenuti, a sinistra o a

destra. Vediamo il codice HTML di questo layout:

<!DOCTYPE html>

<html>

<head>

<title>Layout a due colonne</title>

</head>

<body>

<div id="wrapper">

<div id="header">

LAYOUT A DUE COLONNE<br>

HEADER

</div> <!-- end header -->

<div id="navigation">

NAVIGATION

</div> <!-- end navigation -->

<div id="sidebar">

SIDEBAR

</div> <!-- end sidebar -->

<div id="content">

CONTENT

</div> <!-- end content -->

<div id="footer">

FOOTER

</div> <!-- end footer -->

</div> <!-- end wrapper -->

</body>

</html>

Solitamente, per questo tipo di pagine la sidebar viene impostata ad una larghezza fissa,

mentre il content ad una larghezza in percentuale.

Nel seguito vengono mostrati tre diversi approcci per il layout proposto: il primo utilizza la

proprietà position per affiancare le due colonne, il secondo la proprietà float. Il terzo

approccio mostra un layout flexbox.

Page 2: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

2

Accessibilità

Le persone ipovedenti o non vedenti utilizzano per navigare strumenti che “leggono” il

contenuto delle pagine html grazie a un sintetizzatore vocale. Per questo motivo, la

collocazione della sezione di navigazione (principale o secondaria) subito dopo l’header

può risultare molto fastidiosa poiché costringe all’ascolto di lunghi elenchi di link. Al

momento, la soluzione consiste nel fornire un link per “saltare” direttamente al contenuto

della pagina.

Layout a due colonne con i posizionamenti assoluti

Fig. 1 – Esempio di layout a due colonne con sidebar

a sinistra e posizionamenti assoluti

/*Layout a due colonne con sidebar sinistra con posizionamenti assoluti*/

body {

margin: 0;

padding: 0;

}

#wrapper {

margin: 0 auto;

width: 100%;

position: relative; /*nota 1*/

}

#header {

height: 100px;

margin: 0;

Page 3: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

3

padding: 10px;

background-color: #334433;

color: #FFF;

}

#navigation {

height: 50px;

margin: 0;

padding: 10px;

background-color: #6699AA;

color: #FFF;

}

#sidebar {

width: 180px; /*nota 2*/

height: 350px;

margin: 0;

padding: 10px;

position: absolute; /*nota 3*/

left: 0;

background-color: #D0D1C5;

color: #000;

}

#content {

height: 350px;

margin: 0 0 0 200px; /*nota 4*/

padding: 10px;

background-color: #AACCCC;

color: #FFF;

}

#footer {

height: 50px;

margin: 0;

padding: 10px;

background-color: #334433;

color: #FFF;

}

Le regole riguardanti il colore di sfondo (background-color) il colore in primo piano (color) e

l’altezza (height) sono state aggiunte unicamente per rendere visibili le sezioni nella

pagina web.

Page 4: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

4

Nota 1: la proprietà position del wrapper è relative per consentire di impostare

successivamente la proprietà position absolute della sidebar. In questo modo la sidebar si

posiziona rispetto al wrapper e non rispetto alla finestra del browser.

Nota 2: si osservi che, nonostante la proprietà width della sidebar sia impostata a 180

pixel, la larghezza totale di questa colonna è di 200 pixel, poiché occorre considerare

anche i 10 pixel di padding sinistro e destro.

Nota 3: la sidebar viene posizionata in modo assoluto a sinistra.

Nota 4: il margine sinistro della sezione content deve essere impostato a 200 pixel, che

coincide con la larghezza complessiva della sidebar.

Fig. 2 – Esempio di layout a due colonne con sidebar

a destra e posizionamenti assoluti

In questo caso occorre modificare la pagina HTML disponendo la sidebar dopo il content.

<!DOCTYPE html>

<html>

<head>

<title>Layout a due colonne</title>

</head>

<body>

<div id="wrapper">

<div id="header">

LAYOUT A DUE COLONNE<br>

HEADER

</div> <!-- end header -->

<div id="navigation">

Page 5: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

5

NAVIGATION

</div> <!-- end navigation -->

<div id="content">

CONTENT

</div> <!-- end content -->

<div id="sidebar">

SIDEBAR

</div> <!-- end sidebar -->

<div id="footer">

FOOTER

</div> <!-- end footer -->

</div> <!-- end wrapper -->

</body>

</html>

Il foglio di stile diventa:

/*Layout a due colonne con sidebar destra con posizionamenti assoluti*/

body {

margin: 0;

padding: 0;

}

#wrapper {

margin: 0 auto;

width: 100%;

position: relative;

}

#header {

height: 100px;

margin: 0;

padding: 10px;

background-color: #334433;

color: #FFF;

}

#navigation {

height: 50px;

margin: 0;

padding: 10px;

background-color: #6699AA;

color: #FFF;

}

#content {

height: 350px;

margin: 0 200px 0 0; /*nota 1*/

Page 6: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

6

padding: 10px;

background-color: #AACCCC;

color: #FFF;

}

#sidebar {

width: 180px;

height: 350px;

margin: 0;

padding: 10px;

position: absolute; /*nota 2*/

right: 0;

top: 190px;

background-color: #D0D1C5;

color: #000;

}

#footer {

height: 50px;

margin: 0;

padding: 10px;

background-color: #334433;

color: #FFF;

}

Nota 1: il margine destro della sezione content deve essere impostato a 200 pixel, che

coincide con la larghezza complessiva della sidebar.

Nota 2: la sidebar viene posizionata in modo assoluto a destra ad una distanza dal top del

wrapper pari a 190 pixel, lunghezza che coincide con la quella dell’header più quella della

sezione navigation.

Layout a due colonne con i float

Il codice HTML rimane lo stesso (sidebar prima del content). Per quanto riguarda i CSS,

nel seguito sono visibili i fogli di stile per i due casi; sidebar a sinistra e a destra.

/*Layout a due colonne con sidebar sinistra con float*/

body {

margin: 0;

padding: 0;

}

#wrapper {

Page 7: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

7

margin: 0 auto;

width: 100%;

}

#header {

height: 100px;

margin: 0;

padding: 10px;

background-color: #334433;

color: #FFF;

}

#navigation {

height: 50px;

margin: 0;

padding: 10px;

background-color: #6699AA;

color: #FFF;

}

#sidebar {

width: 180px;

height: 350px;

margin: 0;

padding: 10px;

float: left; /*nota 1*/

background-color: #D0D1C5;

color: #000;

}

#content {

height: 350px;

margin: 0 0 0 200px;

padding: 10px;

background-color: #AACCCC;

color: #FFF;

}

#footer {

height: 50px;

margin: 0;

padding: 10px;

clear: both; /*nota 2*/

background-color: #334433;

color: #FFF;

}

Page 8: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

8

Nota 1: la sidebar ha proprietà float impostata a left.

Nota 2: la proprietà clear consente di effettuare un corretto posizionamento del footer;

senza questa regola, se la sidebar risultasse più lunga della sezione content, il footer si

disporrebbe appena sotto i contenuti e non sotto la colonna secondaria.

Fig. 3 – Esempio di layout a due colonne con sidebar

a destra e float senza clear nel footer

Fig. 4 – Esempio di layout a due colonne con sidebar

a destra e float con clear nel footer

Vediamo ora il CSS per la sidebar a destra.

Page 9: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

9

/*Layout a due colonne con sidebar destra con float*/

body {

margin: 0;

padding: 0;

}

#wrapper {

margin: 0 auto;

width: 100%;

}

#header {

height: 100px;

margin: 0;

padding: 10px;

background-color: #334433;

color: #FFF;

}

#navigation {

height: 50px;

margin: 0;

padding: 10px;

background-color: #6699AA;

color: #FFF;

}

#content {

height: 350px;

margin: 0 200px 0 0;

padding: 10px;

background-color: #AACCCC;

color: #FFF;

}

#sidebar {

width: 180px;

height: 350px;

margin: 0;

padding: 10px;

float: right; /*nota 1*/

background-color: #D0D1C5;

color: #000;

}

#footer {

height: 50px;

margin: 0;

padding: 10px;

Page 10: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

10

clear: both;

background-color: #334433;

color: #FFF;

}

Nota 1: la sidebar ha proprietà float impostata a right.

Layout a due colonne con flexbox

Uno dei moduli più interessanti della specifica CSS3 è il flexbox (flexible layout module).

Flexbox permette di sistemare in maniera flessibile i box presenti all’interno di un elemento

contenitore, offrendo vari metodi per la gestione dell’ordine di visualizzazione dei box,

dello spazio disponibile e dell’allineamento.

Per attivare il modello di layout flessibile occorre impostare la proprietà display del

blocco contenitore al valore box. Al momento attuale tutti i browser le implementano le

proprietà flexbox ricorrendo ai prefissi proprietari. Sarà necessario, quindi, aggiungere

un blocco contenitore e per esso le seguenti proprietà al blocco:

#container {

display: box; /*Opera*/

display: -ms-box; /*IE 10+*/

display: -moz-box; /*Firefox*/

display: -webkit-box; /*Chrome and Safari*/

}

Per impostare l’orientamento dei box si usa la proprietà box-orient, sempre nel

contenitore. Valori possibili sono: horizontal e vertical, con ovvio significato1. Tale

proprietà non funziona con IE e Opera.

#container {

display: box; /*Opera*/

display: -ms-box; /*IE 10+*/

display: -moz-box; /*Firefox*/

display: -webkit-box; /*Chrome and Safari*/

box-orient: horizontal;

-ms-box-orient: horizontal;

-moz-box-orient: horizontal; /*Firefox*/

-webkit-box-orient: horizontal; /*Chrome and Safari*/

}

1 Per approfondire si veda http://www.w3schools.com/cssref/css3_pr_box-orient.asp

Page 11: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

11

Per impostare l’ordinamento dei box cioè l’ordine con cui appariranno esistono due

possibilità.

La prima consiste nell’utilizzare la proprietà box-direction, la quale può assumere i

valori normal (i box appaiono nell’ordine di default) o reverse (i box appaiono in ordine

inverso).

#container {

display: box; /*Opera*/

display: -ms-box; /*IE 10+*/

display: -moz-box; /*Firefox*/

display: -webkit-box; /*Chrome and Safari*/

box-orient: horizontal;

-ms-box-orient: horizontal;

-moz-box-orient: horizontal; /*Firefox*/

-webkit-box-orient: horizontal; /*Chrome and Safari*/

box-direction: normal;

-ms-box-direction: normal; /*IE 10+*/

-moz-box-direction: normal; /*Firefox*/

-webkit-box-direction: normal; /*Chrome, Opera and Safari*/

}

La seconda possibilità consente di specificare l’ordine di apparizione per ciascun box

mediante la proprietà box-ordinal-group. In tal caso occorre indicare per ciascun box

un intero che ne specifica la posizione.

#container {

display: box; /*Opera*/

display: -ms-box; /*IE 10+*/

display: -moz-box; /*Firefox*/

display: -webkit-box; /*Chrome and Safari*/

box-orient: horizontal;

-ms-box-orient: horizontal;

-moz-box-orient: horizontal; /*Firefox*/

-webkit-box-orient: horizontal; /*Chrome and Safari*/

}

#sidebar {

box-ordinal-group: 1;

-ms-flex-order: 1; /*IE 10+*/

-moz-box-ordinal-group: 1; /*Firefox*/

-webkit-box-ordinal-group: 1; /*Chrome and Safari*/

Page 12: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

12

}

#content {

box-ordinal-group: 2;

-ms-flex-order: 2; /*IE 10+*/

-moz-box-ordinal-group: 2; /*Firefox*/

-webkit-box-ordinal-group: 2; /*Chrome and Safari*/

}

I box possono avere una larghezza fissa o variabile in percentuale oppure possono

essere flessibili, cioè occupare tutto lo spazio che hanno a disposizione. Per assegnare

a un box quest’ultimo comportamento si utilizza la proprietà box-flex, con valore

almeno pari a 1. Il valore della proprietà box-flex deve essere inteso in questo modo:

se un box ha valore di box-flex pari a 2 significa che occupa uno spazio doppio rispetto

ai box che hanno la stessa proprietà impostata a 1. Di conseguenza, se i box flessibili

sono più di uno, essi si dividono lo spazio disponibile in modo equo, se la proprietà

box-flex è uguale a 1, o altrimenti lo spazio occupato si differenzierà sulla base del

valore di box-flex. Nel nostro esempio, solo la sezione content deve essere flessibile,

mentre sidebar ha una larghezza fissa di 200 pixel.

#sidebar {

width: 200px;

box-ordinal-group: 1;

-ms-flex-order: 1; /*IE 10+*/

-moz-box-ordinal-group: 1; /*Firefox*/

-webkit-box-ordinal-group: 1; /*Chrome and Safari*/

}

#content {

box-ordinal-group: 2;

-ms-flex-order: 2; /*IE 10+*/

-moz-box-ordinal-group: 2; /*Firefox*/

-webkit-box-ordinal-group: 2; /*Chrome and Safari*/

box-flex: 1; /*Opera*/

-ms-box-flex: 1; /*IE 10+*/

-moz-box-flex: 1; /*Firefox*/

-webkit-box-flex: 1; /* Chrome and Safari*/

}

Altre proprietà utili per l’allineamento e la distribuzione dello spazio, che potete consultare

autonomamente, sono box-align2 e box-pack3.

2 Vedere http://www.w3schools.com/cssref/css3_pr_box-align.asp

3 Vedere http://www.w3schools.com/cssref/css3_pr_box-pack.asp

Page 13: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

13

Vediamo ora il codice HTML e il CSS completi.

<!DOCTYPE html>

<html>

<head>

<title>Layout a due colonne</title>

</head>

<body>

<div id="wrapper">

<div id="header">

LAYOUT A DUE COLONNE<br>

HEADER

</div> <!-- end header -->

<div id="navigation">

NAVIGATION

</div> <!-- end navigation -->

<div id="container">

<div id="sidebar">

SIDEBAR

</div> <!-- end sidebar -->

<div id="content">

CONTENT

</div> <!-- end content -->

</div> <!-- end container -->

<div id="footer">

FOOTER

</div> <!-- end footer -->

</div> <!-- end wrapper -->

</body>

</html>

/*Layout a due colonne con sidebar sinistra con flexbox*/

body {

margin: 0;

padding: 0;

}

#wrapper {

margin: 0 auto;

width: 100%;

}

#header {

height: 100px;

margin: 0;

padding: 10px;

Page 14: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

14

background-color: #334433;

color: #FFF;

}

#navigation {

height: 50px;

margin: 0;

padding: 10px;

background-color: #6699AA;

color: #FFF;

}

#container {

display: box; /*Opera*/

display: -ms-box; /*IE 10+*/

display: -moz-box; /*Firefox*/

display: -webkit-box; /*Chrome and Safari*/

box-orient: horizontal;

-ms-box-orient: horizontal;

-moz-box-orient: horizontal; /*Firefox*/

-webkit-box-orient: horizontal; /*Chrome and Safari*/

background-color: #FF0000;

}

#sidebar {

width: 180px;

height: 350px;

margin: 0;

padding: 10px;

box-ordinal-group: 1;

-ms-flex-order: 1; /*IE 10+*/

-moz-box-ordinal-group: 1; /*Firefox*/

-webkit-box-ordinal-group: 1; /*Chrome and Safari*/

background-color: #D0D1C5;

color: #000;

}

#content {

height: 350px;

margin: 0;

padding: 10px;

box-ordinal-group: 2;

-ms-flex-order: 2; /*IE 10+*/

-moz-box-ordinal-group: 2; /*Firefox*/

-webkit-box-ordinal-group: 2; /*Chrome and Safari*/

box-flex: 1; /*Opera*/

-ms-box-flex: 1; /*IE 10+*/

Page 15: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

15

-moz-box-flex: 1; /*Firefox*/

-webkit-box-flex: 1; /* Chrome and Safari*/

background-color: #AACCCC;

color: #FFF;

}

#footer {

height: 50px;

margin: 0;

padding: 10px;

background-color: #334433;

color: #FFF;

}

Nel caso si desideri spostare la sidebar a destra, le modifiche da apportare riguardano

solo la proprietà box-ordinal-group, che dovrà essere posta a 1 per content e a 2 per

sidebar.

/*Layout a due colonne con sidebar destra con flexbox*/

...........................................

#sidebar {

width: 180px;

height: 350px;

margin: 0;

padding: 10px;

box-ordinal-group: 2;

-ms-flex-order: 2; /*IE 10+*/

-moz-box-ordinal-group: 2; /*Firefox*/

-webkit-box-ordinal-group: 2; /*Chrome and Safari*/

background-color: #D0D1C5;

color: #000;

}

#content {

height: 350px;

margin: 0;

padding: 10px;

box-ordinal-group: 1;

-ms-flex-order: 1; /*IE 10+*/

-moz-box-ordinal-group: 1; /*Firefox*/

-webkit-box-ordinal-group: 1; /*Chrome and Safari*/

box-flex: 1; /*Opera*/

-ms-box-flex: 1; /*IE 10+*/

Page 16: CSS Layout a 2 colonne

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/03/2014

16

-moz-box-flex: 1; /*Firefox*/

-webkit-box-flex: 1; /* Chrome and Safari*/

background-color: #AACCCC;

color: #FFF;

}

...........................................

Quest'opera è stata rilasciata con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia. Per leggere una copia della licenza visita il sito web

http://creativecommons.org/licenses/by-nc-sa/3.0/it/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.