Firma con estilo en GMail

kapi2454 · #1 (**permalink**) 05/04/2018, 05:57

Hola gente, espero esten bien. Ando con un lio que no puedo sacar.
Quiro aplicar estilo a la firma de GMail pero no me lo permiten.

Por ejemplo si armo una tabla y coloco un logo puedo hacerlo sin problemas, pero si quiero aplicar logos sobre una imagen y links dentro no me lo permite. Es como si position:; no funcionara.

Les dejo el codigo de lo que quiero hacer

Código HTML:

<div style="position:relative; margin:0 auto;">  
    <img style="position:absolute;" src="https://image.freepik.com/vector-gratis/logotipo-del-futbol-fondo-verde_1306-65.jpg" alt="fondo" />
	<a   style="position:absolute; top:400px; left:370px;" href="http://facebook.com">
		<img style="position:absolute;" src="https://es.facebookbrand.com/wp-content/uploads/2016/05/FB-fLogo-Blue-broadcast-2.png" alt="fondo" width="50px"/>
	</a>	
	<a   style="position:absolute; top:200px; left:170px;" href="http://google.com">Mi Página Web</a>
</div>

En un simple HTML esto lo veo bien, pero cuando lo inserto y envío como firma me queda cada cosa debajo de la otra. es decir el texto con los links no quedan sobre la imagen. Quedan debajo de ella.

Es alguna restriccion? Y si lo fuera, existe otra manera de hacerlo?

Desde ya muchas gracias!!!

mortiprogramador · #2 (**permalink**) 05/04/2018, 06:22

Saludo
Sí, son restricciones de manejo de estilos y css por lo general.

Yo sufrí de esos dolores también,
y no es solo gmail, otros clientes como yahoo, outlook, etc,
manejan lo mismo.

En cuanto a otra solución, usar html de antaño para
tratar de ponerlo lo más 'parecido'
a cómo lo tienes con estilos.

Daniel Ulczyk · #3 (**permalink**) 05/04/2018, 14:06

Hola!

Los remito a una sencilla guía de diseño [en inglés] para intentar obtener la mejor compatibilidad posible con los diferentes clientes de correo:

HTML email design guide

Los puntos más relevantes son:

trabajar con diseños de hasta 650px de ancho
maquetar con tablas
no utilizar hojas de estilos externas, que la declaraciones sean inline
evitar utilizar elementos flotantes

kapi2454 · #4 (**permalink**) 07/04/2018, 13:37

Bueno será de ese modo entonces.
El tema es que esa imagen así como esta no voy a poder hacerla. Tendré que separar o cambiar el diseño