Problema con estilo de lista e imagen

[ricardogomezp]

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.

[Triby]

Esta bien que pongas una imagen, pero es mucho mejor mostrar el codigo para poder encontrar una solucion.

[ricardogomezp]

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> 

[Triby]

Prueba con display:block; en lugar de inline.

[ricardogomezp]

Gracias por el interés. Tampoco funciona.

[Mikmoro]

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

ul {margin-left: 20px;}

[ricardogomezp]

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?

[Mikmoro]

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

Iniciado por ricardogomezp

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.

[ricardogomezp]

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.

[Mikmoro]

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.

[ricardogomezp]

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

[Mikmoro]

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;}

[ricardogomezp]

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