Lista: indice-sommario [era: Domanda riguardante le lista]

[yappappeo]

Ciao a tutti,
ho una domanda un pò particolare, non so se risolvibile mediante CSS. Dovrei creare degli elenchi che dovrebbero apparire come un indice di un libro, ovvero con il titolo allineato a sinistra, il numero pagina allineato a destra ed una linea tratteggiata (puntini) che va dal titolo al numero (come quando si usa la tabulazione su programmi come InDesign o Quark):

titolo#1..........pag.x
titolo#2..........pag.y
titolo#3..........pag.z
titolo#4..........pag.p
ecc...

Secondo voi è possibile realizzare una cosa del genere?

[Mich_]

Non so. Io proverei una cosa del genere:

HTML
<ul>[*]<span class="tit">titolo#1</span><span class="pag">pag.x</span>
  ...[/list]

CSS:
ul {
  width: 100%;   /* deve essere definito il width del contenitore */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  background: url(sottol.gif) repeat-x bottom left;
}
.tit {
  display: block;
  float: left;
}
.pag {
  display: block;
  float: right;
}

L'immagine deve essere un puntino (1x1 px) posizionato in alto a sin in uno sfondo trasparente largo 2 o 3 px, alto 2 px; o comunque una cosa di quel tipo.