CSS: realizzare il layout di una pagina web con tre box

Il colore di sfondo dei box corrisponde al colore di sfondo della pagina; giocando con i bordi e i loro colori, possiamo creare un layout molto delicato, cercando di non distogliere l' attenzione del visitatore quando apre la pagina. Cominciamo a vedere il file di esempio e poi passiamo a spiegare il codice.

Tutta la struttura è stata inserita in un box contenitore; all' interno di questo ce ne sono altri 3:
uno per la testata, uno per i contenuti ed infine quello destro. Ecco il codice:

#container {
padding:0;
margin: 10px auto;
}
#banner {
padding-top:0;
padding-right: 10px;
padding-bottom:10px;
padding-left:10px;
margin-bottom: 10px;
height:50px;
text-align:left;
border-bottom: 1px solid rgb(213, 219, 225);
}
#content {
padding: 10px;
margin-right: 230px;
text-align:left;
border-right: 1px solid rgb(213, 219, 225);
line-height: 22px;
}
#destra {
float: right;
width: 200px;
\width: 220px;
w\idth: 200px;
margin: 0;
margin-left: 10px;
padding: 10px;
text-align:left;
}

Per il #container non dovrebbero esserci problemi in quanto ho spiegato più volte che lo si dichiara in quel modo per vederlo al centro con più browser;
il #banner (testata) ha un bordo inferiore (bottom) dichiarato singolarmente, il quale viene visualizzato, per la sua leggerezza di colore, quasi come se fosse una linea divisoria con il corpo della pagina. Il #content presenta due cose importanti: il margin-right ed il border-right. Il motivo per cui è stato dato un margine di 230px è perchè la misura della colonna destra è di 200px; a questi si deve aggiungere la misura del padding dello stesso box #content (sinistro + destro = 10px X 2) in più i 10 pixel di margine tra la colonna destra e quella centrale.

Questo non è altro che il box model così come viene interpretato dai diversi browser. L' altra cosa, dicevo, è il bordo destro, con la stessa funzione di quello in alto, cioè che divide il corpo centrale da un ipotetico menu posto sulla destra.

La colonna #destra non è altro che la prosecuzione di quanto scritto più su; dichiarare 3 diversi modi di larghezza per fare in modo che i diversi browser la interpretino correttamente.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati