Foros del Web » Creando para Internet » CSS »

Problema al enmaquetar formulario

Estas en el tema de Problema al enmaquetar formulario en el foro de CSS en Foros del Web. Buenas, Estoy creando un formulario el cual queda bien alineado todos sus campos, pero resulta que ahora le quiero aplicar una validación javascript y se ...
  #1 (permalink)  
Antiguo 16/09/2010, 15:33
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Problema al enmaquetar formulario

Buenas,

Estoy creando un formulario el cual queda bien alineado todos sus campos, pero resulta que ahora le quiero aplicar una validación javascript y se me descuadra de mala manera! He ido modificando el formulario para tratar de compaginar el css de la validación, pero no hay manera!

Os dejo el enlace para que podáis ver la validación online y ver como se descuadra.

http://neodani.com/fdw/form/form_registro.php

También he visto que no siempre se descuadra del mismo sitio, no se, la verdad me vendría bien vuestros consejos para maquetarlo de la forma correcta y conseguir que la validación no lo descuadre..

Si pulsáis sobre el boton "Crear cuenta" y os ejecutará las validaciones



Mil gracias de antemano!
  #2 (permalink)  
Antiguo 16/09/2010, 20:55
 
Fecha de Ingreso: abril-2010
Ubicación: Chile
Mensajes: 76
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema al enmaquetar formulario

Te dire algo rapido, tu css es un lio, en un principio por ejemplo, el tamaño que toma label 270px, es mayor al que toma el contenedor 230px, segundo no se para que tantos floats, si dentro de form, podrias hacer hecho dos divs
Código HTML:
Ver original
  1. <div class="izq">
  2. <!--aqui colocar los inputs con sus labels del lado izquierdo-->
  3. </div>
  4. <div class="der">
  5. <!--aqui colocar los inputs con sus labels del lado derecho-->
  6. </div>
  7. <div style="clear: both;"></div>

Intenta hacerlo asi, porque si no, es realmente un lio poder ayudarte, porque como veo, esta tan rigido el formulario, que al agregar con JS otro span dentro del contenedor de un input, el tamaño es mayor al que puede soportar todo el formulario.

Te lo digo de buena manera, es bueno aprender buenas formas de trabajar con css, es mas facil modificarlo despues y menos probable de que ocurran errores de este tipo.
  #3 (permalink)  
Antiguo 17/09/2010, 01:05
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Problema al enmaquetar formulario

Cita:
Iniciado por KaozC9 Ver Mensaje
Te dire algo rapido, tu css es un lio, en un principio por ejemplo, el tamaño que toma label 270px, es mayor al que toma el contenedor 230px, segundo no se para que tantos floats, si dentro de form, podrias hacer hecho dos divs
Código HTML:
Ver original
  1. <div class="izq">
  2. <!--aqui colocar los inputs con sus labels del lado izquierdo-->
  3. </div>
  4. <div class="der">
  5. <!--aqui colocar los inputs con sus labels del lado derecho-->
  6. </div>
  7. <div style="clear: both;"></div>

Intenta hacerlo asi, porque si no, es realmente un lio poder ayudarte, porque como veo, esta tan rigido el formulario, que al agregar con JS otro span dentro del contenedor de un input, el tamaño es mayor al que puede soportar todo el formulario.

Te lo digo de buena manera, es bueno aprender buenas formas de trabajar con css, es mas facil modificarlo despues y menos probable de que ocurran errores de este tipo.
Buenas,

He seguido tus consejos y la verdad es que ahora ha quedado mucho mejor.

Sin embargo, no consigo alinear el checkbox (de aceptar las condiciones), no queda alineado con su texto, y cuando pulsas comprobar se desajusta de mala manera xD



Puedes ver online como está quedando
http://neodani.com/fdw/form/form_registro.php

¿Podéis ayudarme con el checkbox dichoso?

Muchas gracias de antemano!
  #4 (permalink)  
Antiguo 17/09/2010, 13:06
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Problema al enmaquetar formulario

Problema solucionado :D

Código HTML:
Ver original
  1. <div>
  2.             <label class="condiciones">Acepto las <a href="#">Condiciones de servicio</a> y la <a href="#">Política de privacidad</a>.</label>
  3.             <input type="checkbox" tabindex="14" name="condiciones"/>
  4.         </div>
  5.  
  6. #form_registro .condiciones{
  7. width:250px;
  8. float:right;
  9. }
  10.  
  11. #form_registro #condiciones label.error{margin-top:5px;}

Muchas gracias a todos

Etiquetas: formulario
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 18:28.