Post on 18-Jan-2016
description
transcript
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.
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;
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.
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">
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*/
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 {
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;
}
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.
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;
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
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*/
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
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;
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+*/
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+*/
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.