Jump to content
ferreiradealmeida

Assinatura de e-mail em HTML desconfigurada

Recommended Posts

Prezados(as), boa tarde.

 

Já trabalhei com webdesign e desenvolvimento frontend, mas faziam anos que não mexia com isso. Hoje sou advogado.

 

Elaborei uma assinatura para e-mail em HTML, que quando aberta no navegador é exibida corretamente:

 

image.png.44d14ae8730f8a231a4180682265c22a.png

 

Ocorre que quando a assinatura é inserida na mensagem (Microsoft Outlook 2016) a disposição dos elementos se mostra desconfigurada, assim permanecendo se a mensagem for enviada:

 

image.thumb.png.1fa75850efe7810f261e6161d455ba79.png

 

Devem ter notado que a imagem que fica acima das informações é uma imagem de fundo. Já tentei também "background" na <table>, mas neste caso, apesar de aparecer no navegador a imagem sequer aparece na assinatura:

 

<div style="max-width:716px; max-height:200px; position:relative;">
<img src="http://www.fafadv.com.br/images/assinatura.jpg" alt="imagem-assinatura" />
<div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;">
	<tr>
    	<td rowspan="3" style="width:242px;"></td>
		<td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;">
        	<p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br>
			<span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p>

			<p style="margin-top:-7px;">(16) 9 9373-2552<br>
			(16) 3421-7783</p>

			<p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br>
			<a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p>

			<p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br>
			Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p>
        </td>
        <td style="width:125px; height:67px; text-align:center;">
        	<a href="https://www.facebook.com/adv.faf/">
	            <img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;">
			</a>
        </td>
    </tr>
	<tr>
		<td style="width:125px; height:66px; text-align:center;">
        	<a href="https://www.instagram.com/faf.adv/">
        		<img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;">
            </a>
        </td>
      	
	</tr>
	<tr>
		<td style="width:125px; height:67px; text-align:center;">
        	<a href="https://www.linkedin.com/company/faf-adv">
	        	<img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;">
            </a>
        </td>
	</tr>
</table>
</div>
</div>

Serei grato se alguém souber o que ocorre e puder colaborar.

 

Obrigado.

Share this post


Link to post
Share on other sites

Tente usar o a propriedade background-image.

Exemplo:

Spoiler

<div style="max-width:716px; max-height:200px; background-image: url('http://www.fafadv.com.br/images/assinatura.jpg')">
    <table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;">
        <tr>
            <td rowspan="3" style="width:242px;"></td>
            <td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;">
                <p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br>
                    <span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p>

                <p style="margin-top:-7px;">(16) 9 9373-2552<br>
                    (16) 3421-7783</p>

                <p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br>
                    <a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p>

                <p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br>
                    Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p>
            </td>
            <td style="width:125px; height:67px; text-align:center;">
                <a href="https://www.facebook.com/adv.faf/">
                    <img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;">
                </a>
            </td>
        </tr>
        <tr>
            <td style="width:125px; height:66px; text-align:center;">
                <a href="https://www.instagram.com/faf.adv/">
                    <img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;">
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:125px; height:67px; text-align:center;">
                <a href="https://www.linkedin.com/company/faf-adv">
                    <img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;">
                </a>
            </td>
        </tr>
    </table>
</div>

 

 

 

De fato não sei se vai dar certo uma vez que essas coisas da microsoft são tudo mau feitas.

 

Share this post


Link to post
Share on other sites
Em 16/10/2021 at 12:03, Omar~ disse:

Tente usar o a propriedade background-image.

Exemplo:

  Ocultar conteúdo


<div style="max-width:716px; max-height:200px; background-image: url('http://www.fafadv.com.br/images/assinatura.jpg')">
    <table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;">
        <tr>
            <td rowspan="3" style="width:242px;"></td>
            <td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;">
                <p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br>
                    <span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p>

                <p style="margin-top:-7px;">(16) 9 9373-2552<br>
                    (16) 3421-7783</p>

                <p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br>
                    <a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p>

                <p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br>
                    Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p>
            </td>
            <td style="width:125px; height:67px; text-align:center;">
                <a href="https://www.facebook.com/adv.faf/">
                    <img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;">
                </a>
            </td>
        </tr>
        <tr>
            <td style="width:125px; height:66px; text-align:center;">
                <a href="https://www.instagram.com/faf.adv/">
                    <img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;">
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:125px; height:67px; text-align:center;">
                <a href="https://www.linkedin.com/company/faf-adv">
                    <img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;">
                </a>
            </td>
        </tr>
    </table>
</div>

 

 

 

De fato não sei se vai dar certo uma vez que essas coisas da microsoft são tudo mau feitas.

 

 

Já havia tentado e realmente não funciona.

 

Já estou considerando quebrar a imagem e montar na tabela.

 

Mas agradeço!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By betezek
      Prezados,
      tenho uma div abaixo:
      eu gostaria de centralizar o nome dentro da imagem. o problema é que ela não centraliza, começa left e eu já tentei todos os comandos.
      eu preciso que ela já centralize no espaço!!!
      VOU USAR UM INPUT PARA DIGITAR O TEXTO!
       
       
       
      <BODY>
      <style>

      .divLeft {
          width: 140;
          height: 100px;
          float: center;
          position: relative;
      }
      #spaceText {
          padding-right: 110px;
      }
      #photo {
          width: 320px;
          height: 300px;
      }
      .textDiv{
         position: absolute;
         
         text-align: center;
      font-family:Arial;
        color: #000000;
        font-size: 9px;
        font-weight: NORMAL;
        left: 22px;
        top: 250px;
         
        
      }
      </style>
      </head>
      <body>

      <div class="divLeft">
          <img id="photo" src="imagens/jumba.png">
          <div class="textDiv">
              <h2><i id="spaceText" class="fas fa-search"></i>CENTRALIZAR</h2>
          </div>
      </div>
      </BODY>
    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By joao b silva
      amigos é o seguinte, eu crio um grid dinamicamente com bootstrap, porem a depender do conteúdo as colunas, na mesma linha ficam com tamanhos (height) diferentes, o que não acontece quando utilizamos <table></table>. Como posso resolver isso?
    • By Alessandro Bodão
      Eai pessoal!
       
      Estou trabalhando em um site WordPress do qual foi me passado a versão demo de um tema (Ample).
       
      O problema é o seguinte: Parece não existir nenhum lugar onde eu tenha acesso pra editar todos os textos e conteúdos (Ex: Os textos padrões do tema parecem ser inacessíveis).
       
      Já fucei praticamente todo o wp-admin e os demais painéis e nada... Já tentei baixar o plugin  Elementor pra ver se me facilitava nisso e nada... Já tentei ver se conseguia achar esses conteúdos e editar pelo código das páginas php do tema e nada. Não sei mais o que fazer, por gentileza peço ajuda.
       
      Tema: https://themegrilldemos.com/ample/
      Site: https://onecv.com.br/
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.