Foros del Web » Creando para Internet » CSS »

li con imágen de varias líneas

Estas en el tema de li con imágen de varias líneas en el foro de CSS en Foros del Web. Hola a todos, soy nuevo en el grupo... Bueno ahí va mi problema: tengo un li con una imágen que queda muy bonito cuando el ...
  #1 (permalink)  
Antiguo 11/10/2007, 00:25
 
Fecha de Ingreso: octubre-2007
Mensajes: 6
Antigüedad: 16 años, 5 meses
Puntos: 0
li con imágen de varias líneas

Hola a todos, soy nuevo en el grupo...

Bueno ahí va mi problema: tengo un li con una imágen que queda muy bonito cuando el li es de una sola línea, pero cuando tiene varias no queda la imágen en la primera línea, sino en el medio.

Esto es lo que tengo:
.liconimagen {
background:url(./images/iconoli.gif) no-repeat left center;
list-style-type:none;
padding:0em 0em 0em 1em; /*en firefox debería ser 1em , y en ie 0em*/
}

si pongo el backgorund "top" no queda centrado verticalmente en las li de una sóla línea.

¿Alguien sabe como hacerlo?
  #2 (permalink)  
Antiguo 11/10/2007, 00:32
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Re: li con imágen de varias líneas

Hola elveru. Bienvenido al foro.

Prueba cambiando esta línea:

background:url(./images/iconoli.gif) no-repeat left top;

Saludos,
  #3 (permalink)  
Antiguo 11/10/2007, 00:43
 
Fecha de Ingreso: octubre-2007
Mensajes: 6
Antigüedad: 16 años, 5 meses
Puntos: 0
Re: li con imágen de varias líneas

Muchas gracias por tu rápida respuesta....

El problema que tengo al poner el "top" es que la imágen no queda centrada verticalmente en la línea, queda un poco más alta que el texto, por eso estoy buscando otra solución (si la hay...)

Gracias!
  #4 (permalink)  
Antiguo 12/10/2007, 18:48
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
Re: li con imágen de varias líneas

Hola elveru, ¿podrías poner más parte de los códigos que utilizas o algún ejemplo?
  #5 (permalink)  
Antiguo 16/10/2007, 06:56
 
Fecha de Ingreso: octubre-2007
Mensajes: 6
Antigüedad: 16 años, 5 meses
Puntos: 0
Re: li con imágen de varias líneas

Ahí va un poco de código...

.liconimagen {
background:url(./images/iconoli.gif) no-repeat left center;
list-style-type:none;
padding:0em 0em 0em 1em; /*en firefox debería ser 1em , y en ie 0em*/
}


<ul>
<li class="liconimagen"><strong>aqui el título:</strong> bla, bla bla bla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla blabla, bla bla</li>
<li>otro cosa en solo una línea.</li>
.....
  #6 (permalink)  
Antiguo 16/10/2007, 18:04
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Re: li con imágen de varias líneas

Prueba quizás poniendo que aparezca en la mitad de la primera línea:
background:url(./images/iconoli.gif) no-repeat left 0.5em;

No sé lo correcto que puede resultar ésto, no lo he probado.


Un saludo.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
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 00:06.