Ir para conteúdo
Camilavip

Flip de rotação invade o rodapé

Recommended Posts

Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé

Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
   
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  </head>
  <body>

    <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>
    
      
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>
</div>



                                <!-- AQUI COMEÇA O RODAPÉ -->

<!-- CSS DO RODAPÉ -->
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.content1{
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}
.content1 .text{
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}
.content1 .p{
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}
footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}
.main-content{
  display: flex;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #f12020;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;
}
.left .content .social a{
  padding: 0 2px;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #f12020;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #f12020;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: #656565;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form .msgForm{
  width: 100%;
  font-size: 1.0625rem;
  background: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form .msgForm:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  background: #f12020;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: #000;
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
  background: #151515;
}
.bottom center span{
  color: #656565;
}
.bottom center a{
  color: #f12020;
  text-decoration: none;
}
.bottom center a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 900px) {
  footer{
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }
}
</style> 



 <div class="content1">
      <div class="text">
Fully Responsive Footer Section</div>
<div class="p">
HTML and CSS (Flexbox)</div>
</div>
<footer>
      <div class="main-content">
        <div class="left box">
          <h2>
About us</h2>
<div class="content">
            <p>
CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p>
<div class="social">
              <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
              <a href="#"><span class="fab fa-twitter"></span></a>
              <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a>
              <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a>
            </div>
</div>
</div>
<div class="center box">
          <h2>
Address</h2>
<div class="content">
            <div class="place">
              <span class="fas fa-map-marker-alt"></span>
              <span class="text">Birendranagar, Surkhet</span>
            </div>
<div class="phone">
              <span class="fas fa-phone-alt"></span>
              <span class="text">+089-765432100</span>
            </div>
<div class="email">
              <span class="fas fa-envelope"></span>
              <span class="text">abc@example.com</span>
            </div>
</div>
</div>
<div class="right box">
          <h2>
Contact us</h2>
<div class="content">
            <form action="#">
              <div class="email">
                <div class="text">
Email *</div>
<input type="email" required>
              </div>
<div class="msg">
                <div class="text">
Message *</div>
<!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea -->
<changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea -->
              
              <br />
<div class="btn">
<button type="submit">Send</button>
              </div>
<div class="bottom">
<center>
          <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span>
          <span class="far fa-copyright"></span> 2020 All rights reserved.
        </center>
</div>

 </body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá,

Basta acrescentar uma div "container" com o tamanho que deseja e o position relative.

 

<div class="container">
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>

</div>
      </center> 
</div><!-- container relative -->
    
.container{
  width: 500px;
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

O position absolute tem que ficar dentro do relative. Isso acontece porque o "absoluto" precisa de um ponto de referência.

Aqui tem a explicação: https://tableless.com.br/propriedade-position-do-css.

 

Abraços!

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Sherlock02 disse:

Olá,

Basta acrescentar uma div "container" com o tamanho que deseja e o position relative.

 


<div class="container">
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>

</div>
      </center> 
</div><!-- container relative -->
    

.container{
  width: 500px;
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

O position absolute tem que ficar dentro do relative. Isso acontece porque o "absoluto" precisa de um ponto de referência.

Aqui tem a explicação: https://tableless.com.br/propriedade-position-do-css.

 

Abraços!

 

 

Mas dessa forma ele me obriga com o container não tomar todo o espaço da tela, e fico limitada a definir tamanhos em pixels, quando  troco os pixels por porcentagens, ele volta ao mesmo problema

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá,

Eu não entendi exatamente o que você quis dizer, porque basta trocar o código por width: 100%.

  .container{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }  

 

Aqui está o exemplo do código trocando somente o width de pixels para porcentagem ocupando a largura total, e ainda acrescentei um header, só para você ver como ficaria:

Redimensione a tela para ver a versão mobile e desktop.

https://jsfiddle.net/7s40zkja

 

O único "problema" do seu código é ter colocado um footer fixo (na verdade não é um problema, só é estranho). Eu pensei que fosse sua preferência, mas agora acho que entendi que é a isso que você estava se referindo.

Substitua esse código:

footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}

Por esse:

footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  background: #111;
}

 E o resultado será esse: https://jsfiddle.net/x4tfv98m

 

Seria isso o que você precisava?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 05/07/2020 at 10:07, Sherlock02 disse:

Olá,

Eu não entendi exatamente o que você quis dizer, porque basta trocar o código por width: 100%.


  .container{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }  

 

Aqui está o exemplo do código trocando somente o width de pixels para porcentagem ocupando a largura total, e ainda acrescentei um header, só para você ver como ficaria:

Redimensione a tela para ver a versão mobile e desktop.

https://jsfiddle.net/7s40zkja

 

O único "problema" do seu código é ter colocado um footer fixo (na verdade não é um problema, só é estranho). Eu pensei que fosse sua preferência, mas agora acho que entendi que é a isso que você estava se referindo.

Substitua esse código:


footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}

Por esse:


footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  background: #111;
}

 E o resultado será esse: https://jsfiddle.net/x4tfv98m

 

Seria isso o que você precisava?

Tento e não da, o flip continua invadindo o rodapé

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá,

Teria como você tirar um print de como está no seu site de testes e outra imagem representando o que você gostaria de fazer?

Porque se você realmente tentar deixar o footer fixed, é impossível ele não invadir, porque é como colocar um menu fixo no topo. A função dele é ficar sobre qualquer outro elemento da página.

 

Agora você diz que o flip invade o rodapé, e não o rodapé que invade o flip, e no exemplo que te enviei isso não acontece. Cada um está em seu próprio bloco.

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 horas atrás, Sherlock02 disse:

Olá,

Teria como você tirar um print de como está no seu site de testes e outra imagem representando o que você gostaria de fazer?

Porque se você realmente tentar deixar o footer fixed, é impossível ele não invadir, porque é como colocar um menu fixo no topo. A função dele é ficar sobre qualquer outro elemento da página.

 

Agora você diz que o flip invade o rodapé, e não o rodapé que invade o flip, e no exemplo que te enviei isso não acontece. Cada um está em seu próprio bloco.

Resolvi o problema, alterei o css original do flip

 <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>

Por esse abaixo, agora tudo está resolvido.

<style>
.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

</style>

Realmente o problema estava no position: absolute

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 horas atrás, Camilavip disse:

Resolvi o problema, alterei o css original do flip


 <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>

Por esse abaixo, agora tudo está resolvido.


<style>
.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

</style>

Realmente o problema estava no position: absolute

 

Que bom que conseguiu!

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


×

Informação importante

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