problema con i Div annidati

[mosquito70]

Ciao a tutti,
premetto che non sono molto pratico di CSS o almeno, non al livello di cui ho bisogno per risolvere questo problema di impaginazione di questo documento, che trovate in questo link
http://www.abacada.it/bollprova.html

Il css è http://www.abacada.it/bollprova.css

La struttura del documento, eccetto che nella prima pagina dove è presente l'intestazione, presenta una serie di Avvisi di Gara (il cui numero per ogni pagina e colonna lo calcolo attraverso un algoritmo, non necessario in questa spiegazione), suddivisi su due colonne.

La struttura dell'avviso è

- Intestazione (Nome/dettagli/indirizzo) --> Comune di XXXX etc...
- le varie sezioni (Gara, Oggetto, etc... sono fino ad un massimo di 10)

Quindi per ogni colonna, avrò ripetuta n-volte la struttura dell'avviso.

Il problema è questo...
Come definire con i div la struttura dell'avviso, considerando che le varie sezioni, hanno alternato lo sfondo grigio/bianco e la parte destra di ogni sezione ha una propria formattazione, differente da ogni altra sezione.

In particolare non capisco se sia necessario
1. Definire un div per l'elemento avviso
2. Come posizionare un avviso sotto l'altro, visto che la dimensione totale in altezza, è variabile e non standard (ovvero le sezioni hanno una altezza diversa dall'altra)

Grazie per qualsiasi suggerimento

[mosquito70]

Aggiungo un esempio, visualizzabile a questo indirizzo http://www.abacada.it/esempio.jpg

dove ho evidenziato in rosso, la struttura di un avviso.

In particolare non riesco a fare in modo tale che l'avviso successivo, sia posizionato correttamente al precedente. E lo stesso ragionamento per le righe di un avviso.



Edit: Aggiornamento
Sto facendo delle prove e credo che questa possa essere la strada giusta.

http://www.abacada.it/bollprova_2.html (prova numero 2)

Dove la l'altezza dell'avviso è "float".

[mosquito70]

Scrivo di nuovo perchè sono a buon punto, visto che sono riuscito a dimensionare gli oggetti come desideravo.
Questo è quello che ho fatto finora

http://www.abacada.it/bollprova_2.html

ora il problema finale è questo.
Separare la riga dell'avviso, tra sx e dx, dove queste debbono avere dimensione fissa.
Immagino che dovrei definire altri due div, ma vorrei evitare di farne uno per ogni riga (Gara, Oggetto, etc...) e quindi vorrei definire questi due div finali, come validi per tutti e poi definire i vari stili.

Pensate possa essere la soluzione migliore?

Grazie in anticipo

[mosquito70]

Torno a scrivere, perchè credo di essere riuscito anche a dividere in due la riga interna dell'avviso, ma ora il problema è che con IE 7 la scritta a sinistra si sovrappone a quella dx, mentre con FF no.

http://www.abacada.it/bollprova_2.html

Sapete darmi qualche dritta in proposito?

Grazie
Ciao

[fcaldera]

ti basta forzare left: 0; sull'elemento .rigaavvisx

comunque se posso dare un suggerimento potresti
- evitare di usare posizionamenti relativi e assoluti usando piuttosto i float
- usare marcatura adatta: invece di

[code]
<div class="rigaavviwhite">
<div class="rigaavvisx">...</div>
<div class="rigaavvidx">...</div>
</div>
<div class="rigaavviwhite">
<div class="rigaavvisx">...</div>
<div class="rigaavvidx">...</div>
</div>
...
[code]

potresti marcare con la definition list

<dl>
   ...
   <dt>Gara</dt>
   <dd>1578741</dd>

   <dt>Descrizione Lavori</dt>
   <dd>Gara n. 08_76PA: Lavori di variazione plano-altimetrica Cod. V39/10_3 (14E)</dd>
</dl>

[mosquito70]

Originariamente inviato da fcaldera
ti basta forzare left: 0; sull'elemento .rigaavvisx

comunque se posso dare un suggerimento potresti
- evitare di usare posizionamenti relativi e assoluti usando piuttosto i float
- usare marcatura adatta: invece di

[code]
<div class="rigaavviwhite">
<div class="rigaavvisx">...</div>
<div class="rigaavvidx">...</div>
</div>
<div class="rigaavviwhite">
<div class="rigaavvisx">...</div>
<div class="rigaavvidx">...</div>
</div>
...
[code]

potresti marcare con la definition list

<dl>
   ...
   <dt>Gara</dt>
   <dd>1578741</dd>

   <dt>Descrizione Lavori</dt>
   <dd>Gara n. 08_76PA: Lavori di variazione plano-altimetrica Cod. V39/10_3 (14E)</dd>
</dl>

Grazie per i suggerimenti.
In effetti ancora non avevo risolto.

Applico quello che mi hai suggerito e vi comunico come va.

ciao

[mosquito70]

L'allineamento a sinistra è ok.

Per la questione delle definition list, ho dei dubbi, anche perchè finora non le ho mai usate.
Il fatto è che, come nell'esempio http://www.abacada.it/esempio.jpg gli stili delle varie righe dell'avviso, possono essere diverse l'una dall'altra.

Per questo avevo scelto i Div.

Ma probabilmente, ci sarà sicuramente una soluzione più "pulita".

Grazie ancora

[mosquito70]

Continuo a scrivere su questo 3D, sperando di non violare il regolamento, perchè sono arrivato finalmente ad una versione abbastanza buona (sia per IE, che per FF).

Quello che rimane ora da risolvere, alcune righe dell'avviso, ovvero quelle che fanno riferimento a "Gara" e "Pubbl.ne".

Gara
Le informazioni sulla procedura e su "urgente" sono opzionali e, se presenti entrambe, devono essere nell'ordine come nella figura. Può capitare però, che non sia indicata "procedura", ma sia indicato "urgente".

Pubbl.ne
Le informazioni sulla data e ora, sono opzionali. In questo caso però l'ora sarà presente solo se c'è anche la data.

Il dubbio è come posizionare questi elementi nelle loro rispettive righe, ovvero se usare ulteriori "div" oppure pensare ad altro.

Ripropongo l'esempio: http://www.abacada.it/esempio.jpg

e lo stato di avanzamento attuale: http://www.abacada.it/bollprova.html (Css)

Grazie per qualsiasi suggerimento
Ciao

[mosquito70]

Rieccomi di nuovo a scrivere.

Ho risolto tutti problemi che avevo inserito in questo 3D, ma ora avrei bisogno di un ultimo aiuto.

Dopo aver "scritto" la colonna di sx e quella di dx, dovrei tornare a "scrivere" su quella di sinistra e così via, simulando un cambio pagina, che nella precedente versione del bollettino (strutturato con istruzioni table html) effettuavo con questa istruzione

<P STYLE="page-break-after: always">

Ora, purtroppo, non funziona più

Avete qualche suggerimento in proposito?

Probabilmente dovrei agire "semplicemente" sul "conteiner", che presenta questo codice... ma non riesco a capire come...

div#container{width: 953px;
		height: 1380px;
		margin: 0 auto;
    		border-left: 0px solid green;
    		border-right: 0px solid green;
    		border-top: 0px solid green;
    		border-bottom: 0px solid green;
    		color: #000;
    		text-align: justify}