Foros del Web » Creando para Internet » CSS »

Barra de login con css

Estas en el tema de Barra de login con css en el foro de CSS en Foros del Web. y si miras de poner el check en un li y el texto de recordar contraseña en otro?...

  #31 (permalink)  
Antiguo 03/03/2008, 17:18
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Barra de login con css

y si miras de poner el check en un li y el texto de recordar contraseña en otro?
__________________
No diseñes usando tablas.
  #32 (permalink)  
Antiguo 03/03/2008, 17:26
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
y si miras de poner el check en un li y el texto de recordar contraseña en otro?
Hace lo mismo
  #33 (permalink)  
Antiguo 03/03/2008, 17:31
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Barra de login con css

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
__________________
No diseñes usando tablas.
  #34 (permalink)  
Antiguo 03/03/2008, 17:45
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
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

Última edición por neodani; 19/03/2008 a las 14:12
  #35 (permalink)  
Antiguo 03/03/2008, 17:47
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Barra de login con css

yo le daria mas margin al check o mas padding para que quede pegado a la derecha
__________________
No diseñes usando tablas.
  #36 (permalink)  
Antiguo 03/03/2008, 19:31
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Barra de login con css

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.
  #37 (permalink)  
Antiguo 03/03/2008, 23:49
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por cleft Ver Mensaje
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

Última edición por neodani; 19/03/2008 a las 14:12
  #38 (permalink)  
Antiguo 04/03/2008, 02:18
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Barra de login con css

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.
__________________
No diseñes usando tablas.
  #39 (permalink)  
Antiguo 04/03/2008, 11:27
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Barra de login con css

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.
  #40 (permalink)  
Antiguo 04/03/2008, 12:54
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por cleft Ver Mensaje
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
  #41 (permalink)  
Antiguo 09/03/2008, 17:48
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
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!
  #42 (permalink)  
Antiguo 09/03/2008, 19:37
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Barra de login con css

y si las cajas les das el msimo formato de antes? o le pone un margin-right:o?
__________________
No diseñes usando tablas.
  #43 (permalink)  
Antiguo 10/03/2008, 01:45
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:22.