Newsgroup: it.comp.www.html
Titolo: tabelle e div

 Ciao a tutti
ho questo problema: vorrei impaginare serie di dati ottenendo lo
stesso effetto di una tabella ma utilizzando dei div.
ho letto su vari siti come fare, ma ci sono alcune cose che no mi
riscono:
Prima il codice con quello  che ho fatto:
css
.riga{
    height:30px;
    width: 600px;
}
.col1{
    position:absolute;
    left:170px;
    width:100px;
    height:22px;
    border: 1px solid gray;
    display:inline;
}
.col2{
    position:absolute;
    left:275px;
    width:20px;
    height:22px;
    border: 1px solid gray;
    display:inline;
}
html
<div class="riga">
            <div class="col1">uno</div>
            <div class="col2">due</div>
</div>
Ora le domande:
1) per la col1 ho dovuto mettere left=170px perchè ho la classica
barra  laterale:non ho capito come mai il div riga la considera,
mentre il colonna no... probabilmente per via dell'absolute. c'e' un
modo per evitare questo? non vorrei dover andare a cambiare tutti i
vari col.. del sito se dovessi cambiare la larghezza della barra
laterale.
2) per la riga ho messo width: 600px; ma quello che vorrei è che la
width fosse tutta la largezza diposnibile sul browser eccetto la barra
laterale. se pero' metto 100% mi compare la barra di scorrimento
orizzontale... come posso fare?
3) per l'intestazione della tabella ho duplicato le classi col1 e col2
inserendo font-weight: bold; e eliminando il border. c'e' un modo più
intelligente di farlo? nel senso che in pratica sto duplicando delle
classi, e se decido di cambiare la  larghezza della colonna lo devo
fare in 2 punti...
Per ora è tutto, grazie a chi avrà voglia di rispondermi!
Ciao
Alessandro
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 effetto di una tabella ma utilizzando dei div.
Perche`?
Se sono dati tabellari, usa le tabelle.
Spero non sia per avere un rendering progressivo in Firefox su una pagina 
con molti dati... :P
Bye.



ma, a dir la verità sono una serie di textfield, con alla fine della
riga un bottone salva. Non so dire perchè (forse ho mal interpretato
quanche articolo), ma pensavo fosse meglio utilizzare i div... il
rendering progressivo non so cosa sia...
Grazie ciao


 riga un bottone salva. 
Che è diverso da quello che "una serie di dati" lasciava intendere.
Il concetto è: se hai dati per propria natura tabellari si devono 
presentare con un table, quello che è sconsigliato è usare table per 
disporre visivamente gli elementi nella pagina.


 Newsgroup robomoderato - gli articoli vengono approvati automaticamente
Effettivamente ho riletto il mio post e mi sono spiegato male...
volevo semplificare al massimo la domanda, sperando di renderla più
chiara...
Quindi in questo caso è corretto utilizzare i div, giusto?
Grazie, ciao


 quanche articolo), ma pensavo fosse meglio utilizzare i div...
OK, ora e` piu` chiaro.
Devi decidere cosa ti serve. Quando premo "salva" sulla terza riga ma ho 
modificato anche la quinta e la sesta, cosa succede? Salva solo la terza o 
anche le altre?
Nel primo caso hai un form per riga, nel secondo uno per tutta la tabella.
Nel primo caso, secondo lo standard XHTML, non puoi usare le table, 
perche` non puoi avere un <form> dentro un <tr>, quindi devi per forza 
usare i div.
Io farei cosi`:
<form ...>
 <div class="riga">
  <input class="col large" />
  <input class="col small" />
  ...
  <input class="col medium" />
 </div>
</form>
E il css
div.riga {
 width: 600px;
 clear: both;
 overflow: auto;
}
input.col {
 float: left;
 width: 50px;
}
input.large {
 width: 100px;
}
input.small {
 width: 20px;
}
input.medium {
 width: 60px;
}
...



Grazie, sei stato molto di aiuto. (funziona anche con in div invece
degli input)
il mio errore era che mi ero fissato con i vari position absolute ecc
e mi incasinavo la vita, mentre invece semplicemente era sufficiente
non specificare nulla, se non il float:left.
e forse anche
 clear: both;
 overflow: auto;
(ma confesso che non ho capito molto a cosa servano questi ultimi 2)
vedendo poi il tuo esempio mi č anche venuto in mente come risolvere
in maniera pių intelligente il problema dell'intestazione:
in pratica ho messo la classe titoloRiga con font in grassetto, e ho
associato 2 classi al div riga.
Grazie ancora,
ciao
