Ver Mensaje Individual
  #36 (permalink)  
Antiguo 03/03/2008, 19:31
cleft
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 16 años, 1 mes
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.