allineamento div

[barnico]

ho la necessità di usare dei div per allineare dei dati ossia:
dato 1: valore dato 2: valore dato 3: valore pulsante pulsante

il codice:

<div class=contenitore>
<div class=label>dato 1:</div>
<div class=valore>valore></div>
....
</div>

come posso fare?

[Mich_]

Perche` usare dei div? Non sono la soluzione corretta dal punto di vista semantico!

La tua e` una lista, e va quindi resa con i tag di lista: <ul> (lista non ordinata), [list=1] (lista ordinata), <dl> (lista di definizione).

Ora dalla tua spiegazione non ho capito se c'e` una successione regolare di oggetti (nel qual caso la <dl> sarebbe la piu` adatta), o se e` una lista semplice (<ul> o [list=1]).


In alternativa, ci sono le tabelle, da usare solo se gli elementi sono intabellabili, cioe` se c'e` relazione di riga e di colonna.

NOTA: il tuo codice contiene anche errori di sintassi: i valori degli attributi vanno sempre scritti tra virgolette (o apici).

[barnico]

grazie per avermi risposto;
ho la necessità di usare i div perchè devo aver la possibilià di poter applicare formattazioni diverse ai dati;

inoltre forse mi sono spiegato male, io non ho una lista, ma dei dati tipo:
pasta: 50
pane: 40
che devono essere visualizzate in una riga tipo:
pasta 50 pane 40
e questo volevo ottenerlo con la struttura:

<div class="contenitore"> 
<div class="label">dato 1:</div> 
<div class="valore">valore></div> 
.... </div>

questo perchè se mi serve cambiare impostazione cambio solo i valori css.

[Mich_]

Non e` che ti agevoli il lavoro usando strutture sbagliate: semmai te lo complichi.
Ma occorre pensare che non stai facendo la lista della spesa che dopo due ore la butti: stai realizzando una pagina Web, che "vive" anni (in qualche caso anche dieci, venti, ...)
E pensa che il Web sta diventando sempre piu` "semantico": vuol dire che la pagina verra` interpretata non solo da un utente che interpreta il video, ma puo` essere "vista" anche da un cieco, anche da uno strumento automatico: questi non capiranno il signficato se non usi i tag corretti.

La tua e` una lista di definizione. Va realizzata tramite <dl>, <dt>, <dd>:

<dl>
  <dt>pasta</dt><dd>50</dd>
  <dt>pane</dt><dd>40</dd>
  ...
</dl>

Questi sono tutti oggetti di tipo block, esattamente come i <div> che impropriamente vorresti usare.

Ora si presenta il problema di sistemarli tutti su una riga: ci sono due possibilta`:
- li trasformi in oggetti inline (e allora perdono le dimensioni proprie)
- li affianchi con il float (e in tal caso puoi formattarli circa come se fossero in una tabella)
La scelta dipende da te e dal risultato pratico che vuoi ottenere:

/* oggetti inline */
dd {
  /* ... formattazione del blocco contenitore */
}
dt {
  display: inline;
  /* altre formattazioni (colore, carattere, ...) */
}
dd {
  display: inline;
  /* altre formattazioni (colore, carattere, ...) */
}

/* oggetti block */
dd {
  width: ...;
  /* ... altre formattazioni del blocco contenitore */
}
dt {
  float: left;
  width: ...;      /* oppure min-width, con l'hack per IE6 */
  margin: ...;
  display: inline;    /* questo serve solo per far contento IE6 */
  /* altre formattazioni (colore, carattere, ...) */
}
dd {
  float: left;
  width: ...;      /* oppure min-width, con l'hack per IE6 */
  margin: ...;
  display: inline;    /* questo serve solo per far contento IE6 */
  /* altre formattazioni (colore, carattere, ...) */
}

[barnico]

ok va bene, farò come dici.