Incolonnamento di DIV

[djcaipiroska]

Ciao a tutti, mi è capitato più di una volta di dover realizzare delle pagine con una serie di elenchi a mo' di tabelle e celle. Per farvi vedere un esempio questo è il link http://cinema.105.net/lista_speciali.php se notate c'e' un buco in mezzo, in pratica penso che sia perchè la news sopra lo spazio vuoto supera di pixel e di conseguenza mi sposta tutto.

So che di solito se si lavora con dei programmatori php, creare degli elenchi del genere in tabelle è meglio che in div... la mia curiosità però è questa, (trovandomi bene anche con i div) come faccio si che se un div sopra superi di contenuto non mi sballi le posizioni di tutti gli altri?

Sotto vi posto anche il css che applico ai singoli DIV-CELLETTE (chiamiamoli così).

#specialBox {
width:250px;
height:auto;
margin:15px 6px;
float:left;
}

#specialBox a{
color:#FF9900;
text-decoration:underline;
font-size:14px;
}

#specialBox a:hover{
color:#000000;
text-decoration:none;
font-size:14px;
}

.paragraph{
width:auto;
margin:15px;
}

Spero che il mio post sia chiaro sul mio problema. grazie mille

Michele

[salasir]

Credo sia sufficiente inserire ai box dispari (quelli di sx per intenderci) una classe con clear:left; .

[djcaipiroska]

ciao beh innanzi tutto grazie per l'intervento.

Cosa fa di preciso la specifica CLEAR:LEFT?

cosa risolverebbe? la mia è semplice curiosità per capire meglio

mickey

[salasir]

Come dice la parola, pulisce i posizionamenti precedenti, riallineando al box principale.
Detto un po' male

Leggi qui e forse capisci meglio: tre proprietà speciali: display, float clear

[djcaipiroska]

posso farti un'altra domanda? nel qual caso... il duplicamento dei div-box venisse fatto mediante PHP... come faccio ad assegnare lo stile che mi hai detto tu a determinati div? in questo caso quelli di sinistra?

Forse è meglio per me dare un HEIGHT preimpostato? Mal che vada ci sarà più spazio sotto per i boxettini con meno testo...

Non so se è chiaro cosa intendo.

Ti faccio un'altro esempio comunque per intenderci meglio;
avevo usato la stessa tecnica qui http://www.sushidub-designer.com/website/portfolio.htm. I boxettini sembrano delle semplici celle di una tabella invece sono tutti singoli div. Ora se uno solo di quei div ha una riga in più di testo, il div che sta sotto si sposta di una riga più in basso, creando così delle zone vuote, come hai visto nel primo link che ho postato.

Non c'e modo di controllare questa cosa?

Mickey

[salasir]

Se sai quanti box ci stanno su una riga puoi gestire l'inserimento della classe con uno switch, ma se il numero dei box potrebbe variare, per esempio al variare della risoluzione, la vedo dura ...

Forse è meglio impostare l'height come suggerivi tu.
Il problema è dato dal fatto che se l'altezza è variabile, i box si appoggiano sempre a sinistra anche se quello precedente "sborda".
Es.

---------  ---------
|          |  | box 2  |
|  box 1 |  ---------
|          |  ---------
|          |  | box 3  | 
---------  ---------

Bhe, viene un po' male ma spero che si capisca cosa intendevo ...

[nickt]

Non mi è molto chiara la tua situazione... Però potresti provare a mettere un float: left; ai div che vuoi mandare a sinistra e un float: right; a quelli che vuoi far andare a destra...

[salasir]

Bisogna vedere se si sa a priori che le colonne sono solo due ...
e comunque nella situazione che un box diventa più lungo, il successivo con float:left; si appoggerebbe comunque a quello della riga precedente creando quel "buco".

[nickt]

Ma se mette un clear: both; all'ultimo div questo si dovrebbe posizionare come un tappo... E comunque non è facile cercare di risolvere un problema altrui così senza poter vedere i risultati che si ottengono modificando il CSS.

[djcaipiroska]

Credo che purtroppo nel mio caso la soluzione migliore sia mettere un altezza prestabilita ai div.

Ma voi, quando dovete fare elenchi del genere... come fate? utilizzate ancora le tabelle? è sbagliato come ho fatto io? creare dei div-box? o in questo caso è sempre meglio usare tabelle?? perchè la griglia rimane sempre più ordinata?


Mickey