Newsgroup: it.lavoro.professioni.webmaster
Titolo: layout multi-colonna con css

Ecco un abbozzo di cio' che ho in mente:
Intestazione1
uno              quattro              sette
due              cinque               otto
tre                sei                    nove
Intestazione2
uno              quattro              sette
due              cinque               otto
tre                sei                    nove
....
Per il css3 c'e' in programma un set di
nuovi tag appositi, tipo "column-count",
"column-gap" e via dicendo (vedere qui:
http://www.w3.org/TR/css3-multicol/
)
Qualcuno ha un'idea di come realizzare un
layout di questo tipo con il css attuale?
Il layout che utilizzo ora e' del tipo seguente:
Intestazione1        Intestazione2     Intestazione3
uno                      uno                   uno
due                      due                   due
tre                        tre                     tre
quattro                 quattro              quattro
...
E' realizzato allineando tre blocchi "div", mediante
posizionamento dinamico. Quello che vorrei e'
che ogni singolo blocco "div" venisse automaticamente
suddiviso in n colonne.
gA

 suddiviso in n colonne.
Se vuoi 3 colonne ti servono 3 DIV da posizionare (o utilizzando 
position e left e top, oppure float).

 position e left e top, oppure float).
Questo lo sapevo: e' esattamente quello che ho detto
nel messaggio. Perche' l'hai ripetuto?  :-)
Grazie, comunque, per la risposta.
Mi sa proprio che dovro' rinunciare all'idea della divisione
in colonne di un singolo blocco DIV; a meno di non
ricorrere al dhtml.
Ho appena trovato su google un link dove sembra
proprio ci sia quello che cerco:
http://www.smokinggun.com/demos/sg_layout.php
peccato che questa pagina non esista piu'  :-)
gA

 peccato che questa pagina non esista piu'  :-)
Eccola qui:
http://www.smokinggun.com/code/sg_layout.php
Utilizza un javascript. Mi sembra un po' troppo
macchinoso e su IE non funziona benissimo.
Comunque, l'articolo multi-colonna fa parte di
un unico DIV, proprio come volevo io.

 nel messaggio. Perche' l'hai ripetuto?  :-)
Perche' poi hai chiesto esplicitamente:


 suddiviso in n colonne.
<div id="main" style="width:100%">
<div id="left" style="float:left; width: 20%">
left
</div>
<div id="right" style="float:right; width: 30%">
right
</div>
<div id="center" style="">
center
</div>
</div>

 </div>
Ripeto che l'elemento DIV deve essere uno e uno solo.
Uso MovableType per la pubblicazione automatica di
articoli; ogni articolo viene inserito all'interno di un DIV.
Io voglio che l'articolo venga distribuito in tre colonne.
Nel modo sopra suggerito, dovrei suddividere
manualmente l'articolo in tre parti; in teoria, e' fattibile,
anche se scomodo, ma dovrei calcolare a mano la
quantita' di testo inserita, in modo che le colonne risultino
omogenee, e cio' e' impossibile.
Ispirandomi al sistema cervellotico usato su 
www.iht.com
,
ho trovato una soluzione, anche se credo che non sara'
indenne da problemi ed effetti collaterali indesiderati.
Praticamente, funziona allineando su tre colonne tre
copie complete dell'articolo, visualizzando solo
determinate aree.
L'articolo dal testo "1 2 3 4 5 6", si leggera' in tre colonne:
                                                1 (invisibile)
                                                2 (invisibile)
                        1 (invisibile)      3 (invisibile)
                        2 (invisibile)      4 (invisibile)
1                      3                      5
2                      4                      6
3 (invisibile)      5 (invisibile)
4 (invisibile)      6 (invisibile)
5 (invisibile)
6 (invisibile)
Questa tecnica richiede semplicemente l'uso della
proprieta' TOP (con valori se necessario anche negativi),
per spostare in alto le colonne, e della proprieta' CLIP,
per definire le aree visibili.
Cio' richiede tre blocchi DIV (non uno come desideravo),
che saranno pero' identici; e dunque si rende possibile
l'automatizzazione in MovableType, che e' quello che volevo.
gA

 Cio' richiede tre blocchi DIV (non uno come desideravo),
Se non ricordo male su IHT il DIV che contiene il testo e' uno solo, 
duplicato via JavaScript/DOM (cioe' non ci sono davvero 3 DIV tutte e 3 
con lo stesso testo, ma solo uno).

 con lo stesso testo, ma solo uno).
E' sicuramente come dici.
Non mi sono messo a guardare il codice, perche'
e' un labirinto inestricabile.
Ho preso lo spunto da quello che dicevano, riguardo
a IHT, in tutte le discussioni trovate su google.
Io, non conoscendo il javascript, preferisco fare
tutto via css. Tanto non e' un problema mettere nel
template di MovableType 3 DIV identici ripetuti
(con stili diversi).
Ripeto, comunque, che e' probabile che la mia
soluzione (indubbiamente rozza), senza l'infinita'
di piccoli aggiustamenti e "hack" via javascript fatti
su IHT, risultera' piena di problemi. Ma non e' detto.
Non ho ancora avuto il tempo per fare esperimenti.
gA

 omogenee, e cio' e' impossibile.
Ora ho capito, tu vuoi che automaticamente la quantità di parole venga
distribuito su tre colonne.
Puoi agire da lato server con un piccolo script in ASP o PHP, contnato le
parole e poi creando dinamicamente il codice.
Ciao