Sviluppare un sito in orizzontale
Dopo un breve periodo di inattività torno a scrivere sul blog un tutorial per creare un sito in orizzontale.
Recentemente, un amico e collega, Enrico, mi ha contattato per chiedermi una mano su come sviluppare un sito in orizzontale per la campagna promozionale di un suo cliente.
Siamo partiti dal template di thw per ottenere quello che volevamo, solo che il template messo a disposizione non andava bene e abbiamo dovuto fare un pò di hack. Ecco in dettaglio tutto:
HTML
L’html è piuttosto semplice, bisogna solo essere attenti:
First Section
The left and the right siders, new
friends.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas vel urna. Donec vestibulum fringilla urna. Pellentesque
ut ante. Pellentesque non magna eu felis nonummy aliquam. Pellentesque
viverra risus vel felis. Nunc id tellus vel purus euismod tempor..
Infatti, gestiremo tutto con css.
Il sito in questione ha 3 blocchi, e cliccando su un dato link, lo scroller javascript ci porterà ad un’altro blocco, dandoci così l’impressione di “sfogliare” un sito. Ovviamente è possibile togliere o aggiungere blocchi senza problemi, bisogna solo ricordarsi di sistemare il tag body nel css che vedremo tra poco.
CSS
Qui sta tutto il gioco.
Dato che noi abbiamo 3 blocchi, il css sarà così:
body
{
margin: 0px;
padding: 0px;
width: 297%;
}
Si, avete visto bene, width:297%; . Infatti questo servirà a definire la larghezza del body, e a puntare precisamente i blocchi al centro della pagina qualsiasi sia la risoluzione dello schermo. 297 perchè ci sono 3 blocchi, cioè 99×3. Se vogliamo aumentare i blocchi dobbiamo anche aumentare questo valore che arriverà a 99×4, cioè 396% per 4 blocchi.
Ogni singolo blocco (oltre tutti gli elementi di stile) sarà così:
.pagina1, .pagina2, .pagina3
{
width: 33%;
margin: 0px;
padding: 0px;
float: left;
}
viene impostato per arrivare ad un massimo del 99%. Se volete aggiungere un blocco, dovete agire aumentando la dimensione del body, e diminuendo qui (per esempio, 4 blocchi, ogni blocco 25%, e così via).
Ovviamente sta a voi renderlo più graficamente accattivante.
Javascript
Sul javascript abbiamo avuto i problemi più grandi. Quello di thw non andava bene con Internet Explorer e così abbiamo dovuto arrangiarci con una vecchia versione dello stesso.
Note finali
Abbiamo speso un bel pò del nostro tempo su questa cosa, quindi se la usate, per favore, linkateci come noi abbiamo linkato thw (Marco Rossella, a cui vanno i nostri meritatissimi complimenti per tutto il lavoro svolto con questo progetto.)
Ovviamente il codice è tutto valido xhtml, così come il css.
Scarica il progetto completo (formato .zip, 5,45kb)
Demo
