Foros del Web - Maquetar índice de un libro

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Maquetar índice de un libro (http://www.forosdelweb.com/f53/maquetar-indice-libro-587295/)

Maquetar índice de un libro

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

Respuesta: Maquetar índice de un libro

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 :si:
Un Saludo!

Respuesta: Maquetar índice de un libro

Cita:

Iniciado por undariarose (Mensaje 2408329)

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.

Respuesta: Maquetar índice de un libro

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!