Barra de login con css

[neodani]

Iniciado por cleft

Bueno, creo que es necesario hacer una pausa en todo esto.

Al parecer, se ha olvidado uno de los principales aspectos a tomar: la semantica.
En si, la solucion no puede ser poner el checkbox en una lista aparte, o crear capas distintas para los elementos o cosas asi.
Nada mas mira como luce el form actualmente:



Asi que, para volver a las "raices", pon el checkbox en la misma linea que el texto que le da significado. Aqui podrias utilizar la etiqueta <label> para eso.

Código:

<li>
<input type="checkbox" id="recordar" name="recordar" /><label for="recordar">Recordar contrase&ntilde;a</label>
</li>

Dos de los beneficios del uso de <label> son:
Los lectores de pantalla leeran propiamente cada control del formulario. (notese la relacion entre el "id, name" del input, con el "for" del label).
Ademas, creara una larga area clicable para el control, haciendolo mas facil de interactuar.
(Lo anterior tomado de "Web Standards Solutions" de Dan Cederholm)

Seguidamente, si el resultado obtenido no es el deseado, entonces es donde entra la parte de darle el estilo, mediante CSS. Ya el input trae su propio ID del cual te puedes valer.

Recuerda, tu puedes tener estilos que estan siendo heredados y te afectan. Por ejemplo, tienes una regla para todos los elementos <input>, y ya con eso, tu checkbox se comporta en base a dichas reglas:

Código:

.loginBox input{
...
height:15px;
width:120px;
...
padding:5px 5px 5px 10px;
margin:10px 5px 5px 5px;
}

Ya con lo anterior, es 'normal' que el checkbox se muestre tan separado de tu texto.
Prueba quitando lo anterior un momento como prueba, y veras que tu checkbox se comporta como debe ser.

Solucion: creale reglas a tu checkbox en base a su ID (recordar) que no solo sobreescriban esas reglas anteriores, si no, que ademas genere el resultado deseado.
O mejor aun, define IDs para los inputs de name y password, y le aplicas la regla anterior, solo a esos y cualquier otro elemento que desees. (En otras palabras: no generalices definiendo reglas para todos los input).

Consejo: Si comienzas a sentir que tu estructura actual (basada en <ul>) te comienza a parecer compleja para lo que se busca, lo mejor es "reestructurar" utilizando otras posibilidades.
Sin embargo, en este caso, el mayor problema se esta debiendo mas que todo por el hecho de crear reglas generalizadas en tu CSS. Debes buscar la forma de seccionarlas, para no tener problemas que te afecten cuando ingreses mas elementos.

Y como siempre, no dudes en hacer consultas, que todos hemos aprendido mucho de esa forma.

Perfecto cleft era eso.

Estaba heredando todo lo relacionado con el input!

Entonces lo he separado y le he añadido identificadores como has dicho, mira...

Código HTML:

	<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='Nombre de Usuario';" onfocus="if(this.value=='Nombre de Usuario') this.value='';" value="Nombre de Usuario"/></li>
			<li><input id="passw" 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="passw" 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" 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> 

CSS

Código HTML:

/* FORMULARIO DE LOGIN */
input#user,#buscar,#passw{
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:15px;
width:120px;
font-size:12px;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 5px;
}
.loginBox * {display:block; float:left; margin-left:0.5px;}

a#registroBtn{
color:black;
margin:3px 30px 5px 5px;
width:50px;
text-align:center;
text-decoration:none;
}
a:hover#registroBtn{
color:#999999;
margin:3px 30px 5px 5px;
width:50px;
text-align:center;
text-decoration:none;
}

li#casilla{
margin:0;
padding:0;
}

a#entrarBtn {
color:red;
margin:15px 15px 5px 10px;
text-decoration:none;
}
a:hover#entrarBtn {
/*background:transparent url(../imagenes/formularios/button.png) repeat-x scroll right top;*/
color:blue;
text-decoration:none;
}

ul#passwordBtn { width: 130px; margin-right:140px; margin-left:0px; margin-top:10px; font-size:10px; } 
ul#passwordBtn a { color: black; text-decoration:none; } 
ul#passwordBtn a:hover{ color: red; text-decoration:none; } 
ul#passwordBtn * { display:inline !important; float: none !important; margin-left: 0 !important; }

/* BUSCADOR */

a#buscarBtn{
color:#333333;
margin:15px 15px 5px 10px;
text-decoration:none;
}
a:hover#buscarBtn{
color:red;
text-decoration:none;
}

Ves algo que no debería estar asi, te gusta la estructura css que he empleado? puedes verlo online desde aqui

Un saludo y gracias, asi da gusto