alinear labels de error

navarone86 · #1 (**permalink**) 05/02/2012, 15:45

hola

tengo el siguiente formulario:

http://jsfiddle.net/FKCQ3/

como podéis ver, en los input y el text area, al tener un ancho fijo, los errores me salen perfectamente alineados

en cambio, con los radio y los checkbox, como no puedo conocer el ancho, no se como hacer para tener todos alineados al mismo nivel

he probado a meter en un span o en otro div los diferentes radio button, y después asignar un ancho a ese span o div, pero no me ha funcionado

como puedo solucionar esto?

tambien tuve algun problema con este formulario para alinar en el limite superior del textarea el mensaje de error. lo solucione aquí

lo ideal seria encontrar una solución que me valga para los 2 casos

un saludo

cristian_cena · #2 (**permalink**) 05/02/2012, 16:05

Podrías crear un contenedor para los radiobotones y darle un ancho.
O trabajar con propiedades como "float:left" o "display:table".
O bien usar una tabla con tres columas

emprear · #3 (**permalink**) 05/02/2012, 18:22

El problema lo tenes en asignar porcentajes ya que los contenedores no tienen una medida definida.
Si bien yo lo haría todo de otra manera, esto creo corrige tu problema

html

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
    <div class="divform">
        <p>
            <label for="usuario" class="form">Usuario</label>
            <input type="text" id="usuario">
            <label class="error">Campo obligatorio</label>
        </p>
        
        <p>
            <label for="fecha" class="form">Fecha</label>
            <input type="text" id="fecha">
            <label class="error">Formato dd/mm/aaaa</label>
        </p>
        
        <p>
            <label for="comment" class="form">Comentario</label>
            <textarea id="comment" rows="8"></textarea>
            <label class="error">Max. XXX caracteres</label>
        </p>    
        
        <p>
            <div class="form">Sexo</div>
           <div class="radiobut"> <input type="radio" id="radio_hombre" name="sexo"/>
            <label for="radio_hombre" class="option">Hombre</label>
            <input type="radio" id="radio_mujer" name="sexo"/>
            <label for="radio_mujer" class="option">Mujer</label>
        </div>
            <label class="error">Campo obligatorio</label>
        </p> 
    </div>
</body>
</html>

css

Código CSS:

Ver originalbody{
    margin: 8px;
    font-size: 14px;
    font-family: Lucida Sans Unicode, Lucida Grande, Arial, Helveticam, Verdana;
    color: #444;
}
 
.divform {
width: 600px;
}
p{
    padding-top: 20px;
}
div.radiobut{
    display: inline-block;
    width: 30%;    
padding: 4px 2px; 
}
 
 
 
 
input[type=text], textarea{
    padding: 4px 2px; 
    border: 1px solid #aaa;
    background: #fff;
    width: 30%;
    resize: none;
}
 
label.form, div.form{
    font-size: 14px;
    text-align: right;
    width: 15%;
    float: left;
    margin: .3em 2% 0 0;
}
 
label.option{
    margin-right: 20px;
}
 
.error{
    font-size: 13px;
    padding: 4px 18px;
    color: #D8000C;
    background-color: #FDD5CE;
    border: 1px solid #D8000C;
    margin: 40px;
}

Saludos

navarone86 · #4 (**permalink**) 06/02/2012, 07:52

gracias a los 2 por responder

quiero evitar el uso de tables, así que esa opción la descartamos

que otras alternativas me recomendaís? no me importa cambiar la maquetación si es a mejor

un saludo