Estoy empezando con html y css y ahora intento hacer un "formulario de alta" para una web pero no consigo que me queden los campos alineados. La verdad es que estoy super pez y no se que estoy haciendo mal
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento sin título</title> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contenedor"> <div id="cabecera"><img src="img/cabecera.jpg" width="953" height="86" alt="La Web del Invierno" border="0"></div> <div id="titular"><img src="img/cabecera_candidatos.jpg" width="957" height="52" alt="por que eventualmente" /></div> <div id="cuerpo3"> <div id="columna1"> <div class="caja3"> <div class="cajaarriba3"> <div class="cajaabajo3"> <p><img src="img/paraquealta.jpg" alt="Para qué darse de alta" width="186" height="27" /></p> <p>Registrarse es rápido, fácil y gratuito. Te permitirá sacar ventaja de las siguientes funciones y servicios:</p> <p>Crea tu C.V on line en menos de 2 minutos.</p> <p>Inscríbete a las ofertas que te interesan.<br /> Crea alertas de trabajo y recibe ofertas de trabajo a tu e-mail.</p> <p>Visualiza tu perfil histórico personal con la empresa. <br /> </p> <p class="negrita">¿Ya eres usuario registrado? </p> <p>Por favor, <a href="#" class="enlacecandidatos">entra en el sistema.</a></p> <p><br /> </p> </div> </div> </div> </div> <div id="columna2"> <img src="img/formulariounico.jpg" width="237" height="154" alt=""> </div> <div id="columnaformulario"> <p><img src="img/autenticacion.jpg" alt="Datos de autoenticación" width="197" height="29" /></p> <p><form name="formulario_candidatos" id="formulario" method=""> <fieldset> <label for="email"><em class="required">*</em>e-mail: </label> <input type="text" name="email" id="nemail" class="campolargo" /> <label for="password"><em class="required">*</em>password:</label> <input type="text" name="password" id="password" class="campo" /> <label for="confirmar"><em class="required">*</em>confirmar password:</label> <input type="text" name="confirmar" id="confirmar" class="campo" /> <label for="nombre"><em class="required">*</em>nombre:</label> <input type="text" name="nombre" id="nombre" class="campolargo" /> <label for="fecha"><em class="required">*</em>fecha de nacimiento:</label><input type="text" name="fecha" id="fecha" class="campo" /> </fieldset> <fieldset> <legend><em class="required">*</em>sexo</legend> <input name="sexo" type="radio" id="sexomujer" class="radio" value="mujer" /> <label id="sexomujer" for="sexomujer">mujer</label> </br> <input name="sexo" type="radio" id="sexohombre" class="radio" value="hombre" /> <label id="sexohombre" for="sexohombre">hombre</label> </fieldset> <fieldset> <label for="examinar">foto</label><input name="examinar" type="file" /> </fieldset> <fieldset> <label for="direccion"><em class="required">*</em>dirección:</label> <input type="text" name="fecha" id="url" class="campolargo" /> <label for="fecha"><em class="required">*</em>fecha:</label> <input type="text" name="direccion" id="direccion" class="campolargo" /> <label for="codigo"><em class="required">*</em>código postal:</label> <input type="text" name="codigo" id="codigo" class="campo" /> <label for="provincia"><em class="required">*</em>provincia:</label> <input type="text" name="provincia" id="provincia" class="campo" /> <label for="ciudad"><em class="required">*</em>ciudad:</label> <input type="text" name="ciudad" id="ciudad" class="campolargo" /> <label for="movil"><em class="required">*</em>teléfono móvil:</label> <input type="text" name="movil" id="movil" class="campolargo" /> <label for="fijo">teléfono fijo:</label> <input type="text" name="fijo" id="fijo" class="campolargo" /> </fieldset> <fieldset> <legend><em class="required">*</em>documento de identidad</legend> <select name="identidad" class="campo" id="identidad" title="identidad"> <option value="dni">DNI</option> <option value="pasaporte">Pasaporte</option> <option value="tarjeta de residencia">Tarjeta de residencia</option> <option selected="selected">selecciona uno...</option> </select> </fieldset> <p><img src="img/datosacademicos.jpg" alt="datos academicos" width="164" height="29" /></p> <fieldset> <legend><em class="required">*</em>carnet de conducir</legend> <input name="carnet" type="radio" id="carnetsi" class="radio" value="si" /> <label id="carnetsi" for="carnetsi">si</label> </br> <input name="carnet" type="radio" id="carnetno" class="radio" value="no" /> <label id="carnetno" for="carnetno">no</label> </fieldset> <legend>tipo</legend> <select name="identidad" class="campo" id="identidad" title="identidad"> <option value="b1">B1</option> <option value="b2">B2</option> <option value="b3">B3</option> </select> </fieldset> <fieldset> <legend><em class="required">*</em>¿eres estudiante?</legend> <input name="estudiante" type="radio" id="estudiantesi" class="radio" value="si" /> <label id="estudiantesi" for="estudiantesi">si</label> </br> <input name="estudiante" type="radio" id="estudianteno" class="radio" value="no" /> <label id="estudianteno" for="estudianteno">no</label> </fieldset> <fieldset> <label for="textarea"><em class="required">*</em>idiomas</label> <textarea name="textarea" cols="40" rows="5" id="idiomas"> </textarea> </fieldset> <fieldset> <legend><em class="required">*</em>estudios</legend> <select name="estudios" class="campo" id="estudios"> <option>Graduado escolar</option> <option value="eso">ESO</option> <option value="diplomatura">Diplomatura</option> <option value="licenciatura">Licenciatura</option> <option value="ingenieria">Ingenería</option> <option value="fp grado medio">FP grado medioa</option> <option value="fp grado superior">FP grado superior</option> <option selected="selected">selecciona uno...</option> </select> </fieldset> <fieldset> <label for="textarea"><em class="required">*</em>otros cursos y postgrados</label> <textarea name="textarea" cols="40" rows="5" id="otros_cursos"> </textarea> </fieldset> <p><img src="img/datoslaborales.jpg" alt="datos academicos" width="137" height="27" /></p> <fieldset> <label for="experiencia"><em class="required">*</em>años de experiencia en el sector:</label> <input type="text" name="cexperiencia" id="experiencia" class="campo" /> <label for="actualmente"><em class="required">*</em>actualmente:</label> <input type="text" name="actualmente" id="actualmente" class="campo" /> <label for="especialidad"><em class="required">*</em>especialidad:</label> <input type="text" name="especialidad" id="especialidad" class="campolargo" /> <label for="otra">otra:</label> <input type="text" name="otra" id="motra" class="campolargo" /> </fieldset> <fieldset> <legend>¿quieres ser voluntario?</legend> <input name="voluntario" type="radio" id="voluntariosi" class="radio" value="si" /> <label id="voluntariosi" for="voluntariosi">si</label> </br> <input name="voluntario" type="radio" id="voluntariono" class="radio" value="no" /> <label id="voluntariono" for="voluntariono">no</label> </fieldset> <fieldset> <label for="examinar">adjuntar curriculum</label><input name="examinar" type="file" /> </fieldset> <p><img src="img/datosadicionales.jpg" alt="datos academicos" width="137" height="27" /></p> <fieldset> <label for="textarea">comentarios</label> <textarea name="textarea" cols="40" rows="5" id="comentarios"> </textarea> </fieldset> <fieldset> <legend><em class="required">*</em>disponibilidad</legend> <select name="disponibilidad" class="campo" id="disponibilidad"> <option value="completa">jornada completa</option> <option value="media">media jornada</option> <option selected="selected">selecciona uno...</option> </select> </fieldset> <fieldset> <legend><em class="required">*</em>¿cómo nos conocistes?</legend> <select name="disponibilidad" class="campo" id="disponibilidad"> <option value="amigo">por un amigo</option> <option value="banner">un banner en otra página</option> <option selected="selected">selecciona uno...</option> <option value="otros">otros</option> </select> </fieldset> <p> <fieldset> <input name="acepto" type="radio" id="acepto" class="radio" value="acepto" /> <label id="acepto" for="acepto">he leido y acepto las condiciones de uso</label> </br> </fieldset> <P><a href="#" class="enlacecandidatos">condiciones de uso</a> </form> </p> </div> </div> </div> </body> </html>
Un saludo!
