Foros del Web » Creando para Internet » Diseño web »

Cómo enviar un eMail con texto sobre una imagen?

Estas en el tema de Cómo enviar un eMail con texto sobre una imagen? en el foro de Diseño web en Foros del Web. Hola a todos, no participo mucho por aquí pero cada vez que tengo una duda recurro a vosotros. El tema es que ando buscando cambiar ...
  #1 (permalink)  
Antiguo 17/11/2010, 17:07
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Cómo enviar un eMail con texto sobre una imagen?

Hola a todos, no participo mucho por aquí pero cada vez que tengo una duda recurro a vosotros.

El tema es que ando buscando cambiar de trabajo y como soy diseñador se me ocurrió que un valor añadido a mi solicitud podía ser darle un poco de gracia a mi carta de presentación... Pero no consigo hacer que funcione pese a que me han dicho que se puede hacer así.

Basicamente intento poner una imagen como fondo de un texto, html realmente, y poder enviarlo mediante thunderbird. No tengo demasiada idea de código y demás, así que a ver lo que me podéis contar.

Es esto lo que quiero que se vea al abrir el eMail:[URL="http://robertomc.com/carta_pres.html"] http://robertomc.com/carta_pres.html[/URL]

Me es bastante importante. Mil gracias de antemano!
  #2 (permalink)  
Antiguo 17/11/2010, 21:43
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Hay dos formas de poner texto sobre una imagen, pero honestamente no sé si funcionará para el caso de un e-mail y es que los servicios de correo suprimen algunos estilos de los mensajes. Bien, la primera forma es poniendo la imagen como fondo. Eso no funcionará definitivamente. Yo lo he probado, no se puede. La otra, haciendo un div que se superponga a una imagen. Por ejemplo:

Código:
<img src="imagen.jpg">
<div style="position: relative; top: -50px; margin-bottom: -50px;">
  Contenido
</div>
Eso haría la superposición, ahora, debes saber que para enviar la imagen, esta debe estar colgada en algún hosting (aunque sea gratuito) y poner la ruta absoluta.

Ahora que me doy cuenta eso tampoco funcionará del todo, porque las imágenes se bloquean al principio en hotmail y otros servicios de correo, así que no se vería el supuesto fondo hasta que el usuario desbloquee el mensaje.
  #3 (permalink)  
Antiguo 19/11/2010, 09:28
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Ante todo muchísimas gracias por contestar ElJavista.

Sí, lo de no usar la imagen como fondo ya me lo habían advertido, así que tiré por la opción que puse ( [URL="http://robertomc.com/carta_pres.html"]http://robertomc.com/carta_pres.html[/URL] ), que son como dices 2 DIV superpuestos.

No me importa que no se vea la imagen de primeras, qué se le va a hacer, y ahora además es el menor de mis problemas. Al menos doy la oportunidad de verlo bien o no. Pero es que ahora si lo mando por email (thunderbird) se ve un DIV con el texto primero y después el otro con la imagen, aunque si lo cuelgo en internet se vea uno encima de otro como puedes ver.

Ayuda pleaseee...

(Y gracias de nuevo!)
  #4 (permalink)  
Antiguo 19/11/2010, 11:53
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Muestra el código que estás enviando.
  #5 (permalink)  
Antiguo 19/11/2010, 18:05
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Sí, perdona, no lo hice por no poner el tocho. Ahí va:

Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#texto {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	height: 400px;
	width: 640px;
	padding-left: 180px;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 20px;
}
#dibu {
	height: 400px;
	width: 800px;
	position: absolute;
	left: 0px;
	top: 0px;
}
#texto p a {
	color: #0CF;
}
</style>
</head>
<body>
<div id="dibu"><img src="http://www.robertomc.com/images/autoretrato.png" width="800" height="400" alt="yo" /></div>

<div id="texto">
  <p>Varios párrafos aquí</p>
  <p>Encontrará una muestra de mis trabajos en la siguiente dirección: <a href="http://www.robertomc.com/" title="Dossier Roberto Martín" target="_new">www.robertomc.com</a></p>
</div>  
</body>
Como dije lo intento enviar con "insertar HTML" en el ThunderBird de Mozilla. Algo en claro?
  #6 (permalink)  
Antiguo 19/11/2010, 19:43
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Los estilos no los pongas a parte, ponlos dentro de la misma etiqueta HTML y no envíes ningún head ni body. Acuérdate que ese código va a ser impreso en un área de una página web. Además la imágen no tiene por qué tener una posición absoluta y el div del texto debe tener una posición relativa, un top negativo y un margin-bottom del mismo valor. Así como el ejemplo que puse pues.

Última edición por ElJavista; 20/11/2010 a las 08:14
  #7 (permalink)  
Antiguo 20/11/2010, 08:30
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Ok, lo he apañado como buenamente he sabido, pero nada, me pone por un lado la imagen y después, debajo, el texto. Lo he dejado así:

Código:
<img src="http://www.robertomc.com/images/autoretrato.png" />
<div style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; position: relative; top: -400px; width: 700px; padding-left: 180px; line-height: 20px;">
  <p>VARIOS PARRAFOS</p>
  <p>Encontrar&aacute; una muestra de mis trabajos en la siguiente direcci&oacute;n: 
<a href="http://www.robertomc.com/" title="Dossier Roberto Martín" target="_new">www.robertomc.com</a>.
En ella podr&aacute; visualizar mis trabajos y curr&iacute;culum vitae, y descarg&aacute;rselos en pdf.</p>
 </div>
De hecho he probado con el pequeño código que pusiste y nada, me da lo mismo. Primero la imagen y luego el texto... pese a que si lo cuelgo en internet siempre [URL="http://robertomc.com/carta_pres1.html"]se ve correctamente[/URL].

:(

Se te ocurre algo más?
  #8 (permalink)  
Antiguo 21/11/2010, 09:26
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Bueno, pues después de currarme una versión con la imagen troceada en celdas rodeando la celda del texto miro mis Newsletters más a fondo y me encuentro una que pone imagen y texto encima: una tabla con background de imagen. He mirado por ahí pero lo desaconsejan pues puede dar problemas con Outlook 2007, pero para eso pongo el típico aviso.

Código:
<p style="color: #666; padding-left: 180px; text-align: left; font-family:Verdana, Geneva, sans-serif; font-size:10px"><a href="http://robertomc.com/carta_pres.html" target="_blank" style="color: #999;">Clique aqu&iacute; si no puede ver el correo</a></p>
<br />
<table width="800" border="0" cellpadding="0" cellspacing="0" background="http://www.robertomc.com/images/autoretrato.png">
  <tr>
    <td width="180" height="380"><p>&nbsp;</p>
	</td>
    <td height="380" valign="middle" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px;  line-height: 18px; ">
 TEXTO Y TEXTO<br /><br />
</td>
  </tr>
</table>
Muchas gracias de nuevo :)
  #9 (permalink)  
Antiguo 21/11/2010, 16:12
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

De verdad funciona eso? no se elimina el background?
  #10 (permalink)  
Antiguo 21/11/2010, 16:23
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Pues no se elimina, mañana lo pruebo a un Outlook en el curro, pero puedes probar tu mismo a enviar ese código tal cual por correo. Es más, si lo haces estaré muy agradecido si me cuentas si lo ves.

Pero es cierto que he leido por ahí que daba problemas, aunque en otros sitios ni lo mencionan.
  #11 (permalink)  
Antiguo 22/11/2010, 09:11
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Pues he probado en varios programas de email (incluido el de Mac) y en todos el fondo sale bien... excepto en el Outlook :P

Algo me han comentado de que se pone código para que se vea en distintos programas, tipo como el código para diferentes esploradores en html, supongo. Sabes algo?

Gracias!
  #12 (permalink)  
Antiguo 24/11/2010, 07:45
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Pues no, no lo sé.
  #13 (permalink)  
Antiguo 24/11/2010, 09:20
Avatar de mc_robe  
Fecha de Ingreso: octubre-2006
Ubicación: Puente De Vallecas, Madrid, Spain, Spain
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Cómo enviar un eMail con texto sobre una imagen?

Ok, gracais por todo anyway ;)

Etiquetas: email.envio
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 20:02.