Barra de login con css

hades87 · #31 (**permalink**) 03/03/2008, 17:18

y si miras de poner el check en un li y el texto de recordar contraseña en otro?

neodani · #32 (**permalink**) 03/03/2008, 17:26

Cita:

Iniciado por hades87

y si miras de poner el check en un li y el texto de recordar contraseña en otro?

Hace lo mismo

hades87 · #33 (**permalink**) 03/03/2008, 17:31

y si haces qeu el check box sea parte de la primera ul y no de la segunda?

PD: madre de dios ya vamos por la segunda página xD

neodani · #34 (**permalink**) 03/03/2008, 17:45

Cita:

Iniciado por hades87

y si haces qeu el check box sea parte de la primera ul y no de la segunda?

PD: madre de dios ya vamos por la segunda página xD

Mejorando parece.... lo que pasa es que ahora me queda super retirado

Boton Entrar ---------------------------- [ ] ---------------------- Recordar password

He reducido todo el margin y padding derecho del boton entrar, pero la distancia hasta la casilla es larga.

Y lo mismo con el texto recordar password, no tiene margen izq ni padding, sin embargo también esta separado.

PD: Me voy a la cama, que mañana madrugo

A ver si alguien da con la solución!

Mil gracias

hades87 · #35 (**permalink**) 03/03/2008, 17:47

yo le daria mas margin al check o mas padding para que quede pegado a la derecha

cleft · #36 (**permalink**) 03/03/2008, 19:31

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.

neodani · #37 (**permalink**) 03/03/2008, 23:49

Cita:

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

hades87 · #38 (**permalink**) 04/03/2008, 02:18

muy gran aporte cleft, lo tomaré en cuneta apra futuros proyectos ^^.

neodani, mira la validación de xhtml, que te peta por varios sitios la web.

cleft · #39 (**permalink**) 04/03/2008, 11:27

Luce bien. Para que el checkbox quede centrado verticalmente en relacion al <label>, basta con agregar la siguiente regla:

Código:

input#recordar {
	vertical-align: middle;
	}

Ahora solo es de revisar y corregir tu XHTML, asi como lo dicho por hades87. Note que le definiste IDs a los <input> pero recuerda no repetirlos, cosa que has hecho con el ID "passw".

Por lo demas, espero te vaya bien en tu proyecto.

neodani · #40 (**permalink**) 04/03/2008, 12:54

Cita:

Iniciado por cleft

Luce bien. Para que el checkbox quede centrado verticalmente en relacion al <label>, basta con agregar la siguiente regla:

Código:

input#recordar {
	vertical-align: middle;
	}

Ahora solo es de revisar y corregir tu XHTML, asi como lo dicho por hades87. Note que le definiste IDs a los <input> pero recuerda no repetirlos, cosa que has hecho con el ID "passw".

Por lo demas, espero te vaya bien en tu proyecto.

Okis, gracias de nuevo, retocado

La nueva version esta en registro_login.php

Ahora quiero hacer el formulario de registro, ya tengo todo el proceso que hay detras php, pero me falta la parte css para situar todos los campos ahi...

Además el formulario contiene varios campos y he pensado hacer varias paginas... tipo PASO 1, PASO 2, PASO 3... a ver como me las apaño

neodani · #41 (**permalink**) 09/03/2008, 16:48

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!

hades87 · #42 (**permalink**) 09/03/2008, 18:37

y si las cajas les das el msimo formato de antes? o le pone un margin-right:o?

neodani · #43 (**permalink**) 10/03/2008, 00:45

Cita:

Iniciado por hades87

y si las cajas les das el msimo formato de antes? o le pone un margin-right:o?

No tira con el margin-right: 0

Y no se a lo que te refieres con el mismo formato que antes?

Esta practicamente igual, lo unico que he cambiado ha sido 4 cosas ya que al poner el formulario hasta la parte de login, le he tenido que añadir el boton submit.

Saludos!