Lista con tabulazioni

**salasir** · 05-11-2007, 17:46

E' possibile realizzare una lista in cui ogni elemento è composto da tre parole, ognuna allineata in colonna con le sottostanti, tipo tabulazione?

Es.:

1. Pippo.............Topolinia............Blu
2. Paperino.........Paperopoli..........Rosso
3. Tip................xxxx..................Verde
...
...

PS i puntini sono solo per posizionare le colonne

[edit]Beh ... l'allineamento lascia un po' a desiderare, ma spero riusciate a capire.[/edit]

**Mich_** · 05-11-2007, 18:05

... Potresti anche ricordarti che esiste il [ code ] per formattare il testo nel forum ...

Per ripondere: 3 possibilita` (che vedo io):
1. usare una lista di definizione <dl>, in cui nei <dt> ci metti Pippo, Paperino, ... e nei <dd> ci metti il resto; e` necessario anche uno <span> (o sim - ma deve essere definito di tipo blocco) per spostare a destra gli elementi della terza colonna
2. usare una lista ed all'interno usare dei blocchi (<span>? <div>?)
3. usare una tabella (e` uno dei casi in cui l'uso di una tabella e` corretto: tra gli elementi c'e` relazione di linea e colonna.

Se la cosa e` semanticamente una lista, le prime due soluzioni sono da preferire; se invece e` una tabella, la terza e` l'unica corretta

Non sto a spiegarti come formattare le liste o le tabelle: quello lo sai fare; l'importante e` impostare la marcatura corretta.

**salasir** · 05-11-2007, 18:15

E' tutto il giorno che ci sto provando, ma:
[list=1][*]Con le liste di definizione in IE in marcatore viene leggermente più in basso dell'elemento, mentre con FF viene decisamente più in alto[*]Con dei blocchi (ho usato span) non riesco a dare una dimensione ad ogni colonna, oppure risco a darla ma si spostano tutti uno sotto l'altro ...[/list=1]

Evidentemente sbaglio qualcosa.
Domani cerco di ricostruire tutti gli esperimenti per postarli.

... Potresti anche ricordarti che esiste il [ code ] per formattare il testo nel forum

Di solito lo uso, quando indico del codice, ma quanto riportato sopra, il mio cervello non lo considerava codice

**Mich_** · 06-11-2007, 09:48

Di solito lo uso, quando indico del codice, ma quanto riportato sopra, il mio cervello non lo considerava codice

Ah ecco ...
Allora ti do solo alcuni spunti ... il tuo cervello forse si accende correttamente

(Scusa l'ironia, ma sono cose che sicuramente sai, forse ti serve solo un po' di calma e meditazione)

E` cosa nota che dando display: block; i pezzi si sistemano uno sotto l'altro: occorre anche il float: left;: e a quel punto puoi dare la dimensione e anche usare margini e sim.

Invece di usare un marcatore, usa una immagine di sfondo. Poi devi gestire esplicitamente il margin e il padding.

**salasir** · 06-11-2007, 12:22

Allora: Il marcatore è d'obbligo essendo una lista numerata. Solo che con IE scompare.
Avevo risolto con

codice:

ol { width:500px; list-style : inside decimal;}
ol li { display : list-item; clear:both;}

ma utilizzando le liste di definizione scompare di nuovo se lascio la larghezza della lista.

I tentativi sono riassunti qui

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Pagina senza titolo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

ol { width:500px; list-style : inside decimal;}
ol li { display : list-item; clear:both;}

.sx { width: 30%; text-align: left; float:left; display:block;}
.dx { width: 30%; text-align: right; float:right; display:block;}

dl.table-display {margin: 0 10px; 
	height: 1em; line-height: 1em; }

.table-display dt { width: 40%; float: left; display:block;}

.table-display dd { float: left; width: 20%; margin: 0; padding: 0; display:block; }

</style>
</head>

<body>

<h2> con span </h2>
Pippo<span class="sx">Topolinia</span><span class="dx">Blu</span>
Paperino<span class="sx">Paperopoli</span><span class="dx">Rosso</span>
Tip<span class="sx">xxxx</span><span class="dx">Verde</span>

<h2> con dl,dt,dd </h2>
<dl class="table-display"><dt>Pippo</dt>
		<dd>Topolinia</dd>
		<dd><span>Blu</span></dd>
	   </dl>
<dl class="table-display"><dt>Paperino</dt>
		<dd>Paperopoli</dd>
		<dd><span>Rosso</span></dd>
	   </dl>
<dl class="table-display"><dt>Tip</dt>
		<dd>xxx</dd>
		<dd><span>Verde</span></dd>
	   </dl>
</body>
</html>

ma i risultati sono sconfortanti

**Mich_** · 06-11-2007, 13:29

Non avevi specificato che la lista dovesse essere numerata! A quel punto le colonne (in caso di tabella) sono quattro.

E ricorda che non conviene mai forzare la semantica. Inserire una lista <dl> per un solo elemento non ha senso (semanticamente parlando). Comunque forzare la semantica porta spesso ad avere problemi di compatibilita` (in realta` sfrutti un oggetto che ha un suo proprio significato solo per fini di presentazione).

Quindi escludendo le tabelle (che non mi pare soddisfino i tuoi dati), resta la lista ordinata.
Ma dentro la lista devi metterci dei blocchi, altrimenti non riesci ad allineare:

codice:

<h2> con span </h2>

    <span class="nome">Pippo</span>
    <span class="dove">Topolinia</span>
    <span class="col">Blu</span>

    <span class="nome">Paperino</span>
    <span class="dove">Paperopoli</span>
    <span class="col">Rosso</span>

    <span class="nome">Tip</span>
    <span class="dove">xxxx</span>
    <span class="col">Verde</span>

Nota i nomi "semantici" delle classi.
Ho aggiunto la classe attorno al nome, altrimenti non riesco a dare la larghezza al pezzo del nome.

CSS:

codice:

#conspan {
  width: ...;         /* va definito in qualche modo */
  ...
  list-style: ...;      /* se serve */
  line-height: ...;   /* se serve per centrare in vert. */
}
#conspan li {
  width: 100%;     /* largo quanto il [list=1] */
  padding: 0;
  margin: 0 0 0 1.3em;
  clear: left;         /* altrimenti non va a capo */
}
#conspan span {
  display: block;
  float: left;
  /* display: inline;   /* potrebbe servire per sistemare i margini in qualche IE */
}
#conspan .nome {
  width: 30%;          /* o altra unita` di misura */
}
#conspan .dove {
  width: 30%;          /* o altra unita` di misura */
}
#conspan .col {
  width: 30%;          /* o altra unita` di misura */
}

**salasir** · 06-11-2007, 15:24

Quasi bene... solo che in FF l'item va a capo mentre in IE è più alto del marcatore

**Mich_** · 06-11-2007, 15:52

Non conosco la tua pagina nei dettagli (come e` adesso), per cui vado a caso (in base alla probabilita` e a questioni analoghe).

in FF l'item va a capo

Forse il contenuto e` piu` largo del contenitore. Ricorda il box model (che in IE e` diverso). Prova a stringere uno dei blocchi.

in IE è più alto del marcatore

Potrebbe essere un problema di font-size o di line-height (ma e` proprio solo una possibilta`).

Discussione: Lista con tabulazioni

Strumenti discussione

Ricerca discussione

Visualizza

Lista con tabulazioni

Permessi di invio