- Lun Ago 24, 2020 11:15 pm
#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.
<!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.
