Publicado em 11 de mai.

Página se mexe quando "esconde/mostra" formulário HTML/css/jav

Olá, eu sou ilustrador e comecei a aprender html/css semana retrasada. Estou fazendo este site: www.globalutopia.co.nf .

Este é o meu primeiro site, por isso tenho certeza que verão muitas gambiarras, mas em breve vou ter conhecimento suficiente para consertar isso.

Como podem ver, ao lado da descrição da pagina coloquei a opção de esconder ou revelar o formulario, que em breve sera um botão. Mas quando eu clico a página desce, como se rolasse para baixo. E cada vez que o formulário é revelado ou escondido isso acontece. Tem como deixar a página fixa onde o usuário esta visualizando quando ele clica no botão?

JAVASCRIPT

 function toggle_visibility(id) {
 var e = document.getElementById(id);
 if(e.style.display == 'block')
 e.style.display = 'none';
 else
 e.style.display = 'block';
 }

HTML do Formulário

 <div class="contatocontainer">

 <div id="contato" style="display:none;">

 <h5 align="center">ENVIE SUA MENSAGEM</h5>

 <form align="center" >

 <ul>
 <li>
 <input type="text" name="name" id="name" placeholder="Seu Nome"/>
 </li>
 <li>
 <input type="text" name="assunto" id="assunto" placeholder="Assunto"/>
 </li>
 <li>
 <input type="text" name="email" id="email" placeholder="email"
 </li>

 <li>
 <textarea name="mensagem" id="mensagem" placeholder="Mensagem"></textarea>
 </li>

 <button type="enviar" id="enviar" value="Enviar" />ENVIAR</button>

 </ul>

 </form>

 </div>

 <a href="#" onclick="toggle_visibility('contato');">ESCONDER</a>

 </div>

 <!-- FIM DO FORMULARIO DE CONTATO -->

CSS do Formulario

/ Formulario de Contato /

.contatocontainer{
 position:absolute;
 float:right;
 right:0;
 z-index: 103;
 top:120%;
}
#contato{
 float:right;
 background:black;

}

#contato form{

 float:right;
 margin-right:7%;

}

#contato h5{

 color:white;
 right:0;
}

#contato li{

 padding-bottom:5% ;
 list-style: none;
 width:100%;
 max-width: 100%;

}

#contato input{

 background:#ababab;
 border-bottom:#ababab;
 border-left: #ababab;
 border-right: #ababab;
 padding:1%;
 font-family: 'Times new roman';
}

#mensagem{
 width:12em;
 max-width:12em;
 height:5.8em;
 max-height:12em;
 background:#ababab;
 border-bottom:#ababab;
 border-left: #ababab;
 border-right: #ababab;
 padding:1%;
 min-width: 12em;
}

#enviar {
 width:100%;
 height:2em;
 background:red;
 color: white;
 border-bottom:red;
 border-top:red;
 border-right:red;
 border-left:red;
 font-family: 'Times new roman';
}

::-webkit-input-placeholder {

 color: #606060;
}

:-moz-placeholder { / Firefox 18- /

 color: #606060;
}

::-moz-placeholder { / Firefox 19+ /

 color: #606060;
}

:-ms-input-placeholder {

 color: #606060;
}

/ Fim do Formulario /

(Caso necessário) HTML Completo do Site

<!DOCTYPE html>

<html lang="en" align="center">

 <head>

 <link rel="stylesheet" type="text/css" href="main.css"/>

 <script type="text/javascript" src="contato.js"></script>

 <meta charset="utf-8">
 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
 Remove this if you use the .htaccess -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>Global Utopia</title>
 <meta name="description" content="">
 <meta name="author" content="Leandro">
 <meta name="viewport" content="width=device-width; initial-scale=1.0">
 <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">

 </head>

 <body align="center">

 <!-- FORMULARIO DE CONTATO -->

 <div class="contatocontainer">

 <div id="contato" style="display:none;">

 <h5 align="center">ENVIE SUA MENSAGEM</h5>

 <form align="center" >

 <ul>
 <li>
 <input type="text" name="name" id="name" placeholder="Seu Nome"/>
 </li>
 <li>
 <input type="text" name="assunto" id="assunto" placeholder="Assunto"/>
 </li>
 <li>
 <input type="text" name="email" id="email" placeholder="email"
 </li>

 <li>
 <textarea name="mensagem" id="mensagem" placeholder="Mensagem"></textarea>
 </li>

 <button type="enviar" id="enviar" value="Enviar" />ENVIAR</button>

 </ul>

 </form>

 </div>

 <a href="#" onclick="toggle_visibility('contato');">ESCONDER</a>

 </div>

 <!-- FIM DO FORMULARIO DE CONTATO -->

 <div class="toptudo" >

 <figure id="logo">
 <img align="left" src="imagens/logo.png" />
 </figure>

 <figure class="menu" align="right">

 <a><img align="right" src="imagens/blog.jpg"/> </a>

 <a><img align="right" src="imagens/diversao.jpg"/></a>

 <a href="index.html" ><img align="right" src="imagens/inicio.jpg"/></a>

 </figure>

 </div>

 <figure>

 <img class="banner" src="imagens/background.jpg" />

 </figure>

 <!-- conteudo -->

 <div class="website" >

 <div class="conteudo" align="center">

 <h1><img class="imgcruz" src="imagens/cruz.gif"/>CURSO DE CHINÊS GLOBAL UTOPIA</h1>

 <img class="img1" src="imagens/rosto.gif" />

 <p > Curso fundado por Ding Huaying, Pós Graduada em Psicologia. Já trabalhou como tradutora, e ensina a crianças e adultos desde 2011.
 </p>
 <p >
 Antes do curso ser aberto, haviam muitos pedidos para aulas particulares, mas era difícil encontrar um lugar adequado. Além de alunos brasileiros, muitos chineses estavam precisando de aulas de Português. Com a criação do local adequado foi possível ensinar em turmas, assim os alunos que não preferissem aula particular poderiam aprender mandarim de forma mais econômica. O método de aula particular foi mantido, visto que alguns alunos ainda preferem um ambiente mais tranquilo e de receber atenção especial.</p>

 </div>

 <div class="info">

 <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3917.7125920875337!2d-37.05362946399698!3d-10.90943339253919!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x71ab36e347adcc3%3A0x907ead4355579907!2sR.+Geru%2C+480+-+Centro%2C+Aracaju+-+SE%2C+49010-460!5e0!3m2!1sen!2sbr!4v1462421880496" frameborder="0" style="border:0" allowfullscreen ></iframe>
 </div>

 <footer class="footer" >
 <span >© Criado e Ilustrado por: <a href="[https://www.leandrodiassis.co.nf](https://www.leandrodiassis.co.nf)" target="_blank">Leandro di Assis.</a></span>
 </footer>

 </div>

 </body>

</html>

(Caso Necessario) CSS Completo do Site

html,body{

 font-family: Georgia, serif; background:#f6f6f6;
 height:auto;
 margin:0;
 padding:0;

}
.menu{

 height:auto;
 width:100%;
 right: 5%;
 margin-top:3.7%;
}

.menu img{

 height:auto;
 max-width: 100%;
 padding-right:2%;
 position:relative;

}

}
#logo{
 position:relative;
 float:left;
 left:0%;
 height:auto;
 width:100%;
 max-width:100%;

}

#logo img {

 position:relative;
 height:95%;
 width:7%;
 height:auto;
}
.toptudo{
 position:fixed;
 top:0%;
 right:0%;
 left:0%;
 background:#f6f6f6;
 width:100%;
 z-index:102;
 height:auto;

}

.website{
 position:relative;
 z-index:101;
 background:#f6f6f6;
 margin-top:50%;
 max-width:auto;

}
.banner{
 position:fixed;
 width:100%;
 right:0%;
 top:9%;
 margin-bottom: auto;
 margin-top:auto;
 max-width: 100 ;
 height:auto;

}

/ Formulario de Contato /

.contatocontainer{
 position:absolute;
 float:right;
 right:0;
 z-index: 103;
 top:120%;
}
#contato{
 float:right;
 background:black;

}

#contato form{

 float:right;
 margin-right:7%;

}

#contato h5{

 color:white;
 right:0;
}

#contato li{

 padding-bottom:5% ;
 list-style: none;
 width:100%;
 max-width: 100%;

}

#contato input{

 background:#ababab;
 border-bottom:#ababab;
 border-left: #ababab;
 border-right: #ababab;
 padding:1%;
 font-family: 'Times new roman';
}

#mensagem{
 width:12em;
 max-width:12em;
 height:5.8em;
 max-height:12em;
 background:#ababab;
 border-bottom:#ababab;
 border-left: #ababab;
 border-right: #ababab;
 padding:1%;
 min-width: 12em;
}

#enviar {
 width:100%;
 height:2em;
 background:red;
 color: white;
 border-bottom:red;
 border-top:red;
 border-right:red;
 border-left:red;
 font-family: 'Times new roman';
}

::-webkit-input-placeholder {

 color: #606060;
}

:-moz-placeholder { / Firefox 18- /

 color: #606060;
}

::-moz-placeholder { / Firefox 19+ /

 color: #606060;
}

:-ms-input-placeholder {

 color: #606060;
}

/ Fim do Formulario /

.img1 {
 position:absolute;
 bottom:65%;
 left:1%;
 max-width:20%;
 z-index:103;
 margin-left:auto;

}

.imgcruz {

 margin-right:0.3%;

}

.info{
 position:relative;

 margin-top:5%;
 max-height: 100%;
 max-width: 100%;
 height:100%;
 width:auto;
 z-index: 103;

}
.endereco{
 position:relative;
 color:white;
 top:50%;
 display:block;
 margin:auto;
}
.map{

 width:100%;
 height:auto;

}
#facebook{

 width:0%;
 margin-right:0%;
 bottom:0%;
}
#blogger{

 width:0%;
 bottom:0%;
}

.conteudo{

 width:auto;
 height:100%;
 padding-top:2%;
}

.conteudo p{

 width:60%;

}

.conteudo h1{

 width:60%;
}

/ FORMULARIO /

.formulario {
 margin:auto;
 width:35%;
 height:100%;
 max-height:100%;
 max-width: 35%;
}

.input_text {

 font-family: 'times new roman';
 width:100%;
 height:100%;
 max-width:100%;
 max-height: 100%;

}
#form{

 display:block;
 width:50%;
 max-width: 50%;
 margin-bottom: 2%;

}

.labelmessage{
 display:block;
 width:50%;
 max-width: 50%;
 margin-bottom: 2%;

}

/ FIM DO FORMULARIO /

.footer{
 text-align: left;
 font-family: times new roman;
 font-size:14px;
 background:#f9f9f9;
 margin-top:1%;

}
.footer{
 z-index:103;
}

.footer span{

 margin-left:1%;

}

::-webkit-input-placeholder {

 font:12px verdana,arial,sans-serif;

}

:-moz-placeholder {

 font:12px verdana,arial,sans-serif;

}

}

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...