Newsgroup: it.comp.www.html
Titolo: CSS e Tre Colonne "intelligenti"

Sto approfondendo i css per abbandonare definitivamente le table, e mi
trovo di fronte ad una difficolta':
Ho una pagina asp che genera 3 div:
<div id="left"> left </div>
<div id="center"> center </div>
<div id="right"> right</div>
Il mio foglio di stile si preoccupa di disporre il tutto su 3 colonne,
di larghezza 20% , 60% e 20%  e fin qui tutto ok. Ma ecco il problema:
Supponiamo che il div "right" , per mancanza di contenuti, non venga
affatto generato e la pagina dei contenuti rimanga quindi del tipo :
<div id="left"> left </div>
<div id="center"> center </div>
E' possibile fare in modo che la colonna centrale vada ad occupare lo
spazio lasciato libero dalla colonna di destra assente ?
Grazie

 afferma che:

Sě, č possibile, ma francamete lo trovo complesso e poco utile.
Si potrebbe fare cosě:
- due CSS: uno per la versione a tre colonne, uno per la versione a due;
- uno script lato server che permetta di switchare da uno a l'altro in base
alla mancanza o meno di contenuto.
In ogni caso un layout dovrebbe rimanere sempre uguale in tutte le pagine.
Ciň favorisce una coerenza interna e una facilitŕ di orientamento cognitivo
per l'utente.
Semmai potrai variare, nei limiti di uno studio di usabilitŕ, alcuni
elementi interni alle pagine.
In ogni caso da come hai descritto il layout le due colonne laterali
assomigliano molto ad un menu, in questo caso se la colonna di destra puň
essere, in alcuni casi, omessa non sarebbe meglio incorporare il suo
contenuto direttamente nella colonna di sinistra?
In questo modo si potrebbe mantenere una struttura fissa a due colonne,
rispettando i contenuti.
Ciao.
-- 
[Non siamo materia che aspetta, ma schemi che si perpetuano.]
Rhadamanth.net (
http://www.rhadamanth.net
)
Web Garbage (
http://www.web-garbage.com
)

 
 E' una soluzione che non posso adottare, perche' lo scenario che
avevo descritto era in realta' riduttivo. Provo ad essere piu'
esauriente:
 
La pagina dei contenuti e' una newsletter , che quindi contiene delle
news suddivise in 3 sezioni. ( Supponiamo "cronaca" , "politica" ,
"sport" )
 Pero' i contenuti non sono uguali per tutti i lettori , perche' in
fase di profilazione , essi impostano dei criteri di filtro, e puo'
quindi accadere che qualcuno abbia la sezione "sport" o "politica"
priva di notizie.
In fase di generazione dei contenuti , pero' , non posso stabilire
quale layout applicare perche' non so quali e quanti layout siano
disponibili ( in quanto se ne potranno aggiungere col tempo )
Quindi la generazione dei contenuti produrra' semplicemente i dati
"grezzi" , che poi sara' compito del foglio di stile disporre in modo
corretto in base al layout scelto dall' utente.
Quindi la mia pagina dei contenuti potra' essere del tipo :
 <div id="sport">
   <div id="notizia"> bla bla </div>
   <div id="notizia"> bla bla </div> 
 </div>
 <div id="cronaca">
   <div id="notizia"> bla bla </div>
   <div id="notizia"> bla bla </div> 
 </div>
 <div id="politica">
   <div id="notizia"> bla bla </div>
   <div id="notizia"> bla bla </div> 
 </div>
oppure :
<div id="sport">
   <div id="notizia"> bla bla </div>
   <div id="notizia"> bla bla </div> 
 </div>
 <div id="cronaca">
   <div id="notizia"> bla bla </div> 
   <div id="notizia"> bla bla </div>
 </div>
o ancora: 
 <div id="cronaca">
   <div id="notizia"> bla bla </div>
   <div id="notizia"> bla bla </div> 
 </div>
 <div id="politica">
   <div id="notizia"> bla bla </div>
   <div id="notizia"> bla bla </div> 
 </div>
Vorrei fare in modo che ciascun foglio di stile che posso applicare(
non solo un tre colonne) sia cosi' furbo da non lasciare buchi nella
pagina.
Per fare l'esempio del tre colonne :
#sport {
float:left;
width:20%;
}
#cronaca {
float:left;
width:58%;
}
#politica {
float:left;
width:20%;
 }
Ecco,vorrei poter dire allo stile della sezione cronaca :
 "pigliati la larghezza ALMENO del 58%, ma se c'e' spazio allargati.",
analogamente a quanto accade con una tabella di questo tipo:
 
 <table><tr>
  <td width="50">xxxx </td>
  <td width="99%"> xxxx </td>
  <td width="50"> xxxx </td>
 </tr></table>
Dove la colonna centrale tende a pigliarsi tutto lo spazio
disponibile...
Scusa se l'ho tirata per le lunghe , ma questa cosa mi preme
abbastanza
Ciao e Grazie