Maquetar índice de un libro

[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!