Foros del Web » Creando para Internet » CSS »

formulario desalineado

Estas en el tema de formulario desalineado en el foro de CSS en Foros del Web. Hola a todos! Estoy haciendo un formulario con css y el problema es que las cajas no me quedan alineadas con el label, es decir, ...
  #1 (permalink)  
Antiguo 26/04/2007, 05:41
 
Fecha de Ingreso: diciembre-2003
Mensajes: 71
Antigüedad: 20 años, 11 meses
Puntos: 0
formulario desalineado

Hola a todos!

Estoy haciendo un formulario con css y el problema es que las cajas no me quedan alineadas con el label, es decir, el label lo tengo a la izquierda del imput, en línea, pero me sale más abajo que el input y este muy arriba, yo lo que quiero es que estén bien alineados...Me pasa tanto en IE como en Firefox.
Este es el código:

<form id="entradaforo" action="password.php" method="post">
<fieldset id="datosempresa">
<legend>Datos de entrada </legend>
<label for="usuario">Usuario: </label>
<input name="usuario" id="usuario" type="text"
tabindex="1" />

<label for="contrasena">Contrase&ntilde;a: </label>
<input name="contrasena" id="contrasena" type="text"
tabindex="2" />



</fieldset>


<input name="enviar" type="submit" id="enviar" value="Enviar" />
<input name="borrar" type="reset" id="borrar" value="Borrar" />

</form>

Y este el css:

form {margin: 5px 35px;}
fieldset {overflow:auto; margin: 15px 0; border: 1px solid #999999; background: transparent url(../images/fondoformulario.gif) repeat-x left top !important; background: transparent url(../images/fondoformularioIE.gif) repeat-x left top; padding: 0 5px;}
legend {font-size: 11px; color: #008900; font-weight:bold; background: transparent url(../images/fondoformulariolegend.gif) repeat-x left top; border: 1px solid #999999; width: 200px; padding: 2px 5px; margin-bottom: 10px;}
label,input {display: inline;}
label {clear:left; font-size: 11px; color: #666666; text-align: left;}
input {font-size: 11px; color: #666666; margin-bottom: 10px; margin-left: 5px; border: #0f7ad1 1px solid;}

¿Alguien sabe qué puede ser?
  #2 (permalink)  
Antiguo 27/04/2007, 00:21
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 19 años, 9 meses
Puntos: 0
Re: formulario desalineado

Hola, mi consejo es que cuando escribas se lo pongas fácil al que quiere ayudarte, colocando el código entre los tags adecuados ([ HTML ] por ejemplo), tabulando, etc.

Haciendo estos cambios creo que consigues lo que buscas

Código HTML:
/* añado un poco de aire por abajo */
fieldset {
   ....
   padding: 0 5px 10px;
}

/* he quitado margin y creo que así es más inteligible tu código */


label, input {
   display: inline; 
   font-size: 11px; 
   color: #666666;
}

label {
    text-align: left;
}

input {
    margin-left: 5px; 
    border: #0f7ad1 1px solid;
}
Saludos, espero te sirva.
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 05:00.