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. Buenas compis, Estoy haciendo una barra de login, donde el usuario te autentifica. Esta barra es horizontal y contiene todo esto.... Registrate! | input user ...

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

Buenas compis,

Estoy haciendo una barra de login, donde el usuario te autentifica.

Esta barra es horizontal y contiene todo esto....

Registrate! | input user | input pass | entrar | ¿olvidaste tu contraseña? | input search | buscar

Pues bien... todo esto queda bien, pero quisiera añadir la casilla "recordar contraseña" encima del texto ¿olvidaste tu contraseña?

Y no se como situarla ahi arriba.

Para hacer toda la barra he utilizado una lista <ul> y cada elemento con <li>

Como lo pongo???

Muchas gracias !!
  #2 (permalink)  
Antiguo 02/03/2008, 17:37
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Re: Barra de login con css

si pones el código del menú será mas fácil, aún que creo que si le añades otro li al final lo podrías hacer
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 03/03/2008, 00:33
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
si pones el código del menú será mas fácil, aún que creo que si le añades otro li al final lo podrías hacer
Aqui esta el codigo...

Que modificariais??
Código HTML:
	<div id="nav_login"> <!-- Barra de login y busqueda -->
			
					<form name="formLogin" method="post" action="login.php">
					
					<ul class="loginBox">
						<li id="registroBtn"><a class="registro_gratis" href="http://localhost/weblocal/registro.php" target="_top">Regístrate Gratis!</a></li>
						
						<li><input 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 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 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 id="entrarBtn"><a href="http://localhost/weblocal/entrar.php">Entrar</a></li>
						<li id="recuperarBtn"><a href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>
					
						
						<li id="cajabusqueda"><input type="text" name="buscar" tabindex="4" onblur="if(this.value=='') this.value='Buscar';" onfocus="if(this.value=='Buscar') this.value='';" value="Buscar"/></li>
						<li id="buscarBtn"><a href="http://localhost/weblocal/entrar.php">Buscar</a></li>
					
					</ul>	
						
					</form>
				

			</div> <!-- end #nav_login --> 
  #4 (permalink)  
Antiguo 03/03/2008, 02:19
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Re: Barra de login con css

le añadiria un li mas al final de todo, y te aconsejo que mires como ahcer menus con css, por que noe s necesario darle una clase a cada li
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 03/03/2008, 05:42
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
le añadiria un li mas al final de todo, y te aconsejo que mires como ahcer menus con css, por que noe s necesario darle una clase a cada li
Pero yo no quiero que ese <li> este en linea como todos los demas, sino que este encima del texto ¿olvidaste tu contraseña?

Y a que te refieres hacer menus en css? nos la mejor opcion para alinear todos los elementos en la barra login? xD
  #6 (permalink)  
Antiguo 03/03/2008, 05:46
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Lo ideal seria utilizar algo asi no?

Código HTML:
#navi {  
	list-style:none;
	margin:0;
	padding:0;
}
#navi li {
	margin:2px;
	padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes.
	float:left;
}
#navi li a {
	display:block; //Convertimos el vínculo en un bloque.
	width:100px;
	padding:4px 0;
	text-decoration:none;
	text-align:center;
	font-size:11px;
	color:#FFFFFF;
	background-color:#000000;
}
//Ahora vamos con el hover:
#navi li a:hover {
	color:#99CC00;
	background-color:#003366;
}
El problema es que quiero que cada boton sea diferente, pues tienen tamaños y colores diferentes.

Puedes explicarte un poco más a que te refieres, gracias tiu
  #7 (permalink)  
Antiguo 03/03/2008, 05:46
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Re: Barra de login con css

me refiero a que tu das un id a cada li, con lo que un buen menú hecho con listas no es necesario definir lo 1 a 1, si pones una url de la página o el código te ayudaremos mejor.

mirate esto: http://www.cristalab.com/tutoriales/...-usando-listas

PD: creo que sacamos el ejemplo del mismo lado xD, pues si quieres que algún botón sea diferente le das un id diferente.

Y para poner encima del menú crea un div no? o podrías hacer menús anidados.
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 03/03/2008, 07:21
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
me refiero a que tu das un id a cada li, con lo que un buen menú hecho con listas no es necesario definir lo 1 a 1, si pones una url de la página o el código te ayudaremos mejor.

mirate esto: http://www.cristalab.com/tutoriales/...-usando-listas

PD: creo que sacamos el ejemplo del mismo lado xD, pues si quieres que algún botón sea diferente le das un id diferente.

Y para poner encima del menú crea un div no? o podrías hacer menús anidados.
Jejeje pues si, lo saqué de ahi.

Entonces me miraré este

Código HTML:
ul {  
	list-style:none;
	margin:0;
	padding:0;
}
ul li {
	padding:0;
	float:left;

ul li a {
	display:block;
	width:121px;
	height:50px;  //Quito el padding, pero le pongo altura.
	text-decoration:none;
}
ul li a:hover {
	background-position:bottom;
}
ul li a span {
	display:none; //Oculto el texto.
}
#inicio {
	background-image:url(images/inicio.png);
}
#acerca {
	background-image:url(images/acerca.png);
}
#contacto {
	background-image:url(images/contacto.png);
}
Pero ahora si que me has matado con eso de hacerlo con un menu anidado, no se como meterlo por ahi...

Voy a probar con un div y te cuento
  #9 (permalink)  
Antiguo 03/03/2008, 08:07
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Re: Barra de login con css

bien, si quieres saber como ahcer mensu anidado busca por google un poco y seguro que encuentras cosas
__________________
No diseñes usando tablas.
  #10 (permalink)  
Antiguo 03/03/2008, 08:10
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Bufff no me aclaro, si lo pongo en una capa se me descoloca todo, y he intendado quitar los id's de dentro de los <li> pero no me los coje ahora...

Este es codigo

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 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 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 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>
			<div id="recordarBtn">
				<a href="http://localhost/weblocal/recordar_pass.php" target="_top">Recordar Contraseña</a>
			</div>
			<li><a id="recuperarBtn" href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>

			<li><input id="cajabusqueda" 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 --> 

Codigo css

Código HTML:
div#nav_login {
		color: inherit;
		background-color: #CEEF9C;
		border: 1px solid #e5e5e5;
		border-width: 0 2px 2px 0;
		height:50px; /* TAMAÑO MENU */
		margin-top:0px; /* Posicion desde arriba */
		padding-left: 20px;
		margin-bottom: 10px;
		}


/* BUSCADOR */

#cajabusqueda input{
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;
font-size:12px;
display:inline;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 100px;

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

}
#buscarBtn a:hover{
color:red;
text-decoration:none;
}
/* FORMULARIO DE LOGIN */


.loginBox input{
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;
font-size:12px;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 5px;
}
.loginBox * {
display:block;
float:left;
margin-left:0.5px;
}


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


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

/* margen superior 1em,
right margin 2em,
bottom margin 3em,
left margin 4em */

#recordarBtn {
color:black;
text-decoration:none;
font-size:10px;
padding:15px 15px 5px 10px;
float:left;
}

#recuperarBtn a {
color:black;
margin:15px 15px 5px 0px;
text-decoration:none;
font-size:10px;
}
#recuperarBtn a:hover {
/*background:transparent url(../imagenes/formularios/button.png) repeat-x scroll right top;*/
color:#999999;
text-decoration:none;
}

/* 		Fin Barra LOGIN 			*/
Qué cambiariais?

Muchas gracias

PD: Soy yo o el codigo CSS me parece muy largo para tan poco trozo de la web? xD
  #11 (permalink)  
Antiguo 03/03/2008, 08:17
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Re: Barra de login con css

pero a ver pon una imagen de lo que te gustaría que pasara o de lo qe quieres que no me aclaro mucho.
__________________
No diseñes usando tablas.
  #12 (permalink)  
Antiguo 03/03/2008, 08:26
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
pero a ver pon una imagen de lo que te gustaría que pasara o de lo qe quieres que no me aclaro mucho.
A ver si sale la imagen...



Lo que quiero es lo que hay encima de ¿Olvidaste tu contraseña?

Gracias!
  #13 (permalink)  
Antiguo 03/03/2008, 08:40
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Re: Barra de login con css

podrias hacer en ese campo abrir otra ul, con 2 li y luego cerrarla y continuar con la otra.
__________________
No diseñes usando tablas.
  #14 (permalink)  
Antiguo 03/03/2008, 09:04
Avatar de estebanpc  
Fecha de Ingreso: septiembre-2004
Mensajes: 48
Antigüedad: 19 años, 7 meses
Puntos: 0
Re: Barra de login con css

Intenta hacer que en el class de "olvidaste tu contraseña", poner cierto margen de top o aplicando propiedades en el Line Height.
  #15 (permalink)  
Antiguo 03/03/2008, 14:08
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
podrias hacer en ese campo abrir otra ul, con 2 li y luego cerrarla y continuar con la otra.
Que va no hay manera, queda igual al mismo nivel

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 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 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 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="recordarBtn">
				<li><a href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>
				<li><a href="http://localhost/weblocal/recordar_pass.php" target="_top">Recordar Contraseña</a></li>
			</ul>

			<li><input id="cajabusqueda" 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 --> 

CSS
Código HTML:
#recordarBtn a {
color:black;
text-decoration:none;
margin:5px 0px 5px 0px;
width:70px;
font-size:10px;
line-height:10px;
display:block;
}

.loginBox input{
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:18px;
font-size:12px;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 5px;
}

.loginBox * {
display:block;
float:left;
margin-left:0.5px;
}
Qué no lo hago bien?

A ver si entre todos lo sacamos

Un saludo
  #16 (permalink)  
Antiguo 03/03/2008, 14:32
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 16 años, 2 meses
Puntos: 1
Re: Barra de login con css

Bueno, te aconsejo empezar de cero, borrando todo ese estilo que tienes para el #recordarBtn, y nada mas:

- Asignarle un ancho (width) a tu <ul>. Digamos, 150px;

De forma predeterminada, cada elemento de la lista inicia en una nueva linea. No es necesario definirle "display" block" (a menos de que deseas darle ancho y altura a tu elemento <a>

Código:
ul#recordarBtn {
width: 100px;
}
#recordarBtn a {
color: black;
text-decoration:none;
font-size:10px;
}
Bueno, no se si habre entendido bien, pero con lo anterior, deberia salir:

"¿Olvidaste tu contraseña?
Recordar Contraseña"

Tambien puedes utilizar una Lista de Definicion (<dl>).
  #17 (permalink)  
Antiguo 03/03/2008, 14:50
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por cleft Ver Mensaje
Bueno, te aconsejo empezar de cero, borrando todo ese estilo que tienes para el #recordarBtn, y nada mas:

- Asignarle un ancho (width) a tu <ul>. Digamos, 150px;

De forma predeterminada, cada elemento de la lista inicia en una nueva linea. No es necesario definirle "display" block" (a menos de que deseas darle ancho y altura a tu elemento <a>

Código:
ul#recordarBtn {
width: 100px;
}
#recordarBtn a {
color: black;
text-decoration:none;
font-size:10px;
}
Bueno, no se si habre entendido bien, pero con lo anterior, deberia salir:

"¿Olvidaste tu contraseña?
Recordar Contraseña"

Tambien puedes utilizar una Lista de Definicion (<dl>).
Bien... vamos bien por ahi pero no esta del todo, pues mira como me sale

no me deja colgar la imagen ahora ¬¬!!

Pues sale

Recordar
Contraseña

¿Olvidaste tu
Contraseña?

Y me gustaria que saliese

Recordar contraseña
¿Olvidaste tu contraseña?

Quiero que me salga en los lineas horizontales.

He intentado ampliar el width pero si lo amplio demasiado me coloca la otra lista al lado!

Código HTML:
ul#recordarBtn {
width: 100px;
margin-right:10px;
margin-left:20px;
font-size:10px;
text-decoration:none;
}

#recordarBtn a {
color: black;
}
Qué falta?

Última edición por neodani; 03/03/2008 a las 14:57
  #18 (permalink)  
Antiguo 03/03/2008, 14:57
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 16 años, 2 meses
Puntos: 1
Re: Barra de login con css

Dale el width necesario, y declara un "display: block;" para el li.

Código:
ul#recordarBtn li {
display: block;
}
  #19 (permalink)  
Antiguo 03/03/2008, 15:18
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por cleft Ver Mensaje
Dale el width necesario, y declara un "display: block;" para el li.

Código:
ul#recordarBtn li {
display: block;
}
Que va tio, sigue igual

Si le doy mas width lo unico que consigo es tener los dos en fila pero siguen teniendo dos lineas cada uno

Código HTML:
ul#recordarBtn {
width: 200px;
margin-right:10px;
margin-left:20px;
font-size:10px;
text-decoration:none;
}

ul#recordarBtn li {
display: block;
}

#recordarBtn a {
color: black;
}
Arghh!!
  #20 (permalink)  
Antiguo 03/03/2008, 15:24
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 16 años, 2 meses
Puntos: 1
Re: Barra de login con css

Bueno, puedes subir a la Web la pagina como la tienes actualmente para verificar?
Da la sensacion de que tienes algun estilo que este siendo heredado y te afecte.
  #21 (permalink)  
Antiguo 03/03/2008, 15:43
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por cleft Ver Mensaje
Bueno, puedes subir a la Web la pagina como la tienes actualmente para verificar?
Da la sensacion de que tienes algun estilo que este siendo heredado y te afecte.
La he subido a un hosting de pruebas, la dirección es esta


Gracias

Última edición por neodani; 19/03/2008 a las 13:13
  #22 (permalink)  
Antiguo 03/03/2008, 16:02
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 16 años, 2 meses
Puntos: 1
Re: Barra de login con css

Efectivamente, hay una declaracion que te esta afectando. Es un selector universal.
Código:
.loginBox * {
display:block;
float:left;
margin-left:0.5px;
}
Para ello, debes agregar, despues de lo declarado antes, las siguientes lineas, para "sobreescribir" el selector universal anterior. (El !important lo puedes obviar si lo pones despues de las reglas anteriores, pero por cualquier cosa, podria ser util.)
Código:
#recordarBtn * {
display:inline !important;
float: none !important;
margin-left: 0 !important;
}
Con lo anterior, ya puedes quitarle el ancho al <a>
Código:
#recordarBtn a {
...
width:200px;
...
}
Ya con ello, deberian quedarte ambos enlaces en diferentes lineas. Ya queda a tu gusto agregarle mayores estilos.
  #23 (permalink)  
Antiguo 03/03/2008, 16:15
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por cleft Ver Mensaje
Efectivamente, hay una declaracion que te esta afectando. Es un selector universal.
Código:
.loginBox * {
display:block;
float:left;
margin-left:0.5px;
}
Para ello, debes agregar, despues de lo declarado antes, las siguientes lineas, para "sobreescribir" el selector universal anterior. (El !important lo puedes obviar si lo pones despues de las reglas anteriores, pero por cualquier cosa, podria ser util.)
Código:
#recordarBtn * {
display:inline !important;
float: none !important;
margin-left: 0 !important;
}
Con lo anterior, ya puedes quitarle el ancho al <a>
Código:
#recordarBtn a {
...
width:200px;
...
}
Ya con ello, deberian quedarte ambos enlaces en diferentes lineas. Ya queda a tu gusto agregarle mayores estilos.
Qué crack eres!

Lo solucionasteeee!!!!!!!!

Weeeeeeeee !!!

Y esto de !important, es validante?? ya que me gustaría que la pagina fuese validada por el w3c
  #24 (permalink)  
Antiguo 03/03/2008, 16:19
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 16 años, 2 meses
Puntos: 1
Re: Barra de login con css

Me alegra que te haya funcionado.

Si, el "!important" es totalmente valido. Nada mas hace que esa declaracion tenga mayor impotancia sobre otras.

http://www.w3.org/TR/REC-CSS2/cascad...mportant-rules
  #25 (permalink)  
Antiguo 03/03/2008, 16:31
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por cleft Ver Mensaje
Me alegra que te haya funcionado.

Si, el "!important" es totalmente valido. Nada mas hace que esa declaracion tenga mayor impotancia sobre otras.

http://www.w3.org/TR/REC-CSS2/cascad...mportant-rules
Perfecto! muchas gracias la verdad es que llevaba tiempo con el problema y no conseguia averiguar porqué.

Tengo otra pregunta con la barra de login (siento ser pesado :$)

Es que un compi puso un post en este hilo comentando como hacer listas con css, y me dijo que no hacia falta poner en cada <li> la "id"

Entonces he cambiado la estructura a esta de aquí (igual que la que esta colgada)


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 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 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 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><a href="http://localhost/weblocal/recordar_pass.php" target="_top">Recordar Contraseña</a></li>
				<li><a href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>
			</ul>

			<li><input id="cajabusqueda" 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> 
He definido una class para la lista <ul> (no se porqué class... porque puede ser un id normal no?

La idea es que tengo varios botones dentro de esta lista, el boton de nuevo registro, el boton de entrar y el boton de buscar, y me gustaria aplicarles diferentes estilos a cada uno... pero tal y como lo tengo definido ahora, por más que modifico las propiedades no me modifica nada :S


Código HTML:
/* FORMULARIO DE LOGIN */
.loginBox input{
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;
}

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



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


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


/* BUSCADOR */

#cajabusqueda input{
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;
font-size:12px;
display:inline;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 180px;
}
#buscarBtn a{
color:#333333;
margin:15px 15px 5px 10px;
text-decoration:none;
}
#buscarBtn a:hover{
color:red;
text-decoration:none;
}
Qué no estoy definiendo bien el código?

Si tengo un ID dentro de un <a> no se pone asi? #buscarBtn a{}

Gracias

PD: Actualmente me salen los 3 botones con las mismas propiedades y a la misma altura... asi que no esta cogiendo ningun estilo de los que le quiero definir :S
  #26 (permalink)  
Antiguo 03/03/2008, 16:35
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Re: Barra de login con css

mira el código correcto es:

Código:
ul#passwordBtn { width: 130px; margin-right:10px; margin-left:20px; 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; }

http://www.forosdelweb.com/f53/barra-login-con-css-562134/

http://snipurl.com/20w9c
la diferencia entre id y class es que id solo se usa 1 vez en el documento mientras que class se puede usar varias veces.
__________________
No diseñes usando tablas.
  #27 (permalink)  
Antiguo 03/03/2008, 16:39
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 16 años, 2 meses
Puntos: 1
Re: Barra de login con css

"Si tengo un ID dentro de un <a> no se pone asi? #buscarBtn a{}"

Negativo. La forma correcta es:

a#buscarBtn { }

Y asi sucesivamente:
a#registroBtn
a#entrarBtn
  #28 (permalink)  
Antiguo 03/03/2008, 16:51
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Gracias hades87 y cleft!

Cita:
Iniciado por cleft Ver Mensaje
"Si tengo un ID dentro de un <a> no se pone asi? #buscarBtn a{}"

Negativo. La forma correcta es:

a#buscarBtn { }

Y asi sucesivamente:
a#registroBtn
a#entrarBtn
Lo he retocado


Código HTML:
/* FORMULARIO DE LOGIN */
.loginBox input{
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;
}



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:10px; margin-left:20px; 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 */

#cajabusqueda input{
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;
font-size:12px;
display:inline;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 180px;
}
a#buscarBtn a{
color:#333333;
margin:15px 15px 5px 10px;
text-decoration:none;
}
a:hover#buscarBtn{
color:red;
text-decoration:none;
}
Con esta duda acabo el dia, aprendiendo un montón! no me quejo , hay buena gente por el mundo

Pero resulta que quiero añadir la casilla de verificación (como no! para el recordar contraseña!) pues bien.... sino estoy equivocado esto se haria asi....


Código HTML:
<ul id="passwordBtn">
				<li><input type="checkbox" name="recordar" value="SI"/>Recordar Contraseña</li>
				<li><a href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>
			</ul> 
Pues se me descoloca...

Se me pone la casilla arriba, y debajo los dos textos.
Cuando deberia salir al ladito izquierdo de Recordar contraseña!

Por qué es tan malo conmigo el css

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

pero abres otro ul? o lo metes dentro del de menu?
__________________
No diseñes usando tablas.
  #30 (permalink)  
Antiguo 03/03/2008, 17:07
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Re: Barra de login con css

Cita:
Iniciado por hades87 Ver Mensaje
pero abres otro ul? o lo metes dentro del de menu?
Como si abro otro <ul> ? no abro nada que no estuviese antes, sin la casilla de verificacion se ve bien.

Recordar contraseña
¿Olvidaste tu password?


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 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 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 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" name="recordar" value="SI"/>Recordar Contraseña</li>
				<li><a href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>
			</ul>
			
			<li><input 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> 
Ese es el codigo completo
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 01:34.