Jump to content

kaionr

Members
  • Content count

    3
  • Joined

  • Last visited

Community Reputation

0 Comum

About kaionr

  1. Olá, estou com uma dificuldade para posicionar um elemento. Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução. No momento estou usando o position absolute, a div é essa abaixo: .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei: {position: relative; top: 50%; left: 50%;} Alguém pode me ajudar? Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
  2. kaionr

    Como alternar divs em um clique

    Obrigado, agora é só conseguir fazer somente um botão (e não 2) alternar entre as divs no mesmo lugar: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial;} /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; } /* Fade in tabs */ @-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <h3>Fade in Tabs</h3> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent.style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks.className = tablinks.className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> </body> </html> Sabe como faço?
  3. Olá galera, estou começando a estudar java script e gostaria de colocar uma função, tenho duas divs que são estas: <style> .fundo1{ Width: 100%; Height: 50%; Background-color: #568CA4; Padding: 20px; } .fundo2{ Width: 100%; Height: 50%; Background-color: grey; Padding: 20px; } </style> <div class="fundo1"> Logar </div> e essa: <div class="fundo2"> Registrar </div> Na div fundo1 é o local de logar e na div2 é registro, queria que em uma só pagina esses dois elementos se alternassem ao clicar em um botão. Exemplo a página padrão (ao entrar na index) é aparecer a div1, um botão acima de "registrar" faz aparecer no mesmo momento (E no mesmo lugar pois a div são do mesmo tamanho sem carregar uma outro página) esta div2 e o mesmo botão se transformar em Logar, para aparecer novamente a div1. Vocês podem me ajudar ou me mandar uma postagem ou codigo com essa função?
×

Important Information

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