Foros del Web » Creando para Internet » HTML »

Intercalar texto con imagen.

Estas en el tema de Intercalar texto con imagen. en el foro de HTML en Foros del Web. Hola, Me gustaría hacer más o menos lo que muestra la imagen. Poder poner una imagen a la misma altura de un texto justificado a ...
  #1 (permalink)  
Antiguo 23/06/2010, 05:46
Avatar de ken_masters  
Fecha de Ingreso: febrero-2005
Mensajes: 420
Antigüedad: 12 años, 10 meses
Puntos: 5
Intercalar texto con imagen.

Hola,

Me gustaría hacer más o menos lo que muestra la imagen. Poder poner una imagen a la misma altura de un texto justificado a la izquierda, pero que el texto no le pase por detrás, sinó que haga la forma de la imagen.

¿Es posible?


__________________
Here comes a new challenger?
  #2 (permalink)  
Antiguo 23/06/2010, 09:57
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: Intercalar texto con imagen.

Dejo algunos enlaces que muestran distintas técnicas que se pueden usar para conseguir eso con css y html, pero ten en cuenta que algunas de ellas añaden nuevos elementos al código html, lo que no es óptimo para mantener una estructura limpia y que cumpla los estándares. Si buscas un poco podrás encontrar estas mismas técnicas pero aplicadas con javascript (que se encargará de crear "al vuelo" los elementos necesarios para conseguir lo que quieres sin ensuciar el código base)
http://www.csstextwrap.com/
http://www.theboxoffice.be/
http://meyerweb.com/eric/css/edge/raggedfloat/demo.html
http://flumpcakes.co.uk/css/chef-curv
http://www.cssplay.co.uk/menu/flow
http://www.cssplay.co.uk/menu/embed
http://www.bigbaer.com/css_tutorials....text.wrap.htm
http://www.alistapart.com/articles/crosscolumn2/

Si se utiliza CSS3 puede resultar más fácil, no lo sé.

Última edición por all-ill; 24/06/2010 a las 02:20
  #3 (permalink)  
Antiguo 23/06/2010, 10:06
Avatar de ken_masters  
Fecha de Ingreso: febrero-2005
Mensajes: 420
Antigüedad: 12 años, 10 meses
Puntos: 5
Respuesta: Intercalar texto con imagen.

Gracias por los enlaces, me lo miro.

El código lo necesito para unas páginas que tengo que crear bajo WordPress.
__________________
Here comes a new challenger?
  #4 (permalink)  
Antiguo 23/06/2010, 19:13
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Intercalar texto con imagen.

Amigo, peroeso que tu pides es imposible.
lo que puedes hacer es editar la imagen y a la imagen agregarle el texto, y por ultimo subir la imagen con el texto incluido.

Por que?
no existe ninguna imagen por lados irregulares, todas las imagenes son rectas con 4 lados, asi que es imposible encontrar la imagen de la silueta de la señora con el vestido que tu pones.

tal vez al montar dicha imagen si salga con los lados irregulares, o mjor dicho, eso aparenta, pero en realidad esa imagen sigue manteniendo sus 4 lados como un cuadrado, lo que pasa es que tiene transparencia alfa.

Pero en si,. eso que dices tu, es imposible.
Al menos, a mi criterio si lo es.

y ahora otro punto a tomar en cuenta.
lo quieres todo justificado al mismo margen hacia la izquierda, lo que hara el texto es, pasar por atras o delante de la imagen o dar un salto de linea.

y te vuelvo a repetir, para eso hay que editar los tamaños de anchura de los textos y editarlo, o sea, crear la imagen.

saludos!
  #5 (permalink)  
Antiguo 25/06/2010, 07:50
Avatar de ken_masters  
Fecha de Ingreso: febrero-2005
Mensajes: 420
Antigüedad: 12 años, 10 meses
Puntos: 5
Respuesta: Intercalar texto con imagen.

No todas las imágenes son rectas con 4 lados. En mi caso pretendo que la imagen sea un png con fondo transparente, ¿entiendes?
__________________
Here comes a new challenger?
  #6 (permalink)  
Antiguo 25/06/2010, 17:11
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: Intercalar texto con imagen.

Lo que quiere decir es que a pesar de que la imagen tenga fondo transparente este fondo forma parte de la imagen y por tanto la imagen tiene cuatro lados rectos, dos horizontales y dos verticales. Es decir que no es como un recorte de papel al que puedes darle forma, en una imagen aunque le des la una forma concreta la parte transparente sigue ocupando su espacio.
  #7 (permalink)  
Antiguo 25/06/2010, 17:49
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Intercalar texto con imagen.

Exacto fondo blanco o transparente, las propiedades siguen, o sea, sigue teniendo los 4 lados.
Con esto te aclaro, en el mundo cibernetico no existe imagen que no tengo cuadro lados, e incluso si es un circulo, sigue teniendo 4 lados =)

Saludos!!
  #8 (permalink)  
Antiguo 25/06/2010, 18:48
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Intercalar texto con imagen.

Pues aquí hay dos soluciones, una usando una estructura más complicada de DIVs y la otra con jQuery:

http://www.bigbaer.com/css_tutorials....text.wrap.htm
http://jwf.us/projects/jQSlickWrap/

Saludos
__________________
Grupo Telegram Docker en Español
  #9 (permalink)  
Antiguo 28/06/2010, 12:57
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: Intercalar texto con imagen.

podrias hacer algo tan simple como crear una div,dale la medida de la imagen,le pones la imagen de fondo y luego añades el texto sobre el DIV ^^
  #10 (permalink)  
Antiguo 28/06/2010, 13:34
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Intercalar texto con imagen.

Cita:
Iniciado por joseomaker Ver Mensaje
podrias hacer algo tan simple como crear una div,dale la medida de la imagen,le pones la imagen de fondo y luego añades el texto sobre el DIV ^^
No leíste lo que el compañero quería, quiere que el texto se adapte automáticamente al borde de una imagen PNG con bordes irregulares.

Saludos
__________________
Grupo Telegram Docker en Español

Etiquetas: Ninguno
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 13:32.