Avisos
Vaciar todo

Ayuda en CSS  

 
David UdV
 David UdV
Estimable Member

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,

Citar
Respondido : 12/07/2011 1:00 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

      ResponderCitar
Respondido : 12/07/2011 7:33 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

David UdV
 David UdV
Estimable Member

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,

ResponderCitar
Respondido : 13/07/2011 9:28 am
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

      ResponderCitar
Respondido : 13/07/2011 4:01 pm

David UdV
 David UdV
Estimable Member

Hola John,

Sí, creo que finalmente así lo haré. O eso o pondré la

    sin imágen de fondo.

    Gracias,

    ResponderCitar
Respondido : 14/07/2011 9:17 am
Jordi Sala
 Jordi Sala
Miembro Admin

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,

ResponderCitar
Respondido : 14/07/2011 10:39 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress