Ir para conteúdo

POWERED BY:

Arquivado

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

Kingzaraki

DIV se movendo!

Recommended Posts

Olá, estou com um probleminha com as famosas DIV's, estou criando um boletim HTML para enviar por email, e estou delimitando os espaços de título, imagem e texto.... mas o que está quebrando minha cabeça, é que quando o titulo tem mais de uma linha, tudo dentro da div sobe, desalinhando essa DIV, então, tem alguma forma de criar todas as divs bonitinho, e colocar para algmas delas não se moverem de jeito nenhum?

 

 

esquematizei o boletim da seguinte forma.

 

uma div grande, dentro dela no topo, uma div grande, abaixo 3 divs menores, e abaixo mais 2.

 

Abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se for possível passa o código aqui para entendermos melhor o que acontece!

Mas se a div do topo for pegaro topo inteiro, sem divs do lado, tente colocar clear:both; nela...

 

Até mais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se for possível passa o código aqui para entendermos melhor o que acontece!

Mas se a div do topo for pegaro topo inteiro, sem divs do lado, tente colocar clear:both; nela...

 

Até mais!

 

Oa, vou tentar, mas ai está o codigo.

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Template 9 - Single Column</title>
   <style type="text/css" media="screen">
      body {
         margin: 0;
         padding: 0;
         background-color: #ffffff;
      }

      td.permission {
         padding: 20px 0 20px 0;
      }

      td.permission p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
      }

      td.permission p a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #a72323;
      }

      td.header {
         background-image: url('header.jpg');
         background-repeat: no-repeat;
         background-position: top center;
         background-color: #b62e2e;
         height: 130px;
      }

      td.header h1 {
         font-family: Georgia, serif;
         font-size: 30px;
         font-weight: normal;
         color: #333333;
         margin-left: 50px;
         margin-bottom: 24px;
      }

      table.content {
         background-color: #f5f5f5;
      }

      td.sidebar a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #a72323;
         text-decoration: none;
      }

      td.sidebar ul {
         margin: 0 0 0 24px;
         padding: 0;
      }

      td.sidebar ul li,
      td.sidebar ul li a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #a72323;
      }

      td.sidebar h3 {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #333333;
         margin: 10px 0 14px 0;
         padding: 0;
      }

      td.sidebar h3.buttons {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #333333;
         margin: 0 0 4px 0;
         padding: 0;
      }

      td.sidebar h4 {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 13px;
         font-weight: bold;
         color: #333333;
         margin: 0 0 2px 0;
         padding: 0;
      }

      td.sidebar p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #505050;
         margin: 0 0 13px 0;
         padding: 0;
      }

      td.sidebar p.buttons {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #505050;
         margin: 0 0 4px 0;
         padding: 0;
      }

      td.border {
         border-right: 2px solid #e0e0e0;
      }

      td.mainbar a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #a72323;
         text-decoration: none;
      }

      td.mainbar h2 {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #a72323;
         margin: 0 0 4px 0;
         padding: 0 0 4px 0;
         border-bottom: 1px solid #cbcbcb;
      }

      td.mainbar h3 {
         font-family: Georgia, serif;
         font-size: 16px;
         font-weight: normal;
         color: #333333;
         margin: 10px 0 14px 0;
         padding: 0;
      }

      td.mainbar p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 16px 0;
         padding: 0;
      }

      td.mainbar p.top {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: bold;
         color: #a72323;
         margin: 0 0 30px 0;
         padding: 0;
      }

      td.mainbar p.top a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: bold;
         color: #a72323;
      }

      td.mainbar ul {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 20px 24px;
         padding: 0;
      }

      td.footer {
         padding: 20px 0 20px 0;
      }

      td.footer p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
      }
   </style>

</head>
<body>
<a name="top" id="top"></a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center"><table width="580" border="0" cellspacing="0" cellpadding="0">
            <tr>

           </tr>
            <tr>
               <td class="header" align="left" valign="bottom">
                  <img src="header.jpg" alt="ABC Widgets" width="580" height="130" />
               </td>
            </tr>
            <tr>
               <td>
                  <table width="580" height="1076" border="0" cellspacing="0" cellpadding="0" class="content">
                    <tr>
                      <td height="282" align="left" valign="top" class="mainbar"><p align="center">Eventos</p>
                      <table width="563" cellspacing="1" cellpadding="7" border="0" align="center" style='table-layout:fixed'>
                        <tbody>
                          <tr>
                            <td width="359" height="280" bgcolor="#E9E9E9"><img width="360" height="253" alt="" src="header.jpg" style='table-layout:fixed'/></td>
                            <td width="173" colspan="5" rowspan="5" bgcolor="#E9E9E9" style="text-align: justify;"><div align="justify" style='table-layout:fixed'>
                                <p align="left" class="style40">No último dia 08, quinta feira</p>
                            </div>
                                <div align="justify" style='table-layout:fixed'>
                                  <p>N<span class="style34">o último dia 08, quinta feira, os empresários Cristiane Gusmão e Marcelo Pio realizaram um coquetel de apresentação do showroom da loja Viver de Arte, localizada no shopping   Iguatem</span></p>
                                  <p class="style34"><strong>LEIA MAIS</strong></p>
                                </div></td>
                          </tr>
                        </tbody>
                      </table></td>
                    </tr>
                    <tr>
                      <td height="767" align="left" valign="top" class="mainbar"><div align="center">
                        <p>Eventos                        </p>
                        </div>
                        <table width="562" height="326" border="0" align="center" cellpadding="7" cellspacing="1">
                          <tbody>
                            <tr>
                              <td width="155" height="280" bgcolor="#E9E9E9"><div align="justify">
                              
                                <p><img width="172" height="130" alt="" src="header.jpg" style='table-layout:fixed'/></p>
                                </div>
                                  <div align="justify">
                                    <p><span class="style34">smão </span></p>
                                    <p><span class="style34">No último dia 08, quinta feira, os   empresários Cristiane Gusmão e Marcelo Pio realizaram um coquetel de   apresentação do showroom da loja Viver de Arte, localizada no shopping   Iguatem</span></p>
                                    <p><strong>L<span class="style34">EIA MAIS</span></strong></p>
                                  </div></td>
                              <td width="155" height="280" bgcolor="#E9E9E9"><div align="justify">
                                <p><img width="172" height="130" alt="" src="header.jpg" style='table-layout:fixed'/></p>
                                </div>
                              <div align="justify">
                                    <p>N<span class="style34">o último dia 08, quinta feira, os   empresários </span></p>
                                    <p>N<span class="style34">o último dia 08, quinta feira, os   empresários Cristiane Gusmão e Marcelo Pio realizaram um coquetel de   apresentação do showroom da loja Viver de Arte, localizada no shopping   Iguatem</span></p>
                                    <p><strong>L<span class="style34">EIA MAIS</span></strong></p>
                              </div></td>
                              <td width="155" colspan="5" rowspan="5" bgcolor="#E9E9E9" style="text-align: justify;"><div align="justify">
                                <p><img width="172" height="130" alt="" src="header.jpg" style='table-layout:fixed'/></p>
                                </div>
                              <div align="justify">
                                    <p><span class="style34">sentação do showr</span></p>
                                    <p>N<span class="style34">o último dia 08, quinta feira, os empresários Cristiane Gusmão e Marcelo Pio realizaram um coquetel de   apresentação do showroom da loja Viver de Arte, localizada no shopping   Iguatem</span></p>
                                    <p><strong>L<span class="style34">EIA MAIS</span></strong></p>
                              </div></td>
                            </tr>
                          </tbody>
                        </table>
                          <p align="center">Blogs</p>
                          <table width="563" height="326" border="0" align="center" cellpadding="7" cellspacing="1" bordercolor="#F5F5F5">
                            <tbody>
                              <tr>
                                <td colspan="5" rowspan="5" bgcolor="#E9E9E9" style="text-align: justify;"><div align="justify">
                                      <p><img width="359" height="220" alt="" src="header.jpg" style='table-layout:fixed'/></p>
                                </div>
                                <div align="justify">
                                      <p><span class="style34">dia 08, quinta feira, o</span></p>
                                      <p>N<span class="style34">o último dia 08, quinta feira, os   empresários Cristiane Gusmão e Marcelo Pio realizaram um coquetel de   apresentação do showroom da loja Viver de Arte, localizada no shopping   Iguatem</span></p>
                                  <p><strong>L<span class="style34">EIA MAIS</span></strong></p>
                                  </div></td>
                                <td width="173" colspan="5" rowspan="5" bgcolor="#E9E9E9" style="text-align: justify;"><div align="justify">
                                      <p><img width="172" height="130" alt="" src="header.jpg" style='table-layout:fixed'/></p>
                                      </div>
                                <div align="justify">
                                      <p class="style35"><span class="style34">ntação d</span></p>
                                      <p class="style35"><span class="style34">No último dia 08, quinta feira, os   empresários Cristiane Gusmão e Marcelo Pio realizaram um coquetel de   apresentação do showroom da loja Viver de Arte, localizada no shopping   Iguatem</span></p>
                                  <p class="style35"><strong>L<span class="style34">EIA MAIS</span></strong></p>
                                    <p class="style35"> </p>
                                  </div></td>
                              </tr>
                            </tbody>
                          </table>                      </td>
                    </tr>
                  </table>
              </td>
            </tr>
         </table>
         <table width="646" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><img src="footer-tail.jpg" alt="Footer" width="646" height="87" /></td>
            </tr>
            <tr>
               <td align="center" class="footer">
                  <p><forwardtoafriend>Forward this email</forwardtoafriend> to a friend. Not interested anymore? <unsubscribe>Unsubscribe</unsubscribe>.<br /><br />abcWidgets and the abcWidgets Logo are registered trademarks of <span>abcWidgets Corp</span>.<br />ABCWidgets Corp - 123 Some Street, City, ST 99999. ph +1 4 1477 89 745</p></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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