Newsgroup: it.comp.lang.javascript
Titolo: css: controllare i layout mobili

il problema presente, per la verità, riguarda più i css che il
javascript, ma proviene dal problema di posizionare un div sotto ad un
paio di elementi di lunghezza variabile.
voglio costruire una pagina web classica con una intestazione, due
colone laterali di altezza variabile e una barra sottostante.
ho separato la pagina con tre div. le colonne centrali sono
posizionate con:
position:absolute e vincoli su right e left.
per quanto mi affanni, la coda persite a posizionarsi sotto il top del
blocco centrale, come se le colone avessero altezza zero, a meno di
non assegnare una altezza fissa al div centrale. ma questo è
impossibile, perché io vorrei che il div centrale modifichi la propria
altezza dinamicamente al varare delle colonne centrali.
qui ho un esempio statico del problema:
http://cloc3.dyndns.org/data/posizione-css.html

 blocco centrale, come se le colone avessero altezza zero, a meno di non
Questo perche` le colonne centrali HANNO altezza zero, essendo state 
estratte dal flusso di pagina tramite il position: absolute.
Devi rimettercele, circondandole con un contenitire, oppure renderle 
float e usare un clear sul footer.
Bye.


ti ringrazio della risposta, in quanto temevo di essere rubricato
malamente come fuori tema. ma purtroppo le liste italiane sui css sono
poco attive.
mi dispiace, ma non ho ancora capito cosa vuoi dire.
comunque, mi sono concentrato sulla prima parte della tua risposta,
trascurando per il momento il discorso del float.
ho provato ad aggiungere un'altezza esplicita alle due colonne del
corpo centrale sia con la proprietà height che con min-height, ma non
ha giovato.
quanto al contenitore, esse sono già incluse all'interno del corpo
centrale, che è un <div> apposito. adesso ho aggiunto un bordo grigio
per rendere più evidente la questione. il piè di pagina si posiziona
esattamente al di sotto del corpo, e quest'ultimo ignora del tutto
l'altezza delle colone che contiene.
non ho capito cosa intendi con la frase "devi rimettercele". siccome
dovrò modificare dinamicamente l'altezza delle colonne, io avrei
bisogno di dedurre da esse quella del corpo.
se però non uso la proprietà position:absolute non mi sarà possibile
appaiarle al top.
ho provato a navigare in giro e ho trovato un tutorial che affronta
una soluzione analoga:
http://www.constile.org/template/nuovo_layout_a_tre_colonne
purtroppo, la mia interpretazione di quel tutorial ripropone
esattamente lo stesso guasto:
http://cloc3.dyndns.org/data/tre-colone.html
la fascia rossa dovrebbe essere il piè di pagina!

 la fascia rossa dovrebbe essere il piè di pagina!
come è possibile che il suo funziona e il tuo no? vuol dire che manca
qualcosa, no?
p.e. un clear per il piè di pagina, potrebbe essere?
-- 
"That until there is no longer first class
And second class citizens of any nation
Until the colour of a man's skin
Is of no more significance than the colour of his eyes
Me say war"
B.M.

 la fascia rossa dovrebbe essere il piè di pagina!
hai letto bene l'articolo?
"Lo svantaggio consiste nel fatto che la colonna centrale deve essere
sempre più alta di quelle laterali. Questo vincolo in genere può essere
facilmente rispettato, poiché la colonna centrale è quella che presenta i
maggiori contenuti"
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

 trascurando per il momento il discorso del float.
Pensa tridimensionalmente :)
Quando usi float e position:absolute e` come se usassi dei fogli diversi 
per quei div, e poi li poggiassi sopra il "foglio" che rappresenta la 
pagina. Li hai "estratti dal flusso".
Ora la pagina non sa che ha qualcosa appoggiato sopra, e continua a 
scrivere da dove si era fermata.
Usando clear, come dice Cristiano, dici alla pagina di andare a capo 
finche` non ha niente altro sopra.
Questo a grandi linee. Ci sono tutorial sicuramente piu` dettagliati e 
precisi in giro.
Bye.
P.S.: Uso poco position:absolute. Anzi, mai finora. Quindi non sapevo che 
il clear funzionasse anche per lui, pensavo lo facesse solo per il float.


eh, il mio cervello ^_^
alla fine ho mangiato la foglia.
Cristiano Laghi aveva ragione. dovevo leggere meglio quell'articolo.
la differenza tra la mia implementazione e quella del tutorial era che
io attribuivo il position absolute a tutti e tre gli elementi.
il gioco del sistema, invece, consisteva nel lasciare la colonna
centrale statica, per costringere il piè di pagina sotto ad essa.
ecco perché è indispensabile che questa sia più bassa delle altre.
se voglio applicare la tecnica al mio caso, con due sole colonne, devo
posizionare in modo assoluto quella di destra e in modo statico quella
di sinistra.
però rimane il problema della colonna più lunga.
volutamente ho aggiustato l'esempio di sopra ( 
http://cloc3.dyndns.org/data/posizione-css.html
) lasciando un errore, per mostrare l'effetto disaatroso del piè di
pagina sotto la colonna corta.
quanto al clear, non avrebbe effetto in questo contesto (almeno mi
pare).
peraltro, una ricerca di testo nel tutorial non mostra la presenza
della parola.
invece, la parola clear compare in quest'altro tutorial:
http://www.constile.org/template/layout_a_tre_colonne
che a me era sfuggito.
ancora non lo ho letto, ma ho già capito che contiene la risposta al
mio problema e, guarda caso, usa il suggerimento alternativo di
Pellizzari.
i float :)

 che a me era sfuggito.
Personalmente ritengo che il vero "Graal" in questo campo sia "layout 
gala". Lo trovi con google. ;)
Bye.

 pagina sotto la colonna corta.
Magari non t'interessa, ma lo sai vero che IE6, IE7 e Firefox mostrano
ognuno un diverso risultato caricando quella pagina? :)
Ti consiglio innanzitutto di togliere l'intestazione XML, in quanto fa
andare IE6 in quirks mode: Si aspetta che la prima riga sia un doctype
piů o meno corretto.
-- 
~ "Lo  dice il  buon senso, ma il buon senso non č uno  standard".
(Jeffrey Zeldman)


grazie. ma quello è proprio uno studio frettoloso. e comunque, adesso
ho capito il concetto.
quanto all'intestazione, è un taglia incolla dal w3c.
quando faccio i giochini, è comodo per darmi un riferimento al volo.
--
~ (con Jeffrey Zeldman)
se lo dice IE6, preferisco il buon senso.

 Bye.
http://blog.html.it/layoutgala/indexIta.html
servito di barba e parrucca...
`-)