Jump to content

[Resolvido] Problema com margens


alexmestre
 Share

Recommended Posts

ola bom dia

tenho um problema aqui com um margin que nao estou a entender o que tenho que fazer,

é assim tenho um cabeçalho que clicanco sobre o login desce uma area para se efectuar,

e por baixo tenho o conteudo do site o logotipo e isso.

o que queria era que quando eu clica-se sobre o "login" ele me desce-se a area e o resto do templete tbm desce-se para o formulario nao ficar sobre o login

do template

#tudo {
background-color: #4b4239;
width: 70%;
margin-left: 15%;
margin-top: 30px;
border-radius: 50px;
}

da area que aparece

#log_reg {
display:none;
width: 100%;
height: 45px;
margin-top: 0px;
background-color:#039;
position:fixed;
display:none;
}
Link to comment
Share on other sites

o meu problema é que a barra azul se subrepoe ao castanho

ou seja a barrinha fica por cima do tudo

e o que queria é que o tudo desces se quando a barra aparece se, ela so aparece quando clico em login

Link to comment
Share on other sites

ola boa noite é assim o meu problema

https://uploaddeimagens.com.br/imagens/sem_titulo-png--12876

e o que quero e que a barra azul escura quando desca que nao caia em cima do castanho que mantenha a mesma margem que tem quando ta enconhida

<div id="barrinha">
 <div id="log_reg">
<div id="formulario">
<form name="form1" id="form1" action="" method="post">
  <fieldset>	  
	<label> <span>Nickname:</span>
	 <input type="text" name="nickname" id="nickname" />
	</label>
	<label> <span>Password: </span>
	 <input type="password" id="password" name="password" />
	</label>

	<input type="submit" value="login" id="login" name="login" class="send"/>
  </fieldset>
</form>
</div>
 </div>
</div>
<div id="tudo">
blablablabla</div


#barrinha {
background-color: #039;
height: 5px;
width: 100%;
margin-top: 0px;
position:absolute;
float:left;
}

#log_reg{
width: 100%;
margin-top: 0px;
background-color:#039;
}

#tudo {
background-color: #4b4239;
width: 70%;
margin-left: 15%;
margin-top: 30px;
border-radius: 50px;
}



Link to comment
Share on other sites

já consegui resolver

tive de fazer assim

var visivel = false;
function mostrarOculto1(){
var objDiv1 = document.getElementById('log_reg');
var objDiv2 = document.getElementById('tudo'); 
  if (visivel == false){
    objDiv1.style.display = "block";
 objDiv1.style.zIndex =1000;
 objDiv1.style.position = "fixed";
 objDiv2.style.marginTop ="75px";
    visivel = true; 
  }else{
	  objDiv1.style.display = "none";
   objDiv2.style.marginTop ="30px";
	  visivel = false;			 
}
}

tive de acrescentar a linha objDiv2.style.marginTop ="75px"; para me add mais 40px para a pagina descer quando clicarem sobre o botao

Link to comment
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
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.