Centrare la pagina e il menu a tendina (3 livelli) con due colonne di sfondo ai lati (wrapper)

Come al solito l'esempio è quello del sito www.minifibts.it mi piaceva avere la pagina centrata con due colonne con sfondo diverso ai lati. Sono riuscita anche a dare un certo effetto tridimensionale facendo in modo che la pagina risulti sopra lo sfondo, e per far questo ho sovrapposto la pagina alla testata.

Per fare questo occorre definire un css "cssdefault";

body {
padding: 25px;
background: #555555 url(../../../../images/flickr.com/pattern3.png) 0 0 repeat-x;
font: 14px/normal Arial, Tahoma, Helvetica, sans-serif;
}

background grigio scuro e pattern ripetuto solo per la larghezza -x


#wrapper-pag {
width: 1000px;
margin: 0 auto;
padding-left:50px;
border-left-style:solid;
border-left-width:2px;
border-left-color:#ffffff;
padding-right:50px;
border-right-style:solid;
border-right-width:2px;
border-right-color:#ffffff;
border-top-style:solid;
border-top-width:1px;
border-top-color:#aaaaaa;
padding-bottom:50px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#aaaaaa;
background-color: #d7d7d7;
}

background della pagina centrata un grigio più chiaro.

e nel programma inserire:

include cssdefault

inserire il menu a tendina nel sito il menu grafici di settore ha fino a 3 livelli (se vi piace in fondo alla pagina c'è il link per scaricarlo)
menu a tendina
....
....

....
....

....
....

In questo modo il body con sfondo in grigio scuro parte da 25 pixel e sopra per circa 50 pixel c'è la testata ad onde in questo modo il body largo 1000 pixel risulta appoggiato dando un senso tridimensionale. Il div che definisce la pagina vera e propria viene centrato nella pagina (margin: 0 auto) e avendo un padding di 25 pixel incornicia la nostra pagina, anche i border leggeri definiscono e permettono lo "stacco" dell'immagine dallo sfondo.

Buon divertimento a tutti.

Ps se vi piace il menu a tendina fino a tre livelli lo potrete scaricare da internet http://lwis.net/free-css-drop-down-menu/