Continuando il discorso sul markup semantico iniziato nell’articolo precedente, in questa seconda parte vedremo come , lasciando invariato il markup , possiamo creare 3 layout diversi apportando delle piccole modifiche esclusivamente nel CSS.
Nel primo esempio, quello se vogliamo più scontato, il menu sarà posizionato in alto, subito sotto l’area branding.
Nel secondo porteremo il menu sulla sinistra tramite la proprietà float.
Infine, nel terzo esempio il menu verrà posizionato sulla destra grazie al posizionamento assoluto.
In fondo all’articolo troverete tutti gli esempi da scaricare e da utilizzare liberamente insieme ad alcuni riferimenti per approfondire il discorso.
Ma iniziamo a vedere il foglio di stile nel primo caso
-
Qui il foglio di stile è più che mai semplice, infatti i vari DIV si trovano già nella sequenza desiderata, quindi è sufficente dar loro una dimensione
» vedi l’esempio
La parte di codice che ci interessa è questa:
#page {
margin : 0 auto;
width : 960px;
background-color : #fff;
text-align : center;
}
#branding {
height : 100px;
width : 100%;
background-color : #eaeaea;
}
#navigation{
height : 30px;
background-color : #FFE682;
}
#content{
height : 350px;
width : 100%;
}
#content p{
padding : 10px ;
}
#site_info{
width : 100%;
height : 100px;
background-color : #eee;
}
- Passiamo ora ad esaminare il codice col menu a sinistra:
In questo secondo caso, i DIV si trovano sempre nell’ordine desiderato ed è sufficiente utilizzare la proprietà float
» vedi l’esempio
Ma vediamo il codice, in grassetto le parti aggiunte o modificate (ce la siamo cavata con 3 righe soltanto)
#page {
margin : 0 auto;
width : 960px;
background-color : #fff;
text-align : center;
}
#branding {
height : 100px;
width : 100%;
background-color : #eaeaea;
}
#navigation{
height : 350px;
background-color : #FFE682;
float : left;
width : 30%;
}
#content{
height : 350px;
}
#content p{
padding : 10px ;
}
#site_info{
clear : both;
width : 100%;
height : 100px;
background-color : #eee;
}
- Vediamo infine l’ultimo caso, quello un po’ più anomalo , cioè con il menu spostato sulla destra
Qui andremo a modificare qualche riga in più utilizzando il posizionamento assoluto.
Le righe coinvolte in questo caso sono 5.
» vedi l’esempio
Ma vediamo il codice nel dettaglio:
#page {
margin : 0 auto;
width : 960px;
background-color : #fff;
text-align : center;
position : relative;/*questa proprietà ci permette di
posizionare il menu in modo assoluto*/
}
#branding {
height : 100px;
width : 100%;
background-color : #eaeaea;
}
#navigation{
position : absolute; /* queste prime 3 righe*/
top : 100px;/* ci permettono di posizionare*/
left : 640px; /*il div dove desideriamo */
width : 320px;
height : 350px;
background-color : #FFE682;
}
#content{
height : 350px;
width : 100%;
}
#content p{
padding : 10px 330px 10px 10px; /*ci permette di
lasciare lo spazio a destra dove inseriremo il menu*/
}
#site_info{
width : 100%;
height : 100px;
background-color : #eee;
}
Scarica il file zip con gli esempi
Per saperne di più sul markup semantico, consiglio il libro Oltre i CSS di Andy Clarke che è disponibile anche in italiano e che a mio parere vale veramente la pena di leggere.
