Leonardo Dias_131708 0 Denunciar post Postado Maio 20, 2014 Fala galera, Ps: Escrevi largura errado no título do tópico, o problema está ocorrendo na altura! Estou com um "problema" que nunca tinha me acontecido antes, Montei um email marketing em HTML e em momento nenhum defini tamanho de altura das colunas internas, ou seja, a altura deveria fixar de acordo com o tamanho do texto. Porem quando meu cliente joga o código html no outlook, e muda o tamanho do texto visualmente as tabelas não corrigem o tamanho, até mesmo mudando visualmente pelo inspetor de elementos do Chrome da o mesmo "erro". Como devo fazer para que a tabela acompanhe o tamanho do texto quando trocado visualmente?!Segue abaixo uma imagem do "erro" quando edito pelo inspetor de elementos do Chrome: Segue também o código que ultilizei no email marketing: <!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" /> <style type="text/css"> .subtitulo { font-weight: bold; } .subtitulo { font-weight: bold; } .subtitulo { font-weight: bold; } .subtitulo { font-weight: bold; } .subtitulo { font-weight: bold; color: #808285; font-family: Trebuchet MS; font-size: 24px; } .conteudo { color: #808285; font-family: Trebuchet MS; } </style> </head> <body> <table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td colspan="5" width="600" height="30" bgcolor="#EBEBEB"> </td></tr> <tr> <td width="40" bgcolor="#EBEBEB"> </td> <td colspan="3" bgcolor="#EBEBEB"><span style="font-size:26px; font-family:Trebuchet MS; color:#b21a29;"> Lorem Ipsum is simply dummy text of the printing, but also the leap into electronic typesetting, remaining essentially. </span></td> <td width="40" bgcolor="#EBEBEB"> </td> </tr> <tr><td colspan="5" width="600" height="30" bgcolor="#EBEBEB"> </td></tr> <tr> <td width="40" bgcolor="#EBEBEB"> </td> <td width="240" height="auto" bgcolor="#d1d3d4" style="padding: 20px;" > <span class="subtitulo" style="font-weight: bold; color: #808285; font-family: Trebuchet MS; font-size: 24px;">MERCADO</span><br /> <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span></td> <td width="40" bgcolor="#EBEBEB"> </td> <td width="240" bgcolor="#d1d3d4" style="padding:20px;"> <span class="subtitulo" style="font-weight: bold; color: #808285; font-family: Trebuchet MS; font-size: 24px;">CANAIS</span><br /> <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..</span></td> <td width="40" bgcolor="#EBEBEB"> </td> </tr> <tr> <td colspan="5" bgcolor="#EBEBEB"> </td> </tr> <tr> <td width="40" bgcolor="#EBEBEB"> </td> <td width="240" bgcolor="#d1d3d4" style="padding:20px;"> <span class="subtitulo" style="font-weight: bold; color: #808285; font-family: Trebuchet MS; font-size: 24px;">PRODUTO</span><br /> <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></td> <td width="40" bgcolor="#EBEBEB"> </td> <td width="240" bgcolor="#d1d3d4" style="padding:20px;"> <span class="subtitulo" style="font-weight: bold; color: #808285; font-family: Trebuchet MS; font-size: 24px;">CONSUMIDOR</span><br /> <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> </td> <td width="40" bgcolor="#EBEBEB"> </td> </tr> <tr> <td colspan="5" bgcolor="#EBEBEB"> </td> </tr> <tr> <td width="40" bgcolor="#EBEBEB"> </td> <td colspan="3" bgcolor="#d1d3d4" style="padding:20px;"> <span class="subtitulo" style="font-weight: bold; color: #808285; font-family: Trebuchet MS; font-size: 24px;">SESSÃO EXTRA</span><br /> <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> </td> <td width="40" bgcolor="#EBEBEB"> </td> </tr> <tr> <td colspan="5" bgcolor="#EBEBEB"> </td> </tr> </table> </body> </html> Abraços,Léo Compartilhar este post Link para o post Compartilhar em outros sites
xanburzum 169 Denunciar post Postado Maio 20, 2014 no CSS defina margin-left: auto;margin-right: auto; e também pode colocar a tabela dentro de uma DIV e deixar sua DIV auto-ajustável Compartilhar este post Link para o post Compartilhar em outros sites
Leonardo Dias_131708 0 Denunciar post Postado Maio 20, 2014 no CSS defina margin-left: auto; margin-right: auto; e também pode colocar a tabela dentro de uma DIV e deixar sua DIV auto-ajustável Eu tenho que colocar esse margin dentro do style da coluna que quero trabalhar? Dessa forma? <td width="240" valign="top" bgcolor="#d1d3d4" style="padding: 20px; margin-left:auto; margin-right:auto;" > Não resolveu. Só pra ressaltar estou com problema na altura da coluna, que quando edito o texto visualmente não acompanha o novo tamanho do texto, escrevi largura por engano no título do tópico. Ai acontece o erro da imagem, que o texto diminui, mas a coluna (<td>) continua do mesmo tamanho. E como estou trabalhando com e-mail marketing, não sei se seria apropriado resolver isso com uma <div>, pois pode ter aqueles programas de e-mail colossais que não vão carregá-las. Eu tentei deixar a coluna com height="100%", mas também não resolveu. abraços, Léo Compartilhar este post Link para o post Compartilhar em outros sites
xanburzum 169 Denunciar post Postado Maio 20, 2014 tenta este exemplo: <html> <head> <title>Anonymous</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> <table id="tabela1" align="center"> <table border="1" width="1000" align="center"> <tr> <td><img src="imgs/top-banner.jpg"></td> </tr> </table> <table border="1" align="center" width="1000"> <tr><td style="max-width: 192px;"><img src="imgs/menu1.png"></td> <td style="max-width: 193px;"><img src="imgs/principal.png"></td> <td style="max-width: 194px;"><img src="imgs/principal.png"></td> <td style="max-width: 196px;"><img src="imgs/principal.png"></td> <td style="max-width: 197px;"><img src="imgs/principal.png"></td> </tr> </table> <table border="1" height="400" width="1000" align="center"> <tr> <td id="tdp" align="center">2</td> <td id="tdp1"align="center">1</td> <td id="tdp" align="center">3</td> </tr> </table> </table> </body> </html> CSS: #tabela1{ border: 1px solid; width: 1010; margin-left: auto; margin-right: auto; } #tdp{ border: 1px solid; margin-left: auto; margin-right: auto; } #tdp1{ border: 1px solid; margin-left: auto; margin-right: auto; } body{ background-color:#000000; } e ajuste o tamanho das imagens, senão vão ficar todas cortadas devido ao max-width. Compartilhar este post Link para o post Compartilhar em outros sites
