css - template - Posicionamiento absoluto en correos electrónicos de Gmail
css en correo electronico (4)
(Sé que estoy respondiendo 4 años después ... pero probablemente ayudará a alguien ...) Si miras detenidamente, no tienes imágenes de fondo, posiblemente tienes 10 imágenes o más, muchos colores de fondo y un complejo mesa.
No hay imagen detrás de un texto. Puede dividir su tabla y componer su imagen de fondo como fragmentos de imágenes múltiples, y hacer coincidir el color de fondo del texto con estas imágenes.
Realmente ... en esta plantilla no hay imágenes de fondo "requeridas", solo una tabla compleja.
Tengo un cliente que desea enviar certificados de regalo a las personas que se registran en su sitio. Quieren que todo esté diseñado, así que no puedo enviar un correo electrónico de texto. Intento colocar texto sobre la imagen para que pueda ser dinámica.
Estoy tratando de hacer esto con un posicionamiento absoluto. Algunos sistemas de correo electrónico lo adoran. Algunos lo odian Gmail pasa a odiarlo.
Estamos usando MailChimp para la campaña. Aquí está la fuente completa del correo electrónico. A continuación, solo se trata del fragmento que no funciona.
<html>
<head>
<!-- This is a simple example template that you can edit to create your own custom templates -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head>
<body style="background-color: #bab145;text-align: center;">
<table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;">
<tr>
<td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
<div style="position: absolute; top: 110px; left: 130px;">
*|FNAME|* *|LNAME|*</div>
<div style="position: absolute; top: 140px; left: 130px;">
GetFreePellets.com</div>
<div style="position: absolute; top: 166px; left: 130px;">
$100</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|COUPONCODE|*</div>
</div>
</td></tr>
<tr>
<td id="footer" style="background-color: #eeeeee;border-top: 0px none #ffffff;padding: 20px;font-size: 10px;color: #333333;line-height: 100%;font-family: Verdana;">
<p><a href="*|ARCHIVE|*" class="adminText" style="color: #800000;text-decoration: underline;font-weight: normal;">view email in browser</a> | <a href="*|UNSUB|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Update your profile</a> | <a href="*|FORWARD|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Forward to a friend</a></p>
<p>*|LIST:DESCRIPTION|*</p>
<p>*|HTML:LIST_ADDRESS_HTML|*</p>
<p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p>
</td>
</tr>
</table>
<span style="padding: 0px;"></span>
<center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
<td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
Sent to *|EMAIL|*. <a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> |
<a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> |
<a href="*|FORWARD|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a>
</td>
<td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
*|REWARDS|*
</td>
</tr></table></center></body>
</html>
Y solo el fragmento que me preocupa:
<tr>
<td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
<div style="position: absolute; top: 110px; left: 130px;">
*|FNAME|* *|LNAME|*</div>
<div style="position: absolute; top: 140px; left: 130px;">
GetFreePellets.com</div>
<div style="position: absolute; top: 166px; left: 130px;">
$100</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|COUPONCODE|*</div>
</div>
</td></tr>
Nota: Las variables de combinación de MailChimp son esas cosas entre | y | .
Aquí hay una imagen de cómo se ve en Entourage. La barra roja es un nombre real, entonces .. ya: Correo electrónico funcionando http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
Y aquí está en gmail (sé que el nombre no está censurado): el correo electrónico no funciona http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
¿Alguna idea sobre cómo hacer que esto funcione en gmail?
Desafortunadamente, no puedes usar position: absolute .
Además, debido a que Outlook está usando el renderizador de Word HTML, también se encontrará con problemas al usar el posicionamiento absoluto.
La mayoría de los correos electrónicos HTML se presentan con tablas.
Esto hizo un truco para mí: http://blog.rebelmail.com/absolute-positioning-in-email/
Tenga en cuenta que no es una solución infalible. Tuve algunos problemas con Outlook y necesito deshabilitarlo.
Sugeriría hacer todo esto como una tabla (el soporte de div no es 100% confiable en clientes de correo electrónico). Use propiedades de borde para darle a la tabla el borde verde. Inserte la imagen del logotipo / pancarta en la primera fila de la tabla (tres columnas fusionadas). Use las siguientes 3 filas para A, De y Cantidad (con los valores en la segunda y tercera columnas fusionadas). Y use la última columna de la última fila para el código cupon.
Si realmente desea el doble borde, puede envolver la tabla en un div o para una compatibilidad máxima, envolver la tabla en una tabla de 1 columna, 1 fila.
Sí, es feo, pero los clientes de correo electrónico tienen implementaciones de HTML extremadamente anticuadas y / o antiguas, por lo que este no es el momento ni el lugar para descorazonarse con el código feo que no se ve en la web2.0.
Vea el enlace publicado por alex para más información.