css sfondo

Pagina scorrevole

Prova foto

In questo layout, usiamo un'immagine di sfondo al 100% che si ridimensiona con la finestra del browser con una colonna sinistra in posizione fissa e una colonna destra scrollabile con il nostro contenuto.

PROVA Tabella   

   
   

 

 

 

 

Usiamo la proprietÓ position: absolute; per togliere gli elementi del flusso normale della pagina e potere posizionarli a piacere.

 

 

 

 

La proprietÓ z-index, ci permette di metterli l'uno sopra l'altro usando lo z-index con il valore pi¨ basso per la nostra immagine di sfondo (lo stesso metodo usato nel tutorial su come usare un filmato flash come sfondo).

Lo sfondo Ŕ impostato con una larghezza e altezza al 100%, come per gli elementi body e html. Quello fa in modo, che l'immagine Ŕ ridimensionata con la finestra del browser, coprendo sempre lo spazio disponibile.

Usiamo la proprietÓ overflow con il valore hidden per evitare lo scrolling della pagina stessa nel caso degli elementi body e html, e il valore auto nel caso dell'elemento 'contenuto'. Questo renderÓ, solo la parte contenuta scrollabile se necessario.

Ho personalmente, aggiunto un semplice menu verticale nella colonna destra e ho aggiunto 2 extra div che servono di sfondo per le rispettive colonne destra e sinistra.
Questi 2 sfondi sono sempliui browsers (IE 6.0 incluso).

 

 

 

 

Lorem ipsum

pepepepepepepepe

pepepepepepepepep