Devo trasformare il mio layout fluido a 3 colonne tutte larghe in percentuale in un layout fluido con 3 colonne, ma solo con la colonna centrale che prende tutto lo spazio.
Le due colonne laterali invece hanno larghezza fissa.
Sapete dirmi come fare?
O darmi il link ad un tutorial, che io non sono riuscito a trovarne....
Grazie
Sostituendo le percentuali con i px?Originariamente inviato da pictor
Sapete dirmi come fare?
O darmi il link ad un tutorial, che io non sono riuscito a trovarne....
Vabbè... guarda, oltre che in questo sito, anche su constile.org.
Ciao
Il problema è che la colonna centrale deve avere una larghezza.....
Se non la specifico manda a capo la colonna di destra.
codice:<body> <div id="header"></div> <div id="corpo"> <div id="navigation"></div> <div id="colCentroBox"> <div id="contenuto"> </div> </div> <div id="extra"></div> </div> <div id="footer"></div> </body>Come posso adattarlo?codice:#header { width: 100%; height: 115px; } /* ## Colonne ## */ #corpo { width: 100%; } #colCentroBox { float:left; margin-left:1px; /* Altezza minima */ min-height: 610px; height: auto !important; height: 610px; } #extra{ float:right; margin: 0; } #navigation{ float: left; margin: 0; } #extra, #navigation { width:177px; min-height: 250px; height: auto !important; height: 250px; padding: 0px; margin: 0px; } #footer { clear: both; width: 100%; border-top: 1px solid #276740; padding-top:5px; } #contenuto { margin-left: 3px; margin-top: 5px; min-height: 600px; height: auto !important; height: 600px; }
Questo è il markup
Dentro il div "corpo" ci metti poi quello che ti pareCodice PHP:<html>
<head>
<style>
#header {width: 100%; height: 115px;}
#navigation {width: 177px; float: left}
#extra {width: 177px; float: right;}
#corpo {margin-left: 177px; margin-right:177px}
#footer {clear: both}
</style>
</head>
<body>
</body>
<div id="container">
<div id="header">header</div>
<div id="navigation">Navigation</div>
<div id="extra">Extra</div>
<div id="corpo">Corpo</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Il meccanismo è questo
1) float a sinistra di "navigation"
2) float a destra di extra
3) margini destro e sinistro del corpo uguale alla larghezza delle due colonne floattate, così che "corpo" si "incastri" in mezzo ai due.
4) footer con clear: both, per non sovrapporsi con "navigation" e "extra" qualora uno di questi due fosse più lungo di "corpo"
Per usare questo markup è FONDAMENTALE definire le colonne nell'ordine indicato
P.S.
Questa tecnica si può usare anche con larghezze espresse in % oppure em, ma per evitare problemi di arrotondamento in quei due casi i margin del "corpo" è sempre meglio metterli di 1 più grandi rispetto alla larghezza delle colonne
Grazie mille
Intanto avevo provato la tecnica del posizionare in modo assoluto le due colonne laterali...
In pratica è come mi hai detto tu ma col pregio che posso ordinare come voglio i div delle 3 colonne
Per l'arrotondamento prendo sempre la precauzione di 'abbondare' un pò
Ancora grazie.
Attenzione però... in questo caso hai seri problemi se "corpo" è più corto di "navigation" oppure di "extra" poichè il "clear: both" del footer non influenza nè è influenzato dai "position: absolute" e avviene la maledetta sovrapposizioneOriginariamente inviato da pictor
Grazie mille
Intanto avevo provato la tecnica del posizionare in modo assoluto le due colonne laterali...
In pratica è come mi hai detto tu ma col pregio che posso ordinare come voglio i div delle 3 colonne
Quindi quella tecnica va usata solo se sei assolutamente certo che "extra" e "navigation" siano più corti di "corpo"
Diciamo che c'è un'ottima probabilità che il numero di voci nelle colonne laterali (voci di menu) non siano così tante da far diventare le stesse più alte della centrale
Poi ho messo comunque un min-height abbondante.
Al momento mi è più conveniente 'rischiare' che stare a cambiare la disposizione dei div in tutte le pagine del sito (sto facendo un nuovo template per un CMS già esistente e con una sua struttura)
Comunque grazie per l'annotazione!
Permessi di invio
Rispondi quotando
