[cssdesign] Richiesta test modello layout a 3 colonne
Cooper
cooper a blueware.it
Ven 20 Gen 2006 11:59:25 CET
Ciao a tutti,
sperimentando con i tableless a tre colonne sono giunto al risultato in seguito riportato:
/* CSS */
#mainContainer { width: 750px; margin: 0px auto; }
#leftCol { width: 575px; float: left; background: #CCCCCC; }
#rightCol { width: 175px; float: right; background: #EEEEEE; }
#subContainer { width: 575px; margin: 0px auto; }
#subleftCol { width: 175px; float: left; background: #AAAAAA; }
#subrightCol { width: 400px; float: right; background: #BBBBBB; }
.center { text-align: center; margin: 0px; }
/* HTML */
<!-- BEGIN Contenitore 2 Colonne -->
<div id="mainContainer">
<div id="leftCol">
<!-- BEGIN Sub Contenitore 2 Colonne -->
<div id="subContainer">
<div id="subleftCol">
<p class="center"> Colonna 1 </p>
</div>
<div id="subrightCol">
<p class="center"> Colonna 2 </p>
</div>
</div>
<!-- BEGIN Sub Contenitore 2 Colonne -->
</div>
<div id="rightCol">
<p class="center"> Colonna 3 </p>
</div>
</div>
<!-- BEGIN Contenitore 2 Colonne -->
Brevemente, per realizzare il "3 colonne" sono partito da un contenitore a due colonne (mainContainer) che contiene due colonne: leftCol e rightCol rispettivamente la colonna sinistra e la colonna destra.
In leftCol ho definito (con lo stesso criterio di mainContainer) un ulteriore contenitore a due colonne: subLeftCol e subRightCol.
Nell'esempio di cui sopra ho supposto una larghezza fissa di 750 px, definendo quindi le colonne 1 e 3 di larghezza fissa a 175 pixel e la colonna 2 (centrale di 400 pixel).
Il tutto č centrato orizzontalmente rispetto alla finestra del browser.
Ho ottenuto il risultato voluto sia con internet explorer che con firefox. Con un po' di matematica (nella fattispecie operando con le proporzioni) sono riuscito a ottenere il medesimo effetto rendendo il layout liquido nella colonna 2 e lasciando fisse le colonne 1 e 3 con risultati soddisfacenti.
Altrettanto soddisfacente (dal mio punto di vista) č la linearitą delle informazioni sia sotto il profilo del codice che dei css, ovvero disabilitando i css ottengo come risultato qualcosa del tipo:
colonna 1
colonna 2
colonna 3
...e fin qui dunque nessun problema; poichč non sono in condizioni di poter verificare adeguatamente, gradirei avere riscontri ulteriori sulla stabilitą presso altri browser ed eventuali bug presenti sul modello da me ottenuto sopra, in modo da poterlo usare come modello base generale per i layout fissi e liquidi a tre colonne.
Ringrazio anticipatamente coloro che si renderanno disponibili al testing.
Cooper.
www.blueware.it
-------------- parte successiva --------------
Un allegato HTML č stato rimosso...
URL: http://itlists.org/pipermail/cssdesign/attachments/20060120/e59b9a6d/attachment.htm
Maggiori informazioni sulla lista
cssdesign