Problema al enmaquetar formulario

[neodani]

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!

[KaozC9]

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:

<form>
<div class="izq">
<!--aqui colocar los inputs con sus labels del lado izquierdo-->
</div>
<div class="der">
<!--aqui colocar los inputs con sus labels del lado derecho-->
</div>
<div style="clear: both;"></div>
<form>
 

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.

[neodani]

Iniciado por KaozC9

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:

<form>
<div class="izq">
<!--aqui colocar los inputs con sus labels del lado izquierdo-->
</div>
<div class="der">
<!--aqui colocar los inputs con sus labels del lado derecho-->
</div>
<div style="clear: both;"></div>
<form>
 

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!

[neodani]

Problema solucionado :D

Código HTML:

<div>
            <label class="condiciones">Acepto las <a href="#">Condiciones de servicio</a> y la <a href="#">Política de privacidad</a>.</label>
            <input type="checkbox" tabindex="14" name="condiciones"/>
        </div>
 
#form_registro .condiciones{
width:250px;
float:right;
}
 
#form_registro #condiciones label.error{margin-top:5px;}
 

Muchas gracias a todos