Avisos
Vaciar todo
Hola,
Tengo un problema que no consigo solucionar... a ver si me podeis ayudar.
Quiero hacer una lista ordenada con un background en cada número. El problema es que no consigo hacerlo.
Si le defino el background al "ol" únicamente puedo decirle que se me repita o no. Si le pongo que se repita lo hace indiscriminadamente en todas las líneas. En cambio, si le defino el background al "li" se me repite correctamente, pero me queda por debajo de la capa de "ol", por lo que no se me visualiza la imagen.
Os adjunto una primera imagen donde aparece el background definido en el "ol".
Os adjunto una segunda imagen de como me gustaría que quedase o lo que trato de conseguir.
Os adjunto una tercera imagen para que veáis lo que conseguido hacer yo.
A continuación teneis el detalle del CSS de la "ol" y la "li" original:
ol.disc {
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 45px;
background: url(../images/typography/list_disc.png) 20px 0px repeat-y;
}
ol.disc li {
margin: 5px 0px 5px 0px;
padding-left: 10px;
font-weight: bold;
line-height: 26px;
}
Aquí el CSS tal y como lo he modificado yo... pero sin que consiga que se vea la imagen (ya que queda tapada):
ol.disc {
padding-left: 26px;
margin: 10px 0px 10px 0px;
}
ol.disc li {
margin: 5px 0px 5px 0px;
padding-left: 10px;
line-height: 26px;
text-align: justify;
background: url(../images/typography/list_disc.png) -20px 0px no-repeat;
}
Saludos,
Respondido : 12/07/2011 1:00 pm
Hola David
Los número de una lista ordenada son generados automáticamente por el navegador, no tienes acceos a ellos y se encuentran a nivel de la etiqueta
- , por lo que colocar una imagen de fondo en estos elementos es un proceso complicado ya que sólo tienes el control parcial.
Te sugiero utilizar un
- y colocar los números en etiquetas span, dentro del elemento li, de esta manera te será más sencillo.
Saludos.
Respondido : 12/07/2011 7:33 pm
Hola Jhon,
Sí, esa era otra opción que tenía como plan B... pero me ahorraría mucho trabajo intentarlo del otro modo.
Saludos,
Respondido : 13/07/2011 9:28 am
Hola David
Creo que si no quieres darle un fondo a los números generados con el
- , creo que no tendrás problema, de lo contrario, tal como te sugerí debes cambiar la estructura de tus etiquetas por
- y otras auxiliares.
Saludos.
Respondido : 13/07/2011 4:01 pm
Hola John,
Sí, creo que finalmente así lo haré. O eso o pondré la
- sin imágen de fondo.
Gracias,
Respondido : 14/07/2011 9:17 am
Hola David UdV,
Otra opción la puedes ver en este apartado de tipografía:
http://templates.joomlart.com/ja_edenite/index.php?option=com_content&view=article&id=56&Itemid=53
Si revisas el código fuente y las CSS puedes ver como está construido.
Saludos,
Respondido : 14/07/2011 10:39 am
