Pregunta tus dudas y sube tus proyectos para recibir valoración y crítica constructiva por parte de los profesores, otros alumnos y comunidad de Megacursos.
Avatar de Usuario
por danielcortéscaparrós
#5583 Hola buenas, he creado un correo electrónico para enviar a los clientes de mi negocio pero no a pesar de que en el navegador se visualiza correctamente, en el email no como se puede ver en las imágenes adjuntas. El código es el siguiente:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Reapertura mipuchero.com</title>
</head>

<body>
<div style="width: 600px; margin: 0 auto; position: relative;">
<img src="http://dafre.dsminfo.org/mipuchero/img.jpg" alt="mipuchero.com" usemap="#Map" style="width: 600px;">
<map name="Map">
<area shape="rect" coords="56,26,203,139" href="https://www.mipuchero.com/">
<area shape="rect" coords="413,523,577,740" href="https://www.mipuchero.com/collections/raciones/products/tortilla-de-patata">
<area shape="rect" coords="420,757,570,961" href="https://www.mipuchero.com/apps/foodify?menu=para-recoger">
<area shape="rect" coords="178,513,224,557" href="https://www.instagram.com/mipuchero/">
<area shape="circle" coords="254,535,23" href="https://www.facebook.com/Mi-Puchero-127360992137397/">
<area shape="rect" coords="542,1052,578,1089" href="https://www.instagram.com/mipuchero/">
<area shape="circle" coords="513,1072,19" href="https://www.facebook.com/Mi-Puchero-127360992137397/">
<area shape="rect" coords="10,1021,114,1100" href="https://www.mipuchero.com/">
</map>

<p style="position: absolute; top: 250px; left: 65px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #67a628; font-size: 1.3em; line-height: 1.3em; width: 500px;">
Estimado cliente,
<br>
¡Te recordamos que mi puchero reabrirá mañana!
<br><br>
Además contaremos con reparto a domicilio y todas las medidas de seguridad en nuestro local. Para más información sígue nos en <a href="https://www.facebook.com/Mi-Puchero-127360992137397/" style="text-decoration: none; color: #67a628; font-weight: bolder;">Facebook</a> e <a href="https://www.instagram.com/mipuchero/" style="text-decoration: none; color: #67a628; font-weight: bolder;">Instagram</a> o consulte nuestra <a href="https://www.mipuchero.com/" style="text-decoration: none; color: #67a628; font-weight: bolder;">web</a>.
</p>

<ul style="position: absolute; top: 785px; left: 22px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #67a628; font-size: 1.1em; width: 400px; list-style: disc; line-height: 1.2em;">
<li>Reducción del aforo del local al 50%</li>
<li>Disposición de gel hidroalcoholico</li>
<li>Complementos en monodosis</li>
<li>Desinfección del inmobiliario<br> tras cada uso</li>
</ul>


<ul style="position: absolute; bottom: 53px; left: 60px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #67a628; width: 400px; list-style: none; line-height: 1.2em; text-align: center; font-weight: bold;">
<li>Avenida Filipinas 36, Madrid</li>
<li>mipuchero@outlook.com</li>
<li>mipuchero.com</li>
</ul>

<p style="width: 100%; text-align: center; padding-top: 10px; color: #95D554; border-top: solid #95D554 1px;">Si deseas dejar de recibir emails <a href="mailto:mipuchero@outlook.com" style="text-decoration: none; color: #67a628;">contesta a este correo</a><br>avisandonoslo para poder proceder a cancelarlos</p>
</div>
</body>
</html>

Y se debería de verse como en las imágenes que adjunto. Parece ser que no funcionan los atributos de postition relative y top y left además de algunos otros estilos y no entiendo por qué. La imagen se desglosa del resto del email y no entiendo por qué. Ayuda por favor. Necesito enviar estos emails y es urgente.
Adjuntos
en_email3.png
en_email2.png
en_email.png
en chrome.png
en chrome2.png
Avatar de Usuario
por danielcortéscaparrós
#5588 Hola buenas, muchas gracias. El código es el siguiente:

<!doctype html>
<html><head></head>
<body>
<div>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width: 100%; text-align: center;">
<tbody>
<tr>
<td>
<img src="img.jpg" alt="mipuchero.com" usemap="#Map" style="width: 600px;">

<p style="position: absolute; top: 250px; left: 65px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #67a628; font-size: 1.3em; line-height: 1.3em; width: 500px;">
Estimado cliente,
<br>
¡Te recordamos que mi puchero reabrirá mañana!
<br><br>
Además contaremos con reparto a domicilio y todas las medidas de seguridad en nuestro local. Para más información sígue nos en <a href="https://www.facebook.com/Mi-Puchero-127360992137397/" style="text-decoration: none; color: #67a628; font-weight: bolder;">Facebook</a> e <a href="https://www.instagram.com/mipuchero/" style="text-decoration: none; color: #67a628; font-weight: bolder;">Instagram</a> o consulte nuestra <a href="https://www.mipuchero.com/" style="text-decoration: none; color: #67a628; font-weight: bolder;">web</a>.
</p>

<ul style="position: absolute; top: 785px; left: 22px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #67a628; font-size: 1.1em; width: 400px; list-style: disc; line-height: 1.2em;">
<li>Reducción del aforo del local al 50%</li>
<li>Disposición de gel hidroalcoholico</li>
<li>Complementos en monodosis</li>
<li>Desinfección del inmobiliario<br> tras cada uso</li>
</ul>


<ul style="position: absolute; bottom: 53px; left: 60px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #67a628; width: 400px; list-style: none; line-height: 1.2em; text-align: center; font-weight: bold;">
<li>Avenida Filipinas 36, Madrid</li>
<li>mipuchero@outlook.com</li>
<li>mipuchero.com</li>
</ul>
</td>
</tr>

<tr>
<td>
<p style="width: 100%; text-align: center; padding-top: 10px; color: #95D554; border-top: solid #95D554 1px;">Si deseas dejar de recibir emails <a href="mailto:mipuchero@outlook.com" style="text-decoration: none; color: #67a628;">
contesta a este correo</a><br>avisandonoslo para poder proceder a cancelarlos</p>
</td>
</tr>
</tbody>
</table>

<map name="Map">
<area shape="rect" coords="56,26,203,139" href="https://www.mipuchero.com/">
<area shape="rect" coords="413,523,577,740" href="https://www.mipuchero.com/collections/raciones/products/tortilla-de-patata">
<area shape="rect" coords="420,757,570,961" href="https://www.mipuchero.com/apps/foodify?menu=para-recoger">
<area shape="rect" coords="178,513,224,557" href="https://www.instagram.com/mipuchero/">
<area shape="circle" coords="254,535,23" href="https://www.facebook.com/Mi-Puchero-127360992137397/">
<area shape="rect" coords="542,1052,578,1089" href="https://www.instagram.com/mipuchero/">
<area shape="circle" coords="513,1072,19" href="https://www.facebook.com/Mi-Puchero-127360992137397/">
<area shape="rect" coords="10,1021,114,1100" href="https://www.mipuchero.com/">
</map>
</div>
</body>
</html>