Newsgroup: it.comp.www.html
Titolo: [CSS] Ai soliti esperti di CSS

Ho la solita pagina da farvi vedere, fatta con i 2 float laterali:
http://www.rivistaonline.com/Rivista/PrimoPiano.aspx
Questa pagina quando viene stretta, stringe il DIV centrale fino a quando
questo non scompare in basso, cioe' non sta piu' in mezzo al DIV float right
e al DIV float left.
Io vorrei invece che il DIV centrale si stringesse fino ad es. a 250px, dopo
di che non si stringe piu' e la pagina diventa scorribile orizzontalmente.
Come si puo' fare?
Grazie,
David.


Ciao Via,
    dovrebbe bastare, come ti ha suggerito Zefiro sull' altro ng, inserire un
elemento block-level con grandezza di 250px in modo da "puntellare" le
due colonne laterali.
Personalmente lo farei con un <div> inserito nella sezione principale,
invece che un <hr>, per un semplice motivo strutturale. Se ti viene utile
separare verticalmente due sezioni, meglio usare un hr. Altrimenti  un div
che graficamente non si presenta è l' ideale.
Ecco il css:
div#puntello{width: 250px; height: 1px}
Ho letto da qualche parte che un div con altezza zero dà problemi
con alcuni browser, un div vuoto con altezza di 1px non dovrebbe
darne.
E nell' html, in testa o al fondo della sezione principale:
<div id="puntello"></div>
Se dovessi avere dei problemi con le colonne laterali e i float, puoi sempre
mettere un puntello, invece che nella sezione centrale, nell' header o nel footer,
largo magari 600px o quello che serve per non avere problemi nella colonna
centrale.
Ciao,
    SantaKlauss

> div#puntello{width: 250px; height: 1px}
Ti faccio un esempio.
Se vai a questa pagina:
http://www.rivistaonline.com/Rivista/Cultura.aspx
e clicchi sul primo articolo, vedrai una barra nera all'inizio del testo che
è il DIV che dici tu. Prova a stringere la finestra e non appena il DIV
centrale diventa della larghezza del DIV nero tutto se ne va giu'!
Cosa ho sbagliato?
Grazie,
David.


In effetti si. Non saprei come mai non va, per via logica dovrebbe
andare. Dovrei rivedermi tutto il tuo codice ma sto x uscire.
A questo punto puoi provare la seconda opzione che ti ho dato:
mettere il puntello nell' header o nel footer, largo di modo che non si
scombussoli il layout e venga generato lo scroll orizzontale.
Fammi sapere se così va.
Ciao,
    SantaKlauss

> Fammi sapere se cosě va.
Avevo gia' provato... mettendo il footer fisso a 1024, ma il problema
rimane, o meglio il footer rimane a 1024, e la pagina diventa scorribile, ma
se stringo la finestra il DIV centrale si stringe comunque...
non vorrei aver sbagliato qualcosa nel doppio float?!?
Grazie,
David.

 andare. Dovrei rivedermi tutto il tuo codice ma sto x uscire.
senza l'overflow settato a hidden la vedo dura ;-)
zefiro

> senza l'overflow settato a hidden la vedo dura ;-)
Puoi spiegarmi bene a cosa serve l'overflow?
In un esempio ho visto che puo' scorrere un DIV, ma non è certo quello che
voglio... comunque provo con qualche overflow...

 non vorrei aver sbagliato qualcosa nel doppio float?!?
Ho visto il codice html. I div principali dovrebbero essere questi:
<div id="header"></div>
<div id="nav">colonna sinistra</div>
<div id="archivio">colonna destra</div>
<div id="articoli">colonna centrale</div>
<div id="footer"></div>
Con un layout simile un puntello non ha effetto nè nella sezione degli
articoli, nè nell'header o footer, nè da nessuna altra parte. Il fatto è che,
in qualsiasi punto tu lo metta, la colonna centrale subisce il float (e credo
anche i margini sx e dx impostati).
Le sezioni orizzontali sono indipendenti perchè non incorporate tutte in
un div totale (per. es. <div id="page"> che contiene tutto). Lo stesso vale
per le tre colonne centrali.
Qualche div extra, se ha lo scopo di contenere delle sezioni, non fa mai male
e dà un controllo maggiore sulla presentazione di una pagina html. Ecco come
andrebbe strutturato l' html di una pagina simile a parere mio:
<div id="page">
    <div id="header"></div>
    <div id="main">
        <div id="nav">colonna sinistra</div>
        <div id="archivio">colonna destra</div>
        <div id="articoli">colonna centrale</div>
    </div>
    <div id="footer"></div>
</div>
Il puntello potrebbe andare nella sezione page, main, nell' header o nel footer
e dovrebbe funzionare.
Basterebbe anche solo conternere le tre sezioni centrali e mettere il puntello
come prima cosa:
<div id="header"></div>
<div id="main">
    <div id="puntello"></div>
    <div id="nav">colonna sinistra</div>
    <div id="archivio">colonna destra</div>
    <div id="articoli">colonna centrale</div>
</div>
<div id="footer"></div>
Questo il css del puntello:
div#puntello{width: 650px; height: 1px; clear: both }
Così dovrebbe andare, credo. Non ho altre alternative.
Ciao,
    SantaKlauss
P.S: un consiglio: prova a validare l' html:
http://www.htmlhelp.com/tools/validator/