Nella precedente lezione abbiamo visto le prime istruzioni per il nostro foglio di stile. In questa lezione della nostra guida allo sviluppo di siti per dispositivi mobili vedremo come stilizzare i 4 elementi strutturali della nostra pagina web: header, menu, contenuto e footer.
Come detto questi quattro elementi saranno disposti in colonna: cioè uno sotto all’altro. Considerate le dimensioni ridotte del display di uno smartphone, infatti, sarebbe assurdo valutare soluzioni differenti: l’utilizzo di elementi affiancati in un m-site è un’eventualità eccezionale dettata da circostanze particolari e da utilizzarsi solo ove ce ne sia effettivamente bisogno.
Vediamo, quindi, lo stile della nostra stuttura.
header
L’header, all’interno del nostro m-site, è l’area della pagina preposta ad ospitare il nostro brand (cioè il logo del nostro sito). Una caratteriostiche che ho deciso di dare all’header è di essere fixed cioè fisso sul display dell’utente indipendentemente dallo scroll (è una soluzione che mi piace perché, anche se "ruba" un po’ di spazio aiuta molto a valorizzare il brand). Questo il CSS:
div#header {
position: fixed;
top: 0;
left: 0;
height: 40px;
width: 100%;
background: #669900;
border-bottom: 1px solid #558000;
z-index: 999;
}
#header img {
width: 200px;
height: 30px;
margin-top: 5px !important;
}Come potete vedere ho usato position: fixed per creare l’elemento flottante e l’ho ancorato al margine superiore destro esplicitando una larghezza el 100% ed un’altezza di 40 pixel.
All’interno di questo div abbiamo l’immagine del logo alla quale abbiamo assegnato un margine superiore di 5 pixel per effettuare, in modo arbitrario, un centramento verticale rispetto al suo contenitore.
Il menu
Il menu è l’area della pagina che contiene i link alle diverse sezionidel nostro sito. Nel mio caso ho deciso di inserire in questo menu solo due link: Home e Categorie.
div#menu {
margin-top: 50px;
height: 40px;
border-bottom: 5px solid #99E600;
}
#menu ul { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#menu li { width: 50%; float: left; }
#menu a { display: block; line-height: 40px; background: #E6FFB3; text-align: center; font-size: 20px; color: #99E600; }
#menu a.sel { background: #99E600; color: #508000; }Il menu è posizionato (al momento del caricamento della pagina) sotto all’header, ma essendo l’header fixed (e quindi, in un certo senso, inconsistente a livello di ingombro) ho settato un margin-top pari all’altezza dell’header stesso.
All’interno del menu sono andato a stilizzare un elenco puntato che fungerà da contenitore del nostro menu. Ogni elemento dell’elenco puntato ha una larghezza pari al 50% del totale in quanto, nel mio caso, ho solo due link da mostrare.
Da notare che i link del menu sono stati stilizzati con display: block e con un’altezza pari a quella del loro contenitore: in questo modo abbiamo creato due pulsanti piuttosto grandi ed agevoli per il tap.
Il contenuto
Questa porzione della pagina è quella preposta ad ospitare i contenuti del nostro sito. Non necessita di stilizzazioni particolari: mi limiterò ad assegnare un po’ di padding all’elemento inner che andrà a fare da "contenitore" dei contenuti.
#contenuto .inner {
padding: 10px 5px;
}Il footer
Anche per il footer non sono necessari accorgimenti particolari. Mi limiterò a creare una barra orizzontale (dell’altezza di 40 pixel) in cui scrivere (centrato) la mia nota di copyright.
div#footer {
text-align: center;
background: #669900;
height: 40px;
line-height: 40px;
color: #FFF;
font-size: 12px;
}Nella prossima lezione vedremo come stilizzare un elenco di link (una sorta di ListView) attraverso il quale creare un elenco di item cliccabili.
Conclusioni
Applicando le istruzioni CSS viste finora alla struttura HTML presentata alla lezione n.9 dovreste ottenere il risultato grafico che ci siamo proposti. Ovviamente quello che abbiamo fatto è di creare la struttura… nelle prossime lezioni vedremo come perfezionarla e come inserire i contenuti.
