Foros del Web » Creando para Internet » CSS »

Problema con estilo de lista e imagen

Estas en el tema de Problema con estilo de lista e imagen en el foro de CSS en Foros del Web. Saludos. Tengo un problema con una lista, y una imagen. Como se puede ver acá: http(:)//img144.imageshack(.)us/my.php?image=como.png mostrado con las flechas rojas. En sí es que ...
  #1 (permalink)  
Antiguo 27/02/2009, 09:11
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Problema con estilo de lista e imagen

Saludos. Tengo un problema con una lista, y una imagen. Como se puede ver acá: http(:)//img144.imageshack(.)us/my.php?image=como.png mostrado con las flechas rojas.

En sí es que tengo una imagen y hacia la izquierda está una lista pero los puntos (o viñetas, la forma de separar cada elemento) se ponen debajo de la imagen, esto es: la imagen y la lista quedan demasiado juntas.

¿Como podría separarlas? Le apliqué padding pero no funciona al igual que margin. O quizás lo hice mal.

Gracias.
  #2 (permalink)  
Antiguo 27/02/2009, 15:53
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Problema con estilo de lista e imagen

Esta bien que pongas una imagen, pero es mucho mejor mostrar el codigo para poder encontrar una solucion.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 27/02/2009, 15:59
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Problema con estilo de lista e imagen

Ok. El CSS:
Código:
...
img.alignleft {float:left;display:inline;margin:0 7px 2px 0;padding:4px;}img.center {display:inline;margin:auto;}
El Html:
Código HTML:
<p>Párrafo</p>
<img class="alignleft" src="../images/imagen.jpg" alt="Texto alternativo"/>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
    </ul> 
  #4 (permalink)  
Antiguo 27/02/2009, 16:21
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Problema con estilo de lista e imagen

Prueba con display:block; en lugar de inline.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 27/02/2009, 16:32
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Problema con estilo de lista e imagen

Gracias por el interés. Tampoco funciona.
  #6 (permalink)  
Antiguo 27/02/2009, 16:52
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: Problema con estilo de lista e imagen

Pero bueno, imagino que al que intentas dar el margen izquierdo es a la lista UL, ¿no?

ul {margin-left: 20px;}
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 02/03/2009, 08:23
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Problema con estilo de lista e imagen

Cita:
Pero bueno, imagino que al que intentas dar el margen izquierdo es a la lista UL, ¿no?

ul {margin-left: 20px;}
Si hago eso lo único que consigo es que la lista se separe del borde del div, tengo algo así:

|----------|. elemento 1
|imagen---- |. elemento 2
|----------|. elemento3
. elemento 4

Es decir, la imagen está entre los elementos de la lista, si hago lo que tu Mikmoro gentilmente me indicas pues me resulta algo así:

|----------|. elemento 1
|imagen---- |. elemento 2
|----------|. elemento3
[espacio de margen]. elemento 4

Los elementos que rodean la imagen quedan en el mismo sitio, pero como estoy marginando la lista pues quienes no tiene imagen se mueven hacia la derecha. No se si logro hacerme entender. Esto ya lo había intentado antes pero bueno, lo probé nuevamente para ver si había errado en algo pero ya veo que no
¿Alguna otra idea?
  #8 (permalink)  
Antiguo 02/03/2009, 11:27
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: Problema con estilo de lista e imagen

Pues lo siento, no te entendí, y efectivamente, sigo sin hacerlo en absoluto.

Cita:
Iniciado por ricardogomezp Ver Mensaje
esto es: la imagen y la lista quedan demasiado juntas.
Esto es a lo que yo había respondido. Lo de ese cuarto elemento fuera de la imagen no sé qué quiere decir.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 03/03/2009, 15:17
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Problema con estilo de lista e imagen

Mmmm haber lo que sucede es que tengo una lista formada por 4 elementos, de esos cuatro elementos 3 tienen una imagen a la izquierda y el cuarto al ser la imagen más pequeña que el contenido de la lista pues este último elemento se ubica inmediatamente debajo de la lista. Si pongo como tu me dices Mikmoro lo único que consigo es que se mueva solo el cuarto elemento y el 1, 2 y 3 siguen tan pegados como antes a la imagen, pero el cuarto elemento si se mueve.

Ojalá haya conseguido explicarme mejor porque he sido redundante en algúnos terminos que ya me irrité la vista con tremenda redacción jejeje.
  #10 (permalink)  
Antiguo 03/03/2009, 16:41
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: Problema con estilo de lista e imagen

Pero a ver: el margen izquierdo de 20px era un simple ejemplo. Ponlo como te puse, pero dándole 10 o 20px más que lo que mida la imagen de ancho. De esa manera, tanto los tres elementos de arriba como el cuarto quedarán a la misma distancia de la izquierda.

Te juro que será culpa mia, pero sigo sin saber si es es lo que quieres hacer. Lo siento.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 04/03/2009, 08:17
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Problema con estilo de lista e imagen

Jajaja que lío, haber si logro explicarme mejor como dicen que una imagen vale mas que mil.... haber lo que yo quiero lograr es algo así: tres elementos de la lista a la izquierda de la imagen y el cuarto al mismo nivel de la imagen, pero si hago lo que tu me indicas obtengo esto:

Mi pregunta es: ¿Como logro cambiar de esto que es lo que tengo actualmente a lo que quiero obtener? Fijate como la imagen queda montada sobre las viñetas y se ve horrible.

Nota: Todo está hecho en word, no vayas a pensar: si ya lo logró ¿Por qué sigue preguntando? jejeje
  #12 (permalink)  
Antiguo 04/03/2009, 08:30
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: Problema con estilo de lista e imagen

Excelente, ahora sí lo entiendo (ya me ha costado).

¿Has probado a dar un padding derecho de 16px (por ejemplo) a la imagen?

img.alignleft {float:left;display:inline;margin:0 7px 2px 0;padding-right:16px;}
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 04/03/2009, 08:53
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Problema con estilo de lista e imagen

Cita:
Le apliqué padding pero no funciona al igual que margin. O quizás lo hice mal.
Jaja parece que en efecto así fue porque la vuelvo a probar y quedó excelente. Gracias por el apoyo y mil disculpas por las molestias, al final quedó así el código del CSS:
Código:
img.alignleft {float:left;display:inline;margin:0 7px 2px 0;padding:4px 14px;}
Saludos
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 23:58.