16-may-2008, 17:11
|
#1 (permalink) |
 Fecha de Ingreso: febrero-2004
Ubicación: Asturias
Mensajes: 148
 |
Maquetar índice de un libro
capítulo 1 .................................................. ....... 3 capítulo 3 .................................................. ......34 bla .................................................. .............. 232 ¿alguien sabe cómo poder hacer esto con css? gracias de antemano |
|
|
|
17-may-2008, 09:31
|
#2 (permalink) |
Fecha de Ingreso: abril-2008
Ubicación: Valencia, España
Mensajes: 151
|
Respuesta: Maquetar índice de un libro
CSS:
Código:
- 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.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 }
- 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-may-2008 a las 10:12. Razón: Mejorada representación en Firefox, y un mayor control de los estilos |
|
|
|
|
17-may-2008, 10:36
|
#3 (permalink) |
|
Colaborador
Fecha de Ingreso: octubre-2006
Ubicación: A tu espalda
Mensajes: 2.861
|
Respuesta: Maquetar índice de un libro
Cita:
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.
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 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. |
|
|
|
|
17-may-2008, 10:54
|
#4 (permalink) |
|
Colaborador
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 1.042
|
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 FulcinitiEspero que sea útil. Saludos! |
|
|
|
 |
| Herramientas | |
| Desplegado | |
|
|
Mode Lineal
