Gabbie a 3 colonne header con posizionamento assoluto
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#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:
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 questo link. Osserva il codice e se ci sono delle domande in merito non esitare a contattarmi.
| < Prec. | Succ. > |
|---|

