Ver Mensaje Individual
  #41 (permalink)  
Antiguo 09/03/2008, 16:48
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Vuelvo a retomar el tema porque necesito ayuda.

Os acordáis que tenia este código para la barra de login?

Código HTML:
			<div id="nav_login"> <!-- Barra de login y busqueda -->
				<form name="formLogin" method="post" action="login.php">
					<ul class="loginBox">
						<li><a id="registroBtn" href="http://localhost/weblocal/registro.php" target="_top">Regístrate Gratis!</a></li>
						<li><input id="user" type="text" name="user" tabindex="1" onblur="if(this.value=='') this.value='Usuario';" onfocus="if(this.value=='Usuario') this.value='';" value="Usuario"/></li>
						<li><input id="passw1" type="text" name="pass2" tabindex="2" style="display: inline;" value="Contraseña" onfocus="this.style.display = 'none'; document.formLogin.pass.style.display = 'inline'; document.formLogin.pass.focus();" /></li>
						<li><input id="passw2" type="password" name="pass" tabindex="2" style="display: none;" onblur="if(this.value == '') {this.style.display = 'none'; document.formLogin.pass2.style.display = 'inline';}" /></li>
						<li><a id="entrarBtn" href="http://localhost/weblocal/entrar.php">Entrar</a></li>
						<ul id="passwordBtn">
							<li><input type="checkbox" id="recordar" tabindex="3" name="recordar" /><label for="recordar">Recordar contrase&ntilde;a</label></li>
							<li><a href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>
						</ul>
						<li><input id="buscar" type="text" name="buscar" tabindex="4" onblur="if(this.value=='') this.value='Busca en ME';" onfocus="if(this.value=='Busca en ME') this.value='';" value="Busca en ME"/></li>
						<li><a id="buscarBtn" href="http://localhost/weblocal/entrar.php">Buscar</a></li>
					</ul>	
				</form>
			</div> <!-- end #nav_login --> 
Pues resulta que no puedo meter todo en un solo formulario, ya que por un lado esta el apartado de login y por otro la caja de busqueda.

Por lo tanto necesito 2 formularios, pues bien, al separar las dos estructuras, la de la caja de búsqueda no me queda donde antes, a la derecha del todo.

La parte del login, la he conseguido situar, pero me falta ajustar la caja de busqueda a ver si me podéis echar una mano.

El codigo es el siguiente...

Código HTML:
			<div id="nav_login"> <!-- Barra de login y busqueda -->
				<form name="formLogin" method="post" action="login.php">
					<ul class="loginBox">
						<li><a id="registroBtn" href="http://localhost/weblocal/registro.php" target="_top">Regístrate Gratis!</a></li>
						<li><input id="user" type="text" name="user" tabindex="1" onblur="if(this.value=='') this.value='Usuario';" onfocus="if(this.value=='Usuario') this.value='';" value="Usuario"/></li>
						<li><input id="passw1" type="text" name="pass2" tabindex="2" style="display: inline;" value="Contraseña" onfocus="this.style.display = 'none'; document.formLogin.pass.style.display = 'inline'; document.formLogin.pass.focus();" /></li>
						<li><input id="passw2" type="password" name="pass" tabindex="2" style="display: none;" onblur="if(this.value == '') {this.style.display = 'none'; document.formLogin.pass2.style.display = 'inline';}" /></li>
						<!--<li><a id="entrarBtn" href="http://localhost/weblocal/entrar.php">Entrar</a></li>-->
						<li><input id="entrarBtn" name="entrar" value="Entrar" type="submit"/></li>
						<ul id="passwordBtn">
							<li><input type="checkbox" id="recordar" tabindex="3" name="recordar" /><label for="recordar">Recordar contrase&ntilde;a</label></li>
							<li><a href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>
						</ul>
					</ul>
				</form>
				<form name="formBuscar" method="post" action="buscar.php">
					<ul id="search">
						<li><input id="buscar" type="text" name="buscar" tabindex="4" onblur="if(this.value=='') this.value='Busca en ME';" onfocus="if(this.value=='Busca en ME') this.value='';" value="Busca en ME"/></li>
						<!--<li><a id="buscarBtn" href="http://localhost/weblocal/entrar.php">Buscar</a></li>-->
						<li><input id="buscarBtn" name="buscar" value="Buscar" type="submit"/></li>
					</ul>	
				</form>
			</div> <!-- end #nav_login --> 
Y el CSS

Código HTML:
/** 	BUSCADOR 	**/

#search{
margin-top:0px;
margin-left:50px;
display:inline;
}
a#buscarBtn{
color:#333333;
margin:10px 15px 5px 10px;
}
a:hover#buscarBtn{
color:red;
}

/** 	FORMULARIO DE LOGIN 	**/
input#user,#buscar,#passw1,#passw2{
font-family:Arial, Helvetica, sans-serif;
color:#333333;
background:#FBFCFC url(../imagenes/formularios/input-bgr.png) no-repeat scroll left top;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:13px;
width:100px;
font-size:12px;
padding:2px 5px 6px 10px;
margin:7px 5px 5px 5px;
}

.loginBox * {display:block; float:left; margin-left:0.5px;}

/* Boton de Registrate Gratis */
a#registroBtn{
margin:1px 30px 5px 5px;
width:50px;
text-align:center;
font-size:12px;
}
a:hover#registroBtn{
color:#999999;
margin:3px 30px 5px 5px;
width:50px;
text-align:center;
}

/* Boton Logearse */
input#entrarBtn {
color:red;
margin:10px 15px 5px 10px;

}
a:hover#entrarBtn {
/*background:transparent url(../imagenes/formularios/button.png) repeat-x scroll right top;*/
color:blue;
}

/* Casilla y recordar password */
ul#passwordBtn { width: 130px; margin-left:0px; margin-top:5px; font-size:10px; } 
ul#passwordBtn a {} 
ul#passwordBtn a:hover{ color: red;}  
ul#passwordBtn * { display:inline !important; float: none !important; margin-left: 0 !important; margin-top:-3px !important;}

input#recordar {
	vertical-align: middle;
	margin-right:5px;
	}

Gracias de antemano!