Newsgroup: it.comp.www.html
Titolo: Layout 3 colonne adattabile

Ciao a tutti,
  faccio una domanda da inesperto, se e' troppo sciocca ditemelo cosi'
so come regolarmi la prossima volta. :-)
  Sto pasticciando con un cms che ha un layout a 3 colonne ognuna delle
quali ovviamente puo' esserci o no: con le tabelle e' facile creare un
tema adattabile alle varie condizioni ma io preferirei non usarle e
lavorare con <div> e css.
  Non riesco pero' a farmi venire in mente il modo di creare un layout
fluido a tre colonne che, nel caso ad esempio manchi quella di destra,
mi allarga una delle altre (in particolare quella centrale) ad occupare
tutto lo spazio disponibile. Credo sia una banalita', ma non mi viene
proprio in mente... :-o
  Qualcuno sa darmi un consiglio?
  Grazie e un saluto,
-- 
Gianfranco Bertozzi
Linux User #183585
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 proprio in mente... :-o
Un po' traballante come soluzione:
<div id="main">
 <div id="colsinistra">...</div>
 <div id="coldestra">...</div>
 
 testotestotesto
</div>
#colsinistra {float:left; width: quelchee`; margin-right: ennepx;}
#coldestra {float:right; width: quelchee`; margin-left: ennepx;}
Tieni conto che quando finisce una colonna il testo centrale ci finisce 
sotto.
Non puoi ottenere l'effetto delle table coi css, quindi il mio consiglio 
e` di preparare 3 (o piu`) layout in css e di usare quello adatto in ogni 
pagina (basta mettere solo i tre layout in un file ognuno e includere solo 
quello).
Bye.


</div>
  Mi stai proponendo un layout a due colonne, o sbaglio? Non e' quel che
serve a me, purtroppo, il file css e' un layout unico obbligato (non del
tutto ma in pratica si) e ci sono tre colonne che possono o non possono
avere contenuti. Io devo fare una cosa all'incirca come questa (spero di
spiegarmi bene, non sono un esperto):
#corpo { width: 90% }
#container { float: left; }
#colonnasx { width: 15px; float: left; }
#colonnacentrale { float: left; }
#colonnadx { width: 15px }
e poi:
<div id="corpo">
  <div id="container">
    <{if colonna sx}>  <-- roba del cms
        <div id="colonnasx">
          <{mostra contenuti}>
        </div>
    <{/if}>
    <{if colonna centrale}>
        <div id="colonnacentrale">
          <{mostra contenuti}>
        </div>
    <{/if}>
    <{if colonna sx}>
    <div id="colonnasx">
      <{mostra contenuti}>
    </div>
    <{/if}>
  </div>
</div>
  Il file css non e' intercambiabile, e' uno solo e deve adattarsi. Vedo
che i vari template lavorano con le tabelle, a me piaceva per motivi di
accessibilita' (e conformita') usare div e css. Ma mi sa che non ce la
faccio. In pratica il css dovrebbe adattarsi al fatto che il div
id="..." puo' esserci o anche no. :-o
  Che ne dici? Mi adatto alle tabelle? :-)
  Grazie per l'aiuto, sei come sempre molto gentile.
  Saluti,
-- 
Gianfranco Bertozzi
Linux User #183585


 tutto ma in pratica si)
Se non hai modo di fargli caricare dei css diversi hai poco da fare, ma 
anche con le table sei abbastanza fregato: come gli dici che le due 
colonne sono di 200 pixel quando ci sono e di 0 pixel quando non ci sono? 
Se le lasci allargare come vogliono ti spattumano il layout, se gli fissi 
la dimensione te le trovi vuote ma che occupano spazio.
Ribadisco che la cosa migliore e` fare 3 o 4 layout (1main; 1main+sx; 1main
+dx; 1main+dx+sx) e caricare il css apposito (basta un display:none sulla/
e colonna/e invisibili e un width, o i margin-left e margin-right, 
modificato sulla main).
Bye.


 +dx; 1main+dx+sx) e caricare il css apposito (basta un display:none sulla/
  Potrei anche farlo, in effetti, ora riesco a rinvenirmi: :-)
<{if tutteLeColonne }>
  css a tre colonne
<{/if}>
<{if duecolonne }>
  css a due colonne
<{/if}>
  e cosi' via.
  Cosi potrei evitare le tabelle e conservare l'accessibilita'. :-)
  Peccato che il resto del CMS sia tutto a tabelle, accidenti. :-(
  Grazie ancora e un saluto,
-- 
Gianfranco Bertozzi
Linux User #183585
