Layout a tre colonne con i posizionamenti assoluti e aggiunta della header

La gabbia centrale si dispone al di sotto di quella superiore per via del flusso; quindi la distanza verticale tra le due gabbie viene definita dai margini:

div#sinistra{margin-top:5px;}
div#destra{margin-top:5px;}

oltre che dalla distanza dall' alto della pagina pari all'altezza dell' header. Le gabbie laterali sono posizionate in modo assoluto e non sanno dove si trovano le altre, nella pagina; inoltre è stata assegnata loro una larghezza pari a 160 pixel. Vedendo il codice si potrà notare questa cosa molto importante:

width:150px; \width:160px; w\idth:150px

sia per la colonna di destra che per quella di sinistra. Cosa vuol dire questo? Siccome non tutti i browser visualizzano correttamente la misura (in larghezza) data ad un box, si ricorre all' hack; vale a dire impostare 3 diverse dimensioni per fare in modo che, almeno i browser principali, interpretino correttamente la misura impostata da noi.

La prima larghezza (width:150px) è per quei browser che interpretano correttamente il box model;
la seconda (\width:160px;) è per Explorer 5.x: contiene un valore di 160px in quanto alla larghezza definita si deve sommare il padding del lato e destro e sinistro;
la terza (w\idth:150px) è per i browser standard compliant, i quali sovrascriveranno il valore di 150px con la regola più vicina. Puoi vedere la pagina realizzata con il codice CSS, seguendo il link. Osserva il codice e se ci sono delle domande in merito non esitare a contattarmi.

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