Mudanças entre as edições de "Dicas MKmail"
m (→Linhas entre imagens no Windows Live) |
|||
(8 edições intermediárias de um usuário não apresentadas) | |||
Linha 2: | Linha 2: | ||
=Imagens= | =Imagens= | ||
− | Imagens devem ser alinhadas a esquerda e ter propriedades de borda, margem e espaçamentos com valor 0 | + | Imagens devem ser alinhadas a esquerda e ter propriedades de borda, margem e espaçamentos com valor 0. |
+ | Deve ser especificado a altura e largura da imagem fixo e em pixel's. | ||
+ | Preferencialmente deve ser feito o upload de imagens no Mkmail. | ||
− | = | + | Adicionar na tag <img> : |
− | + | style="display: block;" | |
=Tabela= | =Tabela= | ||
Linha 11: | Linha 13: | ||
Sendo necessário o atributo ''width'' em pixel's resultante da soma das larguras das colunas. | Sendo necessário o atributo ''width'' em pixel's resultante da soma das larguras das colunas. | ||
− | + | =Tag <td> com images ou espaço em branco entre linhas= | |
− | Deve ser adicionado dentro da tag <td> | + | Deve ser adicionado dentro da tag <td>: |
style="line-height:0px;" colspan="0" | style="line-height:0px;" colspan="0" | ||
+ | |||
+ | Obs: Células somente texto não devem usar o estilo acima. | ||
=Linhas entre imagens no Windows Live= | =Linhas entre imagens no Windows Live= | ||
− | <style type="text/css"> | + | <nowiki> |
− | a:active, a:focus {outline: 0;} | + | <style type="text/css"> |
− | + | .ExternalClass{width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height: 100%;} | |
− | + | body{margin: 0; padding: 0;} img{border: 0 none; height: auto; line-height: 100%; outline: none; text-decoration: none;} | |
− | + | a img{border: 0 none;} table, td{border-collapse: collapse;} body{-ms-text-size-adjust: 100%;} | |
− | + | ||
− | + | img{-ms-interpolation-mode: bicubic;} table{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} | |
− | + | a:active, a:focus {outline: 0;} img { border: 0px;} img { display: block;} #outlook a{padding: 0;} body{width: 100% !important;} | |
+ | .ReadMsgBody{width: 100%;} .ExternalClass{width: 100%;} body{-webkit-text-size-adjust: none; -ms-text-size-adjust: none;} p.MsoNormal {margin: 0px !important;} | ||
+ | |||
</style> | </style> | ||
+ | </nowiki> | ||
+ | |||
+ | =Exemplo Fictício de trecho de tabela= | ||
+ | <nowiki> | ||
+ | <table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="500px"> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <td style="line-height:0px;" style="line-height:0px;" colspan="0"> | ||
+ | <a href="http://www.esweb.com/" target="_blank"> | ||
+ | <img alt="Texto" src="imagem.jpg" style="width: 200px; height: 200px; border-width: 0px; border-style: solid; margin: 0px; float: left; display: block;" title="Texto" /></a> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | </nowiki> |
Edição atual tal como às 17h34min de 28 de julho de 2015
Índice
Imagens
Imagens devem ser alinhadas a esquerda e ter propriedades de borda, margem e espaçamentos com valor 0. Deve ser especificado a altura e largura da imagem fixo e em pixel's. Preferencialmente deve ser feito o upload de imagens no Mkmail.
Adicionar na tag <img> :
style="display: block;"
Tabela
A tabela deve ter cellpadding e cellspacing, bem como borda e margem com valor zero. Sendo necessário o atributo width em pixel's resultante da soma das larguras das colunas.
Tag <td> com images ou espaço em branco entre linhas
Deve ser adicionado dentro da tag <td>:
style="line-height:0px;" colspan="0"
Obs: Células somente texto não devem usar o estilo acima.
Linhas entre imagens no Windows Live
<style type="text/css"> .ExternalClass{width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height: 100%;} body{margin: 0; padding: 0;} img{border: 0 none; height: auto; line-height: 100%; outline: none; text-decoration: none;} a img{border: 0 none;} table, td{border-collapse: collapse;} body{-ms-text-size-adjust: 100%;} img{-ms-interpolation-mode: bicubic;} table{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} a:active, a:focus {outline: 0;} img { border: 0px;} img { display: block;} #outlook a{padding: 0;} body{width: 100% !important;} .ReadMsgBody{width: 100%;} .ExternalClass{width: 100%;} body{-webkit-text-size-adjust: none; -ms-text-size-adjust: none;} p.MsoNormal {margin: 0px !important;} </style>
Exemplo Fictício de trecho de tabela
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="500px"> <tbody> <tr> <td style="line-height:0px;" style="line-height:0px;" colspan="0"> <a href="http://www.esweb.com/" target="_blank"> <img alt="Texto" src="imagem.jpg" style="width: 200px; height: 200px; border-width: 0px; border-style: solid; margin: 0px; float: left; display: block;" title="Texto" /></a> </td> </tr> </tbody> </table>