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

mc_robe · #1 (**permalink**) 17/11/2010, 17:07

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!

ElJavista · #2 (**permalink**) 17/11/2010, 21:43

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.

mc_robe · #3 (**permalink**) 19/11/2010, 09:28

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!)

ElJavista · #4 (**permalink**) 19/11/2010, 11:53

Muestra el código que estás enviando.

mc_robe · #5 (**permalink**) 19/11/2010, 18:05

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?

ElJavista · #6 (**permalink**) 19/11/2010, 19:43

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.

mc_robe · #7 (**permalink**) 20/11/2010, 08:30

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?

mc_robe · #8 (**permalink**) 21/11/2010, 09:26

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 :)

ElJavista · #9 (**permalink**) 21/11/2010, 16:12

De verdad funciona eso? no se elimina el background?

mc_robe · #10 (**permalink**) 21/11/2010, 16:23

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.

mc_robe · #11 (**permalink**) 22/11/2010, 09:11

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!

ElJavista · #12 (**permalink**) 24/11/2010, 07:45

Pues no, no lo sé.

mc_robe · #13 (**permalink**) 24/11/2010, 09:20

Ok, gracais por todo anyway ;)