Que tal, bueno escribo para pedir su ayuda ya que tengo un proyecto web y el tengo un formulario oculto el cual al dar click en un boton, se desliza de la parte superior de la pagina, lo que pasa es que devido a las propiedades css position, antes de que se deslize del todo, ya muestra algunos divs y da mal aspecto, asi que mi pregunta es si existe una regla css.. o alguna forma de solucionarlo?
html:
Código HTML:
<body>
<div id="contenedor" class="limpiar">
<div id="header" class="limpiar">
<!-- Inicia el form Oculto-->
<div id="formOculto" class="limpiar">
<div id="contenidoCajafo">
<h1>Bienvenido a <strong>HomelesZ</strong></h1>
<p>La web que te entiende!</p>
<p>Aun no eres un <b>Homelesz?</b> Pues que esperas <b><a href="registro.php">Registrate!</a></b></p>
</div>
<div id="loginBox">
<label for="nick">HomelesZ id:</label><br/>
<input type="text" name="nick" id="nick" /><br/>
<label for="passwd">Password:</label><br/>
<input type="password" name="passwd" id="passwd" /><br/>
<button type="button" id="entrar">Entrar!</button>
</div>
<div id="quienesSomos">
<p><a href="somos.php">Quienes Somos?-</a></p>
</div>
</div>
<!-- Termina el Form Oculto -->
<!-- Inicia el toolbar-->
<div id="toolbar">
<div id="banner">
<p><img id="banner1" src="img/logo.png" alt="HomelesZ" title="Home"/></p>
</div>
<div id="funciones">
<ul>
<li id="registrar"><p>Unete a los HomelesZ</p></li>
<p id="separador">|</p>
<li id="logear"><p>Entrar</p></li>
</ul>
</div>
</div>
<!-- Termina el Toolbar-->
</div>
<div id="contenido">
</div>
<div id="footer">
</div>
</div> el css:
Código:
#contenedor{
position:relative;
width:100%;
}
#formOculto{
display:none;
background:#1e1e1e;
height:200px;
}
#contenidoCajafo{
margin:15px;
float:left;
text-align:center;
}
#contenidoCajafo h1{
text-align:center;
color:#ad0d0d;
font-size:36px;
font-weight:bold;
font-family:Geneva, sans-serif;
}
#contenidoCajafo p{
margin:15px;
font-size:20px;
text-align:right;
color:#cdd3e9;
}
#contenidoCajafo a{
text-decoration:none;
}
#loginBox{
position:absolute;
left:70%;
color:#cdd3e9;
font-weight:bold;
font-size:17px;
margin-top:25px;
padding:10px;
float:left;
text-align:center;
width:200px;
border: 3px solid #ad0d0d;
border-radius: 0px 0px 15px 15px;
}
#quienesSomos{
position:absolute;
top:165px;
left:20%;
font-size:20px;
color:#BD1311;
}
#quienesSomos a{
color:#BD1311;
text-decoration:underline;
}
#toolbar{
height:50px;
background:#ad0d0d;
border-bottom:3px solid #000;
}
#banner{
margin:5px;
margin-left:25px;
float:left;
}
#funciones{
float:left;
position:absolute;
left:70%;
}
#funciones li{
padding:5px;
font-size:18px;
font-weight:bold;
float:left;
margin:5px;
margin-top:10px;
border:1px solid #000;
color:#cdd3e9;
border-radius:3px;
background:#1e1e1e;
}
#separador{
float:left;
margin:5px;
margin-top:12px;
background:none;
border:none;
color:#000;
font-size:25px;
}
y el Js:
Código PHP:
var todo = $(document);
todo.ready(function hoverBanner() {
var banner = $("#banner1").hover(function entra(){
banner.attr("src","img/logoHover.png");
banner.css("cursor","pointer");
},function sale(){
banner.attr("src","img/logo.png");
})
});
todo.ready(function clickLogo() {
var banner = $("#banner1").click(function redirige(){
$(location).attr("href","index.html");
});
});
todo.ready(function hoverBtn() {
var btn = $("#funciones li").hover(function entra(){
btn = $(this);
btn.css("color","#1E1E1E");
btn.css("background","#CDD3E9");
btn.css("cursor","pointer");
},function sale(){
btn.css("color","#CDD3E9");
btn.css("background","#1E1E1E");
});
});
todo.ready(function clickRegistro() {
var btn = $("#registrar").click(function clickBtn(){
$(location).attr("href","registro.php");
});
});
todo.ready(function clickLogin(){
var btn = $("#logear").click(function mostrarOculto(){
var oculto = $("#formOculto").slideToggle("fast");
});
});
dede ya un saludo y gracias ;)