Maquetar índice de un libro

[undariarose]

Hola a todos. Llevo unos días dando vuentas a esto:

capítulo 1 .................................................. ....... 3
capítulo 3 .................................................. ......34
bla .................................................. .............. 232

¿alguien sabe cómo poder hacer esto con css?

gracias de antemano

[nedrek]

CSS:

Código:

div.linea { width: 350px; line-height: 40px; height: 40px; background: #fff url(punto.gif) left 25px repeat-x;   }
.texto { background: #fff }
div.titulo { width: 300px; float:left }
div.pag { width: 50px; float:left; text-align: right }

- La imagen punto.gif será de unos 3px de ancho y largo, con un pixel negro en la esquina arriba derecha, para dar el efecto de punteado al repetirse.

- Respecto a lo principal, debes tener en cuenta que el line-height y el height del div.linea, deberás modificarlos a la par, a la vez que posicionas el punteado a la altura que quede bien (ahora lo he dejado en 25px).


HTML:

Código:

<div class="linea">
  <div class="titulo"><span class="texto">capítulo 1</span></div>
  <div class="pag"><span class="texto">3</span></div>
</div>

<div class="linea">
  <div class="titulo"><span class="texto">capítulo 4</span></div>
  <div class="pag"><span class="texto">34</span></div>
</div>

<div class="linea">
  <div class="titulo"><span class="texto">bla</span></div>
  <div class="pag"><span class="texto">232</span></div>
</div>

Hay muchas opciones para mejorarlo, pero he sido fiel a lo que pedías..


Esto se merece un premio, no? Espero que te sirva!!!




---------------------------
Si te ayudó, pincha el Karma
Un Saludo!

[Mikmoro]

Iniciado por undariarose

Hola a todos. Llevo unos días dando vuentas a esto:

capítulo 1 .................................................. ....... 3
capítulo 3 .................................................. ......34
bla .................................................. .............. 232

¿alguien sabe cómo poder hacer esto con css?

gracias de antemano

Pues yo sin embargo creo que nos saltamos de rosca. Me explico: hemos dejado de usar las tablas para maquetar, que es lo lógico y lo que debemos hacer, pero nos ponemos a exagerar y dejamos de usarlas también para tabular datos.

Yo diría que un índice de un libro son datos tabulados (cada capítulo o sección con su número de página alineado a la derecha), y yo creo que deberías hacerlo en una tabla. Juraría que es hasta más semántico.

Es mi opinión.

Mikel.

[Daniel Ulczyk]

Sin entrar en el terreno de la retórica y hasta, en este caso, la validez semántica de como debiera ser el markup apropiado para este tipo de datos, yo tengo en mis marcadores un página que muestra como mostrar con listas y CSS algo parecido.

CSS Styled Restaurant Menu by Alessandro Fulciniti

Espero que sea útil.
Saludos!