Foros del Web » Creando para Internet » CSS »

separar imagen de texto en una lista

Estas en el tema de separar imagen de texto en una lista en el foro de CSS en Foros del Web. Tengo una lista ordenada con imagenes en lugar de la tipica flechita o puntito, el caso es que se pega mucho el texto a la ...
  #1 (permalink)  
Antiguo 30/07/2012, 05:00
 
Fecha de Ingreso: enero-2004
Mensajes: 33
Antigüedad: 20 años, 3 meses
Puntos: 0
separar imagen de texto en una lista

Tengo una lista ordenada con imagenes en lugar de la tipica flechita o puntito, el caso es que se pega mucho el texto a la imagen y no hay manera de separarlo, he probado con margin, paddin,....y no hace caso ...me deplaza todo el conjunto (imagen y texto)....alguien me puede decir como separar el texto de la imagen en una lista?

<ul>
<li><img src="btn1mini.jpg" />Pagina 1</li>
<li><img src="btn2mini.jpg" />Pagina 2</li>
<li><img src="btn3mini.jpg" />Pagina 3</li>
</ul>


Gracias.
  #2 (permalink)  
Antiguo 30/07/2012, 05:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: separar imagen de texto en una lista

Primero : aprendiendo HTML y CSS.

http://www.librosweb.es/referencia/c...yle-image.html

Después : vemos cuál es el problema (si hay).


usando css y viñetas #5

Viñetas personalizables. #6
  #3 (permalink)  
Antiguo 30/07/2012, 05:57
 
Fecha de Ingreso: enero-2004
Mensajes: 33
Antigüedad: 20 años, 3 meses
Puntos: 0
Respuesta: separar imagen de texto en una lista

gracias por linkarme a estos link, pero es una cuestión de diseño la que planteo....y es que no hay algo raro en las listas pues parece que no hacen caso al css cuando le aplicas algun atributo como margin o padding para separar la imagen de la lista con respecto del texto y que no quede tan junto pues queda feísimo....

Hay alguna propiedad que permita separar la imagen del texto en una lista?...
  #4 (permalink)  
Antiguo 30/07/2012, 06:10
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: separar imagen de texto en una lista

De nada.

¿Viste que estás poniendo mal las imágenes de viñeta? ¿A eso llamas "cuestión de diseño"?

Porque una cuestión de diseño para terminar en ese invento, sería usar listas de definición y no listas sin orden.

Y también las puedes poner de fondo.

Si realmente tienes un problema, y no estás inventando lo que no existe, pon un código que podamos probar y lo vemos en tu modelo.
(Por supuesto que un "código que podamos probar" significa que va entre <html> y </html> con las rutas de imagen absolutas y usando para mostrarlo una etiqueta como [code] en vez de dejar el código suelto en el medio del texto.)
  #5 (permalink)  
Antiguo 30/07/2012, 08:11
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: separar imagen de texto en una lista

las imagenes de una lista deben ir como background.
Código CSS:
Ver original
  1. li{
  2. background:url(imagen.jpg);
  3. }

luego ya puedes poner margin o padding, si no te funciona a lo mejor es por que las listas tienen propiedad inline y no block.
  #6 (permalink)  
Antiguo 30/07/2012, 08:11
 
Fecha de Ingreso: enero-2004
Mensajes: 33
Antigüedad: 20 años, 3 meses
Puntos: 0
Respuesta: separar imagen de texto en una lista

vale, ahi pongo el código de la página....no creo que esten mal puestas las imagenes en la lista....¿por que dices eso?....yo veo perfectamente las imagenes en el navegador una debajo de otra y el texto al lado de cada botoncito....las imagenes son imagenes (son botones con nº dentro)...como ya dije he probado a poner el atributo de margin en el .css y con padding tambien he probado y el texto no se separa de la imagen.....

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<link href="estilos/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>

<ul>
<li><img src="imagenes/Botones/btn1mini.jpg" />boton 1</li>
<li><img src="imagenes/Botones/btn2mini.jpg" />boton 2</li>
<li><img src="imagenes/Botones/btn3mini.jpg" />boton 3</li>
</ul>

</body>
</html>
  #7 (permalink)  
Antiguo 30/07/2012, 08:33
 
Fecha de Ingreso: enero-2004
Mensajes: 33
Antigüedad: 20 años, 3 meses
Puntos: 0
Respuesta: separar imagen de texto en una lista

vale....ya lo he conseguido....era simple....hacer un style="margin-right:10px" y ya está....pero una cosa curiosa es que lo tengo que hacer en el código, dentro de la etiqueta <li><img src="imagen.jgp" style="margin-right:10px"> porque si lo hago en el .css no me funciona....es raro pero por lo menos funciona.....
Gracias.
  #8 (permalink)  
Antiguo 30/07/2012, 08:44
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: separar imagen de texto en una lista

de todos modos no es recomendable, las imagenes de una lista no deben ir dentro de la lista y mucho menos si todas son iguales.

aparte eso de meter estilos en la página igual tache, puedes acceder a la imagen así
Código CSS:
Ver original
  1. li img{
  2.     margin-right:10px
  3. }
  #9 (permalink)  
Antiguo 30/07/2012, 09:30
 
Fecha de Ingreso: enero-2004
Mensajes: 33
Antigüedad: 20 años, 3 meses
Puntos: 0
Respuesta: separar imagen de texto en una lista

gracias amigo...seguire tu consejo...
  #10 (permalink)  
Antiguo 30/07/2012, 10:36
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: separar imagen de texto en una lista

Lástima que no seguiste el mío, ¿no?.


Ya sé que te estoy debiendo algo, memoadian, pero gracias a estos mensajes de impresentables como rstapia me parece que me lo voy a ahorrar.

¿No te resultó extraño que posteara como lista algo tan mal hecho?
Ok, el Foro se llenó con estos especímenes que publican cualquier cosa, lo que no significa que tengamos que tolerarlos, ni mucho menos aceptarlos como algo natural.
Seguramente habrás notado la secuencia de imágenes (algo que CSS aún no tiene previsto y reclamamos hace rato, junto con las viñetas unicode), pero lo cierto es que la consulta original viene por un espaciado.

Por supuesto que es nuestra obligación (ahora, después de ese engendro que puso rstapia) mostrar la forma correcta de hacerlo, y después vemos el tema de la secuencia.
Que por otro lado ya se lo dejé resuelto con el background, sólo por si su diseño (global) tenía alguna dificultad más para separar la imagen del texto.

¿Leíste que le reclamé por su obligación de postear el código completo?
¿Y no te extrañó también que como respuesta pusiera otra vez el código sin sus etiquetas BBCode, y sin el CSS ... pero mostrando que sí existía en su <link />?
¿Y que discuta que las viñetas están bien puestas, cuando sabe que están mal —más allá de que lo "necesite" para un diseño en particular—, porque encima está en el enlace que le dejé?

¿Y que sabiendo que tiene las imágenes en línea con el texto simulando que son marcadores de lista no se le "ocurriera" darle un margen para separarlas? [NOTA para los muuuuy novatos : eso es CSS elemental.]


Si realmente piensas que alguien puede ser tan idiota como para postear esos mensajes, lo tuyo, mi amigo, ya se pasa de lo que llamamos "fe en la humanidad".
  #11 (permalink)  
Antiguo 30/07/2012, 12:09
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: separar imagen de texto en una lista

Yo solo vengo a tratar de ayudar, no a quejarme del nivel de las preguntas y los preguntadores.
  #12 (permalink)  
Antiguo 30/07/2012, 12:26
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: separar imagen de texto en una lista

Si por imagen te refieres a la viñeta y no a una imagen anidada para otro fin, entonces tenes la posibilidad de usar list-style-imagen y luego padding para separar. (si ya lo han mencionado disculpas, no lo vi)

<offtopic>Paz, que afortunadamente todos pensamos distinto y nadie nace sabiendo. (Si están pagando por las respuestas hagan el favor de avisarme porque no me enteré)</offtopic>
  #13 (permalink)  
Antiguo 30/07/2012, 12:55
 
Fecha de Ingreso: enero-2004
Mensajes: 33
Antigüedad: 20 años, 3 meses
Puntos: 0
Respuesta: separar imagen de texto en una lista

vale, ahora me toca....para suroya....creo que aqui el único impresentable que hay eres TÚ, con tu prepotencia y arrogancia que demuestras.... cuando posteas algo en algun foro es con la intención (o por lo menos yo) de que te puedan ayudar pues no sabes hacer algo o te has atascado con algo (que a menudo puedes ser que sea una tonteria...para el que sabe) pero que muchas veces da bastante lata (para el que no sabe)....nunca he querido menospreciar a nadie (como tu lo haces) que por creertelo no sabes la pena que das.....pues bien....el problema residia en algo que en este caso yo no era capaz de solventar con los pocos conocimientos que tengo de este tema (que seguro que te doy mil vueltas en otros), y agradeciendo siempre la ayuda de antemano que me han prestado algunos colaboradoras he conseguido pasar este escalon.....GRACIAS....sin embargo a otros personajillos (por llamarte de alguna manera) pues que piensen antes de postear algo pues no todos hemos nacido sabiendo (aunque parece que tu sí), así que, si expongo este post es para mandarte a tomar por donde amargan los pepinos.....
  #14 (permalink)  
Antiguo 30/07/2012, 13:08
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: separar imagen de texto en una lista

Cita:
Iniciado por cristian_cena Ver Mensaje
Si por imagen te refieres a la viñeta y no a una imagen anidada para otro fin, entonces tenes la posibilidad de usar list-style-imagen y luego padding para separar. (si ya lo han mencionado disculpas, no lo vi)
como se pudo olvidar jeje.
  #15 (permalink)  
Antiguo 19/08/2012, 07:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: separar imagen de texto en una lista

Perdón, ¿lo de "suroya" es algún doble sentido con error de ortografía?

En realidad no espero que respondas, después de tu mensaje anterior, supongo que los moderadores ya te echaron a patadas del Foro —sería lo mínimo—. El insulto velado quedaría como una anécdota.

Lamento haber tardado tanto en volver a este tema, pero tenía cuestiones personales y laborales que no me dejaban postear más que algunos mensajes poco elaborados, y como con éste ya tuve problemas, lo fui dejando hasta ver mejor cuál era la cuestión que me plantearon en privado.

De cualquier forma vamos actualizando. De atrás para adelante.

No "se (te) olvidó", memoadian. Tienes la mala costumbre de acotar sin leer, y sin saber, y sin entender de lo que hablamos. Con haber visto mi primer post alcanzaba, porque allí quedó resuelto todo el asunto. Lo demás que fueron agregando es basura para arruinar el Foro. Incluyendo tu "explicación" de que las viñetas se ponen como fondo. Primero se aclara cómo se hace correctamente pensando en toda la gente que viene a aprender y ampliar conocimientos leyendo lo que posteamos; después inventamos engendros ad-hoc.

A cristian_cena no se lo critico porque no tiene costumbre de regar fuera del cantero, ya dijo (sabrá por qué) que no vio todo el tema, y se disculpó previendo que su aclaración estuviese repetida (lo estaba, fui el primero en hacerla). No entendí lo del pago de respuestas, pero debe ser también porque no leyó todo el tema y no sabe que el punto es la falta de respeto de algunos de ustedes hacia la comunidad en general y hacia algún miembro en particular.

De cualquier forma (y aunque haya llegado un poco tarde) como siempre trato de aclarar que no estoy ofendido por los comentarios vertidos en este tema (OK, tampoco me voy a hacer problemas por lo que diga un rstapia) y no quiero ser un motivo para que sancionen a nadie, pero entiendo cuando los moderadores vienen a poner un límite.

Por lo general, el límite en lo que tenga que ver conmigo lo suelo poner yo (desde mí, y hacia los demás) y no voy a pedir que lo venga a poner otra persona. En el caso de mensajes como los de rstapia, que ya son un desprecio y una falta de respeto a la comunidad, podría hacerlo, pero siempre recuerdo que estamos en un foro de debates. Las cuestiones se resuelven primero debatiendo, y después de su derrape vergonzoso ya se terminó la discusión. De ahí no se puede levantar más. No pienso quejarme de alguien que me regala una victoria

Y volviendo a tí, memoadian, la manera de ayudarnos es quejarte del pésimo nivel (y la intención) de los posteos, porque nos arruinan el sitio.
Insisto: una cosa es equivocarse, y otra muy distinta es hacer las cosas mal. Nadie tolera a los que vienen a hacer las cosas mal.

Etiquetas: imagenes, lista
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 21:22.