Ir para conteúdo

POWERED BY:

Arquivado

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

sidneicorso

HTML Quebrado

Por , em Desenvolvimento frontend

Recommended Posts

sidneicorso    0

sidneicorso
Postado

Bom dia pessoal,

 

Não sou nenhum expert em html e nem trabalho diretamente com isso, apenas montei um script para as assinaturas de email da empresa, esse código quando interpretado pelo navegador fica perfeito, exatamente como solicitado, quando enviamos um email a assinatura também fica de acordo, porém quando recebemos uma resposta a assinatura fica toda quebrada, creio que isso aconteça porque estou usando o div para ter informações uma ao lado da outra.

Gostaria de um auxilio no porque esta acontecendo essa quebra e como posso corrigir?

 

Abaixo o código, desde já agradeço.

 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Assinatura</title>

<style type="text/css">
#box{
    width:750px;
    height:110px;
    background-color:#b61d1d;
    border-radius: 10px;
    }
p.um{
    font-family: Verdana;
    font-size: 14px;
    color: black;
    }
#nome{
     font-family: Verdana;
     font-size: 11px;
     color: white;     
     } 
p.dois{
      line-height: 2;
      }
p.tres{
      font-family: Verdana;
      font-size: 10px;
      color: #b61d1d;
      }
p.sepa{
      line-height: 0.5;
      }      
</style>
</head>

<body>
<p class="um">Att,</p>
<!-- criação da caixa principal -->
<div id="box">
  <!-- divisão para o logo da empresa -->
  <div style="width:200px; float:left;">
    <img src='file:///\\servidor\Identidade Visual\Assinaturas\logo-vertical.png' alt="Bold" width='190' height='100'/>
  </div>
  <!-- divisão para os dados pessoais -->  
  <div id="nome" style="width:200px; float:left;">
  <p class="dois">
      Nome Funcionário<br>
      Função<br>
      Tel.: (00) 0000 0000<br>
      Cel.: (00) 0000 0000
  </p>
  </div>
  <!-- divisão para o separador -->  
  <div style="width:50px; float:left;">
  <p class="sepa">
    <img src='file:///\\servidor\Identidade Visual\Assinaturas\branco.png' alt="Bold" width='1' height='80'/></p>
  </div>
  <!-- divisão para o endereço -->  
  <div id="nome" style="width:300px; float:left;">
    <p class="dois">    
      Endereço: Nome Rua, 00<br>
      Bairro<br>
      Cidade - UF - 00000-000<br>
      <a style="text-decoration: none; color: white;" href='http://www.site.com.br/'>www.site.com.br</a><br>
    </p>
  </div>  
</div>
<p class="tres">Antes de imprimir pense em sua responsabilidade e compromisso com o <b>MEIO AMBIENTE!</b></p>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tadeu Barbosa    18

Tadeu Barbosa
Postado

Amigo, geralmente quando vou fazer esse tipo de coisa uso uma tabela.

Não uso em sites, claro, mas para emails é necesário.

 

Dê uma lida nesse artigo do Tableless: https://tableless.com.br/boas-praticas-para-e-mail-marketing/

Aqui também, pela locaweb: https://wiki.locaweb.com.br/pt-br/Boas_práticas_de_HTML_para_Email

 

Os provedores de email não aceitam certos tipos de tags, estilos, não aceitam JS, FLASH etc.

Vi que no seu código usa floats, img com src interno (file:///)... os emails não podem ser dessa maneira. Digo, os provedores ou não suportam, ou não aceitam. Os links que postei podem lhe explicar melhor.

Compartilhar este post

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

  • Conteúdo Similar

    • Alessandro Bodão
      H1 que preencha toda a largura da container
      Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Giovanird
      Cor da div conforme o valor do value
      Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • GOD
      Div Noticias com RSS
      Por GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
    • rcsbnu27
      Página em html, css e javascript
      Por rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
    • lezão
      Transformar table em div
      Por lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
×

Informação importante

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

  Aceito