Jump to content
s3c0

Menu Suspenso

Recommended Posts

Olá pessoal,

 

peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.

 

Segue abaixo:

 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
/*Configurações Padrões*/
ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; }
ul.menu ul{ position:absolute; display:none;}
 
/* Configurações nivel 1*/
ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;}
.menu li{ float:left; width:auto; position:relative;}
.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear;  }
 
/* Configurações nivel 2*/
.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px;  }
.menu ul.submenu-1 a{ padding:0 20px; width:250px;  }
 
/* Configurações nivel 2*/
.menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px;  }
.menu ul.submenu-2 a{  width:250px; padding:0 20px;  }
 
/* Configurações nivel 3*/
.menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px;  }
.menu ul.submenu-3 a{  width:250px; padding:0 20px;  }
 
.column1 {
  float: left;
  width: 250px;
  padding: 10px;
  min-height: 250px;
}

.column1 a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column1 a:hover {
}
 
.column4 {
  float: right;
  width: 300px;
  padding: 10px;
  min-height: 250px;
  position:relative;
  top:0px;
}

.column4 a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column4 a:hover {
}

.row:after {
  content: "";
  display: table;
  clear: both;
} 
 
/*Configurações de cores*/
 
/*nivel 1*/
.menu{background:#CCC; }
.menu a{ color:#000; }
.menu li:hover > a{ color:#000; }
 
/*nivel 2*/
.submenu-1{}
.submenu-1 a{color:#000;}
.submenu-1 li:hover > a{ color:#000; }
 
/*nivel 3*/
.submenu-2{ }
.submenu-2 a{color:#000;};
.submenu-2 li:hover > a{ color:#000; }
 
/*nivel 3*/
.submenu-3{ }
.submenu-3 a{color:#000;}
.submenu-3 li:hover > a{ color:#000; }
 
 

 

<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
    <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a>		
        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
            <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
			  <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
        </ul>
    </li>
</ul>

 

A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.

 

Alguém consegue me explicar o que está de errado?

 

Agradeço a atenção de todos!

menu1.jpg

menu2.jpg

Share this post


Link to post
Share on other sites
<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
    <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a>		
        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
            <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul style="top: -88px;" class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
			  <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a>
                    <ul style="top: -45px;" class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul style="top: -88px;" class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
        </ul>
    </li>
</ul>

ft1.png.6dd05eee1c627064f521d82792ec66d8.png

 

@s3c0 é isso?

Share this post


Link to post
Share on other sites

@Megao obrigado pela resposta.

 

É quase isso. 

 

Se você adicionar mais "departamentos", os demais não ficam no "topo" do menu.

 

Percebi que você especificou a margem TOP tanto do ul como do li, mas não teria como fazer automático? Supondo que não sabemos quando "departamentos" serão adicionados.

 

E na segunda imagem que adicionei, tem uma faixa azul, que seria o fundo do menu.

Share this post


Link to post
Share on other sites
1 hora atrás, s3c0 disse:

Percebi que você especificou a margem TOP tanto do ul como do li, mas não teria como fazer automático? Supondo que não sabemos quando "departamentos" serão adicionados.

Eu editei somente o código HTML, pois meu tempo atualmente está escasso, ou seja; não me sobra tempo para interpretar o CSS da tua página.

1 hora atrás, s3c0 disse:

E na segunda imagem que adicionei, tem uma faixa azul, que seria o fundo do menu.

Não entendi muito bem. Tu quer que o fundo azul apareça junto com as categorias ou fique ali de maneira fixa?

https://www.w3schools.com/css/css_background.asp

Share this post


Link to post
Share on other sites

Olá @Megao obrigado pela ajuda.

 

"Consegui" fazer o tão esperado modelo do menu, porém não consigo finalizar da forma que gostaria.

 

Em anexo, o menu "funcionando", porém o que não estou conseguindo fazer:

 

* A altura da DIV PAI seguir com a altura das DIV´s filho;
* A altura das DIV´s filho (coluna 2 e 3) também não possui altura referente a DIV PAI ou coluna1;

* A imagem ("banner") não fica no topo do menu

 

Segue códigos:

 

.i9-menu{position:absolute;z-index:102;top:auto;display:none;text-align:left;margin-top:15px;border:1px solid #d0d0d0;border-radius:3px; }
.i9-menu a{display: inline-block;}
.ul-menu{list-style-type: none; padding:20px 10px; position:absolute;background-color:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);width:1170px;margin-left:-19px;display:inline-block;float:left; height:auto; }
.li-menu{color:#000;list-style-type: none; font-size:14px;font-weight: bold; padding:5px; width:152px;}
.navPages-item:hover .i9-menu{display:block;}

#navPages ul li{list-style-type:none;}
#navPages ul li a{text-decoration:none;}
#navPages ul li a:hover{background-color:#ccc;width:152px;}
#navPages ul li > ul{display:none;}
#navPages ul li:hover > ul {display:block;margin-left: 152px;position:absolute;top:0px;padding:25px 30px ;}

 

<div class="navPages-container" id="menu" data-menu>
        <div class="container">
            <nav class="navPages" style="text-align:left;">
				<ul class="navPages-list">
					<li class="navPages-item">
						<a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a>
						<div class="i9-menu" id="navPages" tabindex="-1">
							<ul class="ul-menu">
								<li class="li-menu">
									<div><a class="navPage-subMenu-action navPages-action has-subMenu" href="glamourishtml">
										<i class="fa fa-list"></i> <span>Glamouris</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:20px;"></i>
										</a>
									</div>
										<ul>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a>
												<ul>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
												</ul>
											</li>
										</ul>	
								</li>
								<li class="li-menu">
									    <div><a class="navPage-subMenu-action navPages-action has-subMenu" href="glamouris.html">
										<i class="fa fa-list"></i> <span>Glamouris</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:20px;"></i>
										</a>
									</div>
								</li>
								<li class="li-menu">
									    <div><a class="navPage-subMenu-action navPages-action has-subMenu" href="glamouris.html">
										<i class="fa fa-list"></i> <span>Glamouris</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:20px;"></i>
										</a>
									</div>
								</li>
							<div style="float: right; margin-right: 0; width:350px; text-align:center; postion:relative; margin-top:0px;">
								<img src="departamentos/departamentos.jpg" name="categoria" style="border: 1px; solid transparent; border-radius: 3px; width:350px;">
							</div>
							</ul>
						</div>
					</li>
				</ul>
			</nav>
        </div>
</div>

 

O que estaria de errado com o código?

menu1.png

menu2.png

menu3.png

menu4.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By RewelB
      Olá, gostaria de saber como faço pra que quando o usuário digite algo em um campo de texto a imagem fique girando. Eu tenho a imagem de uma engrenagem e queria que ela fizesse uma animaçãozinha no estilo da que tem nesse site: http://www.empsis.com.br/. Sou iniciante e peço desculpas se isso for muito simples de fazer. Estou usando PHP, HTML e CSS.
    • By RewelB
      Olá, gostaria de saber como faço pra que quando o usuário digite algo em um campo de texto a imagem fique girando. Eu tenho a imagem de uma engrenagem e queria que ela fizesse uma animaçãozinha no estilo da que tem nesse site: http://www.empsis.com.br/. Sou iniciante e peço desculpas se isso for muito simples de fazer. Estou usando PHP, HTML e CSS.
    • By Priscila Sena
      Boa noite, tudo bem?

      Me chamo Priscila e estou com um pequeno problema.

      Usamos um sistema que gera template de e-mail marketing aqui na empresa que eu trabalho e o disparo é feito por um sistema de disparo de e-mails, mudaram agora quem dispara e estamos com alguns problemas. As imagens ficam enormes em alguns navegadores (principalmente quando abrem pelo Outlook), o TI, que foi quem fez o template está batendo um pouco a cabeça para tentar resolver o problema para os próximos, o código eu acho que está mais ou menos e creio que o problema seja que ele não reconhece a tag style que puxa pelo td, mas não tenho certeza. 

      Podem me ajudar para algumas melhorias para os próximos? Para evitar quebra?

      Eu vou deixar o código aqui para vocês darem uma olhada, é o código de uma campanha mais antiga.

      "
      <!DOCTYPE html>
      <html>
          <head>
              <meta name="generator" content="">
              <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
              <meta http-equiv="content-type" content="text/html; charset=utf-8">
          </head>
          <body style="font-family: 'Roboto', Myriad-pro, Arial, Helvetica, sans-serif;background-color: #eee;color: #666;">
                              <div class="container 1" style="width: 100%;max-width: 700px;min-width: 320px;margin: 0 auto;background-color: white;">
                              <table cellpadding="0" cellspacing="0" class="imgTopo" style="margin: 30px 0 10px;border-spacing: 0;width: 100%;max-width: 700px;height: auto;">
                      <tr>
                          <td>
                              <a href="https://www.walmart.com.br/" target="_blank" style="text-decoration: none;"><img style="width: 100%;" src="https://template.casavaticano.com.br//templates/testeira_pais_emkt-walmart.png"></a>
                          </td>
                      </tr>
                  </table>
                              <table style="width: 100%;max-width: 700px;min-width: 320px;text-align: center;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                      <tbody>
                                              <tr>
                                                                                          <tr>
                                                                     <td valign="bottom" align="centered">
                                                                              <table class="toda_categoria_a_com_x_de_desconto_na_compra_da_y_unidade" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/6953202.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
                      <table class="boxRed" style="margin: 0 auto;border-spacing: 0;width: 210px;background-color: #dd1a3a;border-radius: 10px;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table class="boxYellow" style="margin: 4px auto 0px;border-spacing: 0;width: 200px;background-color: yellow;border-radius: 6px;padding: 0px;" cellspacing="0" cellpadding="0"><tbody><tr>
                  <td><table style="width: 170px;margin: 0 auto;border-spacing: 0;"><tbody><tr>
                  <td class="txtPorcDesc" style="text-transform: uppercase;color: #dd1a3a;font-weight: 700;font-size: 38px;">
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>50</span><span class="txtPorcSinal" style="text-transform: uppercase;color: #dd1a3a;font-weight: 900;font-size: 20px;">%</span>
                      </td></tr></tbody></table>
                  </td>
                  <td class="txtDescUnid" style="text-transform: uppercase;color: black;font-weight: 900;font-size: 14px;line-height: 100%;position: relative;left: 5px;text-align: left;">
                      <table style="width: 120px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>de desconto </span><br><span>na 2ª unidade**</span>          
                      </td></tr></tbody></table>
                  </td>
                  </tr></tbody></table></td>
              </tr></tbody></table>
              <table style="max-width: 95%;height: 50px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                  <tbody>
                      <tr>
                          <td class="txtBoxRed" style="text-transform: uppercase;color: white;font-weight: 400;font-size: 14px;">
                              <span>TODOS OS PAPÉIS HIGIÊNICOS</span>
                          </td>
                      </tr>
                  </tbody>
                  </table>
                      </td>
              </tr>
              </tbody>
              </table>
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <td valign="bottom" align="centered">
                                                                               <table class="toda_categoria_a_com_x_de_desconto_na_compra_da_y_unidade" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/6722944.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
                      <table class="boxRed" style="margin: 0 auto;border-spacing: 0;width: 210px;background-color: #dd1a3a;border-radius: 10px;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table class="boxYellow" style="margin: 4px auto 0px;border-spacing: 0;width: 200px;background-color: yellow;border-radius: 6px;padding: 0px;" cellspacing="0" cellpadding="0"><tbody><tr>
                  <td><table style="width: 170px;margin: 0 auto;border-spacing: 0;"><tbody><tr>
                  <td class="txtPorcDesc" style="text-transform: uppercase;color: #dd1a3a;font-weight: 700;font-size: 38px;">
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>50</span><span class="txtPorcSinal" style="text-transform: uppercase;color: #dd1a3a;font-weight: 900;font-size: 20px;">%</span>
                      </td></tr></tbody></table>
                  </td>
                  <td class="txtDescUnid" style="text-transform: uppercase;color: black;font-weight: 900;font-size: 14px;line-height: 100%;position: relative;left: 5px;text-align: left;">
                      <table style="width: 120px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>de desconto </span><br><span>na 2ª unidade**</span>          
                      </td></tr></tbody></table>
                  </td>
                  </tr></tbody></table></td>
              </tr></tbody></table>
              <table style="max-width: 95%;height: 50px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                  <tbody>
                      <tr>
                          <td class="txtBoxRed" style="text-transform: uppercase;color: white;font-weight: 400;font-size: 14px;">
                              <span>TODOS AS FRALDAS HUGGIES</span>
                          </td>
                      </tr>
                  </tbody>
                  </table>
                      </td>
              </tr>
              </tbody>
              </table>
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <tr>
                                                                      <td valign="bottom" align="centered">
                                                                              <table class="toda_categoria_a_com_x_de_desconto_na_compra_da_y_unidade" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/8134526.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
                      <table class="boxRed" style="margin: 0 auto;border-spacing: 0;width: 210px;background-color: #dd1a3a;border-radius: 10px;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table class="boxYellow" style="margin: 4px auto 0px;border-spacing: 0;width: 200px;background-color: yellow;border-radius: 6px;padding: 0px;" cellspacing="0" cellpadding="0"><tbody><tr>
                  <td><table style="width: 170px;margin: 0 auto;border-spacing: 0;"><tbody><tr>
                  <td class="txtPorcDesc" style="text-transform: uppercase;color: #dd1a3a;font-weight: 700;font-size: 38px;">
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>60</span><span class="txtPorcSinal" style="text-transform: uppercase;color: #dd1a3a;font-weight: 900;font-size: 20px;">%</span>
                      </td></tr></tbody></table>
                  </td>
                  <td class="txtDescUnid" style="text-transform: uppercase;color: black;font-weight: 900;font-size: 14px;line-height: 100%;position: relative;left: 5px;text-align: left;">
                      <table style="width: 120px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>de desconto </span><br><span>na 2ª unidade**</span>            
                      </td></tr></tbody></table>
                  </td>
                  </tr></tbody></table></td>
              </tr></tbody></table>
              <table style="max-width: 95%;height: 50px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                  <tbody>
                      <tr>
                          <td class="txtBoxRed" style="text-transform: uppercase;color: white;font-weight: 400;font-size: 14px;">
                              <span>TODOS OS VINHOS OU ESPUMANTES</span>
                          </td>
                      </tr>
                  </tbody>
                  </table>
                      </td>
              </tr>
              </tbody>
              </table>
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <td valign="bottom" align="centered">
                                                                              <table class="simples" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <table style="width: 100%;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="vertical-align: bottom;">
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/7281902.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
       
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="line-height: 80%;text-align: center;" width="210px" height="70px">
                                          <span class="txtInfo" style="text-transform: uppercase;">
                                          <span class="txtNome" style="font-weight: 900;color: black;font-size: 9pt;">Café Pilão</span><br>
                                          <span class="txtDesc" style="font-weight: 400;font-size: 8pt;">Extraforte Almofada 500g</span>
                                      </span>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td class="txtPreco" style="min-width: 130px;padding: 4px 0;text-align: center;border-radius: 6px;font-weight: 900;line-height: 1;background-color: #dd1a3a;">
                      <a class="btnPreco" href="http://www.walmart.com.br/" style="text-decoration: none;padding: 20px 20px 0;">
                          <span class="txtCurrency" style="color: yellow;">R$</span> 
                          <span class="txtInteger" style="color: yellow;font-size: 32pt;">7</span>
                          <span class="txtCents" style="color: yellow;yellow;font-size: 16pt">,44</span>
                      </a>
                  </td>
              </tr>
          </tbody>
      </table>
       
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <tr>
                                                                      <td valign="bottom" align="centered">
                                                                              <table class="simples" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <table style="width: 100%;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="vertical-align: bottom;">
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/7465255.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
       
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="line-height: 80%;text-align: center;" width="210px" height="70px">
                                          <span class="txtInfo" style="text-transform: uppercase;">
                                          <span class="txtNome" style="font-weight: 900;color: black;font-size: 9pt;">Cerveja Brahma</span><br>
                                          <span class="txtDesc" style="font-weight: 400;font-size: 8pt;">Lata 350ml cada Pack com 18 unidades</span>
                                      </span>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td class="txtPreco" style="min-width: 130px;padding: 4px 0;text-align: center;border-radius: 6px;font-weight: 900;line-height: 1;background-color: #dd1a3a;">
                      <a class="btnPreco" href="http://www.walmart.com.br/" style="text-decoration: none;padding: 20px 20px 0;">
                          <span class="txtCurrency" style="color: yellow;">R$</span> 
                          <span class="txtInteger" style="color: yellow;font-size: 32pt;">34</span>
                          <span class="txtCents" style="color: yellow;yellow;font-size: 16pt">,02</span>
                      </a>
                  </td>
              </tr>
          </tbody>
      </table>
       
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <td valign="bottom" align="centered">
                                                                              <table class="parcelado" style="width: 320px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/8931023.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
       
                                      <table style="width: 100%;height: 70px;margin-bottom: 2px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="vertical-align: bottom;">
                                      <table style="text-align: left;width: 110px;margin: 0 auto 4px;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                          <tbody>
                                              <tr>
                                                  <td style="line-height: 80%;">
                                                      <span class="txtInfo">
                                                          <span class="txtNome" style="font-weight: 900;color: black;font-size: 9pt;line-height: 80%;text-transform: uppercase;">Smart TV 49&quot; LG</span>
                                                          <br>
                                                          <span class="txtDesc" style="font-weight: 400;font-size: 8pt;line-height: 80%;">Com acesso à internet</span>
                                                      </span>
                                                  </td>
                                              </tr>
                                          </tbody>
                                      </table>
                                  </td>
                                  <td style="vertical-align: bottom;">
                                                                      <table style="text-align: left;width: 190px;font-weight: 900;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                          <tbody>
                                              <tr>
                                                  <td>
                                                      <table style="width: 190px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                          <tbody>
                                                              <tr>
                                                                  <td>
                                                                      
                                                                      <table style="margin: 0 auto;margin-right: 10px;border-spacing: 0;">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td style="line-height:1.1;">
                                                                                      <table style="margin: 0 auto;border-spacing: 0;text-align: right;" width="32px" cellspacing="0" cellpadding="0">
                                                                                          <tbody>
                                                                                              <tr>
                                                                                                  <td>
                                                                                                      <span style="color:#dd1a3a;font-weight: 700;font-size: 7pt;">À vista</span>
                                                                                                      <span style="color: #dd1a3a;font-size: 14pt;">R$</span>
                                                                                                  </td>
                                                                                              </tr>
                                                                                          </tbody>
                                                                                      </table>
                                                                                  </td>
                                                                                  
                                                                                  <td>
                                                                                      <table style="margin: 0 auto;margin-right: 0px;border-spacing: 0;">
                                                                                          <tbody>
                                                                                              <tr>
                                                                                                  <td>
                                                                                                      <span style="color: #dd1a3a;font-size: 30pt;">2.199</span>
                                                                                                  </td>
                                                                                              </tr>
                                                                                          </tbody>
                                                                                      </table>
                                                                                  </td>
                                                                                  <td style="text-align: right;line-height: 0.7">
                                                                                      <span style="color: #dd1a3a;font-size: 18pt;">,00</span>
                                                                                      <span style="color:#dd1a3a;font-weight: 700;font-size: 7pt;">cada</span>
                                                                                  </td>
                                                                                  
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                      
                                                                  </td>
                                                              </tr>
                                                          </tbody>
                                                      </table>
                                                  </td>
                                              </tr>
                                          </tbody>
                                      </table>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                                      <table style="text-align: left;width: 320px;height: 60px;font-weight: 900;border-radius: 6px;border-style: solid;border-width: 1px;background-color: #29417f;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table style="width: 320px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                          <tbody>
                                              <tr>
                                                  <td>
                                                      <table style="display: inline-block;width: 100px;line-height: 23px;margin-left: 5px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                          <tbody>
                                                              <tr>
                                                                  <td>
                                                                      <table style="margin: 0 auto;border-spacing: 0;margin-left: 5px;" cellspacing="0" cellpadding="0">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td style="width:100px;">
                                                                                      <span style="font-size: 6pt;color: white;text-transform: uppercase;">nos nossos cartões</span>
                                                                                  </td>
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                  </td>
                                                              </tr>
                                                              <tr>
                                                                  <td>
                                                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td style="width:100px;">
                                                                                      <img style="width: 50px;margin-left: 5px;" src="http://template.casavaticano.com.br/resources/cartoes.png">
                                                                                  </td>
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                  </td>
                                                              </tr>
                                                          </tbody>
                                                      </table>
                                                                                                      <table style="display: inline-block;width: 200px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                          <tbody>
                                                              <tr>
                                                                  <td>
                                                                      <table style="width: 200px;color: yellow;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td>
                                                                                      
                                                                                      <table style="margin: 0 auto;margin-right: 0px;border-spacing: 0;">
                                                                                          <tbody>
                                                                                              <tr>
                                                                                                  <td style="line-height: 1;">
                                                                                                      <table style="text-align: right;margin: 0 auto;border-spacing: 0;" width="20px" cellspacing="0" cellpadding="0">
                                                                                                          <tbody>
                                                                                                              <tr>
                                                                                                                  <td>
                                                                                                                      <span style="font-size: 14pt;">R$</span>
                                                                                                                  </td>
                                                                                                              </tr>
                                                                                                              <tr>
                                                                                                                  <td style="color:black;">
                                                                                                                      <span style="font-size: 18pt;"></span>
                                                                                                                      <span style="font-size: 18pt;color:white">15X</span>
                                                                                                                  </td>
                                                                                                              </tr>
                                                                                                          </tbody>
                                                                                                      </table>
                                                                                                  </td>
                                                                                                  
                                                                                                  <td>
                                                                                                      <table style="margin: 0 auto;margin-right: 0px;border-spacing: 0;">
                                                                                                          <tbody>
                                                                                                              <tr>
                                                                                                                  <td>
                                                                                                                      <span style="font-size: 38pt;">146</span>
                                                                                                                  </td>
                                                                                                              </tr>
                                                                                                          </tbody>
                                                                                                      </table>
                                                                                                  </td>
                                                                                                  <td style="margin: 0 auto;border-spacing: 0;line-height: 0.8;text-align: center;">
                                                                                                      <span style="font-size: 20pt;">,60</span>
                                                                                                      <br>
                                                                                                      <span style="font-weight: 700;font-size: 8pt;color: white;">sem juros</span>
                                                                                                  </td>
                                                                                              </tr>
                                                                                          </tbody>
                                                                                      </table>
                                                                                      
                                                                                  </td>
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                  </td>
                                                              </tr>
                                                          </tbody>
                                                      </table>
                                                  </td>
                                              </tr>
                                          </tbody>
                                      </table>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                  </td>
              </tr>
          </tbody>
      </table>

                                      </td>
                                                                                                              </tr>
                      </tbody>
                  </table>
                  
                            <table cellpadding="0" cellspacing="0" style="width: 100%;height: 40px;margin: 0 0 10px;text-align: center;border-spacing: 0;">
                      <tr>
                          <td>
                              <a class="btnConfira" href="https://www.walmartbrasil.com.br" target="_blank" style="text-decoration: none;text-transform: uppercase;font-size: 10pt;font-weight: 900;color: #007DC3;background-color: #f7c02b;padding: 12px 32px;border-radius: 24px;letter-spacing: 1px;">
                              Confira mais ofertas &gt;</a>
                          </td>
                      </tr>
                  </table>   
                  <table cellpadding="0" cellspacing="0" style="width: 100%;height: 20px;margin: 2 0 0 10px;text-align: center;border-spacing: 0;">
                      <tr>
                          <td>
                   <img style=" width: 500px; margin:0;"src="https://template.casavaticano.com.br/TEXTOS%20LEGAIS/LT.BEBIDAS-2.png">
                  </table>   
                  <div style="height: 16px"><table style="margin: 0 auto;border-spacing: 0;"><tr>
                  <td style=";display: inline-block;margin: 0;border-spacing: 0;border-radius: 6px 0 0 6px;padding: 14px 2px 8px 10px;background-color: #f7c02b;"><span style="color:#dd1a3a;font-style: italic;font-weight:900;font-size: 14pt;margin-right: 6px;line-height: 1;">Passa no</span></td>
                  <td style=";display: inline-block;margin: 0;border-spacing: 0;border-radius: 0 6px 6px 0;background-color: #027dc2;">
                      <img style="height: 35px;" src="https://template.casavaticano.com.br/bandeiras/WALMART.png">
                  </td>
                  </tr></table></div>
              <div style="width: 100%;max-width:700px;height: 12px;background-color: #f7c02b;margin: 0;border-spacing: 0;">
              </div>
                                <table cellpadding="0" cellspacing="0" class="txtBompreco" style="margin: 0 0 0;border-spacing: 0;width: 100%;height: 64px;font-size: 12pt;font-weight: 700;background-color: #007cc9;letter-spacing: 1px;">
          <tr>    
              <td>
                 
                  <table cellpadding="0" cellspacing="0" style="margin: 15px auto;border-spacing: 0;">
                      <tr>
                          <td>
                          </td>
                          <td align="center"><img style="height:40px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/Localizacao-novo.png"></td>
                                              <td>
                              <a href="https://tabloide.walmartbrasil.com.br/" target="_blank" style="text-decoration: none;"><span style="color: #f7c02b; margin-top:" >CLIQUE AQUI</span> <span style="color: white;">E VÁ ATÉ A LOJA MAIS PRÓXIMA</span></a>
                      </td>
                  </tr>
              </table>
                      <table cellpadding="0" cellspacing="0" class="txtSigaFacebook" style="margin: 0;border-spacing: 0;width: 100%;height: 74px;font-size: 12pt;font-weight: 700;background-color: #49aee9;letter-spacing: 1px;color: white;">
                  <tr>
                      <td>
                          <table cellpadding="0" cellspacing="0" style="margin: 0 auto;border-spacing: 0;">
                              <tr>
                                  <td><span>Siga a gente nas redes sociais:</span><img src=""></td>
                                                              <td align="center">
                                      <a href="https://www.facebook.com/walmartbrasil/" target="_blank" style="text-decoration: none;"><img style="height:36px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/facebook-novo.png"></a>
                                       <a href="https://www.instagram.com/walmartbrasil" target="_blank" style="text-decoration: none;"><img style="height:36px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/instagram-novo.png"></a>
                                       <a href="https://www.youtube.com/user/walmartinstitucional" target="_blank" style="text-decoration: none;"><img style="height:36px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/youtube-novo.png"></a>
                                  </td>
                                                          </tr>
                          </table>
                      </td>
                  </tr>
              </table>
                  </td>
              </div>
      </table>
      <table style="width: 100%;max-width: 700px;margin: 20px auto;padding: 0 30px;text-align: center;font-size: 9pt;line-height: 1.2;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><pre>Material vigente para 09/08/2019 ou enquanto durarem os estoques. Nem
      todos os produtos estão disponíveis nas lojas Walmart, podendo variar de acordo
      com o estoque ou sortimento de cada loja. Consulte a loja mais próxima. Para
      melhor atender nossos clientes, não vendemos por atacado e reservamo-nos o
      direito de limitar a quantidade de 12un./kg por cliente dos produtos anunciados.
      Nas lojas participantes garantimos a quantidade mínima de 12un./kg por loja dos
      produtos anunciados na data de início do anúncio. Fotos meramente ilustrativas.</span></td>
              </tr>
          </tbody>
      </table>
                              </body>
      </html>"

      Obrigada
    • By yuseirender
      Olá, sou novo aqui e preciso de ajuda, criei uma index aqui e localmente fica tudo certo, porem quando vou tentar normalmente em outro pc fica alguns itens fora de foco
       
      local:

      teste:

       
      codigo fonte:
       
    • By manoaj
      Boa tarde pessoal!
      Criei um sistema simples pra web utilizando PHP no backand.
      Mas agora antes do lançamento do sistema surgiu a necessidade de um app de consulta a esse sistema com funções básicas da plataforma Web, ou seja nem todas as funcionalidades serão implementadas no app agora no início.
      Qual a minha melhor alternativa no desenvolvimento híbrido hj em questão de agilidade no desenvolvimento considerando que minha plataforma web e o banco de dados mysql já estão prontos???
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.