Newsgroup: it.lavoro.professioni.webmaster
Titolo: Una idea sui css per la gestione di layout liquidi.

Ciao a tutti,
prendendo spunto dallo sviluppo delle interfacce grafiche nei software; ho 
notato che la gestione dei layout "liquidi" è molto più snella; meno 
complicata e più stabile rispetto a come avviene attualmente con i css.
In pratica ragionando in termini di contenitore possiamo supporre che esso 
sia di forma rettangolare avente una proprietà ALIGN che può assumere 
quattro valori:
1) Bottom (allineamento in basso)
2) Client (allineamento rispetto al client)
3) Left (allineamento a sinistra)
4) None (nessun allineamento)
5) Right (allineamento a destra)
6) Top (allineamento in alto)
Più tutte le altre proprietà tipiche dei css quali ad esempio:  WIDTH, 
HEIGHT, BORDER, MARGIN, PADDING etc etc etc.
Supponiamo di avere una pagina vuota, un box che si adatti al client, ovvero 
alla finestra del browser potrebbe essere definito come:
<div id="main">
</div>
con css del tipo:
#main {
    align: client;
 }
In questo modo la larghezza e l'altezza del box si adattano alla larghezza e 
altezza del client in questo caso della finestra del browser.
Se poi poniamo il box come contenitore di altri contenitori;  per il 
contenitore più interno il client in questo caso sarebbe il contenitore più 
esterno e non più la finestra del browser.
Questo che significa? Significa che se vogliamo scrivere un layout a tre 
colonne con larghezza fissa alle colonne di sx e di dx e larghezza variabile 
per la colonna centrale noi potremmo scrivere:
<div id="main">
   <div id ="left">
      // quello che voglio
   </div id="left">
   <div id ="center">
      // quello che voglio
   </div id="center">
   <div id ="right">
      // quello che voglio
   </div id="right">
</div>
e il relativo css sarebbe:
#main {
    align: client;
 }
#left {
    align: left;
    width: 150px;
 }
#center {
    align: client;
 }
#right {
    align: right;
    width: 150px;
 }
Da notare che con align posto a left o right, l'altezza height non entra in 
gioco perchè il box andrebbe a occupare tutta l'altezza del client; mentre 
con top o bottom, la larghezza non entra in gioco perchè il box andrebbe a 
occupare tutta la larghezza del client; mentre con client, l'altezza height 
e la larghezza width non entrerebbero in gioco in quanto il box andrebbe a 
occupare tutta l'altezza e larghezza del client.
Ponendo invece align a none non si avrebbe nessun allineamento e quindi 
sarebbe possibile definirne sia l'altezza che la larghezza.
Un altro esempio di layout potrebbe essere quello che abbia un header alto 
80 pixel in alto e un footer di 50 pixel in basso e poi al centro tre 
colonne di cui la centrale liquida.
Qualcosa tipo:
<div id="header">
</div>
<div id="main">
   <div id ="left">
      // quello che voglio
   </div id="left">
   <div id ="center">
      // quello che voglio
   </div id="center">
   <div id ="right">
      // quello che voglio
   </div id="right">
</div>
<div id="footer">
</div>
il css sarebbe:
#header {
     align: top;
     height: 80px;
  }
#main {
    align: client;
 }
#left {
    align: left;
    width: 150px;
 }
#center {
    align: client;
 }
#right {
    align: right;
    width: 150px;
 }
#footer {
     align: top;
     height: 50px;
  }
Sarebbe interessante se si potesse implementare nei css una gestione del box 
in questo modo dove sostanzialmente la novità consisterebbe 
nell'introduzione dell'allineamento rispetto al client che nel caso del 
contenitore principale il client sarebbe la finestra stessa del browser; nel 
caso del un altro contenitore, il client sarebbe il contenitore piu esterno.
Ciò potrebbe portare grossi vantaggi a livello di compatibilità verso tutti 
i browser.
Ne vorrei approfittare anche giusto per un confronto su questo tipo di 
approccio ed eventualmente proporlo se valido come strumento per lo sviluppo 
di un layout con css; magari in via temporanea sarebbe sempre possibile 
creare delle librerie ad hoc per simulare un comportamento analogo.
Io personalmente trovo questo sistema molto comodo e molto stabile che 
risolverebbe parecchi problemi; voi che ne pensate?
Cooper.
-- 
http://www.blueware.it
bluewarewebstudio (skype) 

  }
ovviamente era:
#footer {
     align: bottom;
     height: 50px;


 esterno.
Hmm?
http://www.w3.org/TR/CSS2/cascade.html#inheritance
Cosa c'� di diverso?
Il 'client' esiste gi�, � l'elemento pi� esterno ovvero <html>
Mi sfugge la differenza.


La differenza è che se hai:
<html>
   <div id="main">
   </div>
</html>
Il client in questo caso è <html> ... </html> se invece hai:
<html>
   <div id="main">
        <div id="sub">
        </div>
   </div>
</html>
In questo caso il client del box SUB è MAIN e non più HTML.
Tu "allochi" lo spazio del client con i box e quello non allocato è tutto lo 
spazio restante del client che viene automaticamente assegnato al box 
definito come client.
La differenza è questa.


 
Non ho capito ancora.
Se ho html al 100% di width, a main assegno 100px di width e a sub 
assegno 100%, il risultato � che (padding e margin vari a parte) sub 
avr� width pari a 100px, ovvero si riferisce (ereditariet�) al suo parent.
Cosa cambia con ci� di cui parli?

 La differenza è questa.
il riferimento, a meno di specifiche, è sempre il box contenitore... il 
parent insomma!
Forse quello che dici te è che vorresti non si dovesse seguire il "flusso" 
normale dei CSS (sinitra->destra, sopra->sotto), ma invece vorresti che il 
"flusso" sia generato dal "lato" del contenitore parent dal quale parti con 
le specifiche di posizionamento dei "sub" o client...
 

 ha scritto nel messaggio 
news:hofg4o$gck$1...@tdi.cu.mi.it...

Esatto bravissimo; io non so se hai mai sviluppato anche semplici 
applicazioni in delphi (ma anche in vb); se tu guardi l'oggetto tpanel esso 
ha il medesimo comportamento; e ti assicuro che il modo in cui esso lavora è 
cosi flessibile che tu puoi realizzare strutture abbastanza complesse di 
layout con una estrema versatilità e semplicità, in questo modo; mentre con 
il metodo attuale dei css, lo stesso layout ti implica di farti uscire il 
fumo dalle orecchie :)


 esso ha il medesimo comportamento;
Se ho capito bene, e` molto simile anche a Java.
Personalmente non mi piace molto. Preferisco il sistema delle Gtk+ 
(containers con fill/shrink, margin/padding automatici, (dis)homogeneous, 
ecc. ecc.)
Bye.

 css, lo stesso layout ti implica di farti uscire il fumo dalle orecchie :)
sono daccordo, un posizionamento regolato con queste logiche sarebbe molto 
più semplice da "realizzare" MA...
poi come linearizzi i contenuti? ;-) 

 ha scritto nel messaggio 
news:hog510$5f4$1...@tdi.cu.mi.it...

Quello non è assolutamente un problema perchè tutto il resto rimane 
invariato; cambia solo il modo in cui viene gestito il contenitore; la sua 
logica insomma; ma poi quello che ci sta dentro non viene influenzato.
