problemi tabella con div e CSS

[Secco_90]

Salve a tutti. Devo realizzare una tablella utilizzando i div ed i css. Il codice che ho usato è il seguente:

<div id="contenuto">
<div class="textbox">
<div class="ontheleft"> Questionario: </div>
<div class="ontheright"> Data Assegnazione: </div>
<div class="ontheright"> Codice: </div>
<div class="ontheright"> </div>
<div class="ontheright"> Argomento: </div>
</div>

<div class="textbox">
<div class="ontheleft"> code </div>
<div class="ontheright"> 08-03-2008 </div>
<div class="ontheright"> AA02BW </div>
<div class="ontheright"> <input..> </input></div>
<div class="ontheright"> aaaa </div>
</div>

...

</div>

con il seguente css:

.textbox div{
width: 156px;
height: 30px;
}

tutto funziona fino a che il testo di ogni singola cella resta su un unica riga. Quando vado a inserire un testo più lungo di 156px questo va automaticamente a capo, sovrascrivendo quello sottostante anzichè spostandolo.

Quello che vorrei è che il "textbox" fosse visto dal browser come un unico blocco e che, quando il testo superi la dimensione massima, venga spostato tutto il blocco sottostante.

[fcaldera]

probabilmente ciò succede perché ontheleft e ontheright (di cui non hai postato le regole css associate) sono flottati. Prova cambiando in

.textbox div {
width: 156px;
height: auto !important;
height: 30px;
min-height: 30px;
overflow: hidden;
}

altrimenti posta le regole restanti relative a quel codice


alcune note a margine:

- se quella è una tabella si deve usare una <table>

- se non lo è potresti usare elementi più adatti per contenere il testo... non esiste il solo tag <div>
se spieghi cosa stai cercando di fare e come lo vuoi allineare probabilmente il codice html può essere ridotto della metà (se non oltre)

- <input ... /> e non <input></input>

[Secco_90]

Scusate è vero... il codice è:

.ontheleft{
float: left;
}

.ontheright{
float: right;
}

comunque quello che vorrei fare è creare una table senza utilizzare il tag <table> in quanto non presente nello standard W3C...

Quindi la classe "textbox" dovrebbe corrispondere al tr, mentre "textbox div" al td...

Ora questo funziona (anche se probabilmente non è la miglior soluzione e accetto di buon grado miglioramenti) finchè tutti gli elementi contenuti nella "pseudo tabella" restano nelle dimensioni settate da CSS (156x30) [che sono così xke utilizzo questa tecnica in un altra "pseudo table" contenente immagini di tale dimensione]. Una volta ke viene a mancare tale condizione si verificano i problemi. Nella mia sooluzione il testo si sovrapponeva



al contrario adottando la tua soluzione il layout va a farsi friggere:



allora ho provato ad applicare il codice che mi avevi consigliato non alla sincola cella "textbox div" ma a tutta la riga:

.textbox{
height: auto !important;
height: 30px;
min-height: 30px;
overflow: hidden;
}

.textbox div {
width: 156px;
height: auto !important;
height: 30px;
min-height: 30px;
overflow: hidden;
}

ottenendo un buon risultato:



A questo punto vorrei solo apportare quelle migliorie di cui stavi parlando.
Ti posto anche il codice relativo ai button:

input,select{
width: 156px;
height: 20px;
}

input.button{
width: 146px;
height: 25px;
padding-left: 5px;
padding-right: 5px;
}

Grazie mille per l'aiuto

[fcaldera]

Originariamente inviato da Secco_90
comunque quello che vorrei fare è creare una table senza utilizzare il tag <table> in quanto non presente nello standard W3C...

ma da quando?

il tag <table> oltre ad essere presente nelle varie DTD, anche in quelle attuali, DEVE essere usato se rappresenti dati tabellari.

nel tuo caso la tabella sarebbe la struttura ideale, hai evidenti intestazioni e relazioni di riga/colonna...

[Secco_90]

Capisco... Allora ho semplicemente buttato via ore e ore di lavoro...

Grazie x il tuo aiuto...