Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brunosk2

newsletter

Por , em Desenvolvimento frontend

Recommended Posts

brunosk2    0

brunosk2
Postado

Bom dia, estou fazendo o layout de uma newsletter, mas no outlook o layout está quebrando, abaixo tem uma imagem mostrando como está e como deveria ficar.(As laterais estão quebradas)

helpkx.jpg

 

Isso acontece apenas no outlook, esse é o código que estou usando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Compartilhar Anáncio</title>
</head>
<body>
   <table cellpadding="0" cellspacing="0" width="580">
       <tr>
           <td colspan="3">
               <a href="#" target="_blank">
                   <img src='{PATH}util/imagens/estrutura/topo_logo.png' height='117' style="float: left"
                       border="0" />
               </a>
               <img src='{PATH}util/imagens/estrutura/topo.png' height='117' style="float: left"
                   border="0" />
           </td>
       </tr>
       <tr>
           <td width="40" style="width: 40px !important; font-size:0; line-height:0;">
               <img src='{PATH}util/imagens/estrutura/lado-esquerdo.png' style="float: left; width:40px;" height='306' />
           </td>
           <td width="500" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;
               color: #595959;">
               {MensagemConteudo}
               {EmailCancelar}
               {EmailCopyright}
           </td>
           <td width="40" style="width: 40px !important; font-size:0; line-height:0;">
               <img src='{PATH}util/imagens/estrutura/lado-direito.png' style="float: left; width:40px;" height='306' />
           </td>
       </tr>
       <tr>
           <td colspan="3" style="line-height:0; font-size:0;">
               <img src='{PATH}util/imagens/estrutura/rodape.png' style="float: left;" border="0" />
           </td>
       </tr>
   </table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

em newsletters não dá para inventar muito.

 

use o slice do photoshop. Veja algumas dicas q juntei:

http://wbruno.com.br/blog/2011/09/22/como-recortar-email-marketing/

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunosk2    0

brunosk2
Postado

Bom, eu estou seguindo boa parte dessas dicas, mas o problema é que só o outlook por algum motivo(tinha que ser parente do IE), "tira" o width que eu defini na TD da esquerda, eu defino 40 (tamanho do slice), e o outlook define 30, isso quebra o layout, já tentei definir por propriedade html e por style,

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

retire todos os float: left;

 

não dá para tentar contar com box model em emm.

Se tiver dúvidas poste a imagem real do emm que você está tentando fazer, que eu tento por aqui recortar, e te mando o html.

 

tipo.. não siga "a maioria das dicas", siga "todas".

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunosk2    0

brunosk2
Postado

beleza, resolvido um dos problemas, mas agora tem outro:

tenho 3 TD's, as duas laterais tem img fatiado do photoshop, mas a td do meio tem um texto dinâmico.

Eu preciso definir uma largura nessa TD, mas a p**** do outlook tira a largura que eu defino.

PS: no windows mail e nos navegadores está OK.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito