Foros del Web » Creando para Internet » CSS »

Maquetar índice de un libro

Estas en el tema de Maquetar índice de un libro en el foro de CSS en Foros del Web. Hola a todos. Llevo unos días dando vuentas a esto: capítulo 1 .................................................. ....... 3 capítulo 3 .................................................. ......34 bla .................................................. .............. 232 ¿alguien sabe ...
  #1 (permalink)  
Antiguo 16/05/2008, 18:11
 
Fecha de Ingreso: febrero-2004
Ubicación: Asturias
Mensajes: 171
Antigüedad: 13 años, 10 meses
Puntos: 0
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
  #2 (permalink)  
Antiguo 17/05/2008, 10:31
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 9 años, 7 meses
Puntos: 5
De acuerdo 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
Un Saludo!

Última edición por nedrek; 17/05/2008 a las 11:12 Razón: Mejorada representación en Firefox, y un mayor control de los estilos
  #3 (permalink)  
Antiguo 17/05/2008, 11:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Maquetar índice de un libro

Cita:
Iniciado por undariarose Ver Mensaje
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.
  #4 (permalink)  
Antiguo 17/05/2008, 11:54
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
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!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:10.