Primero de todo saludar al foro que es la primera vez que participo aqui. Aviso que soy nuevo en css asi que quiza pregunte alguna estupidez...
Os comento he creado un formulario tomando como modelo otro que encontré en un foro... ya no recuerdo cual [:-$]
Mis dudas sobre maquetacion son las siguientes:
1. Como podría hacer para que la caja de texto de
"ID" tuviera 4 caracteres de ancho? tengo el input definido en el css y no se cómo cambiarlo...
2. En
"edad inicio actividad" me gustaria que la caja de la derecha se quede con una fila de alto pero que se centre con respecto a la caja de la izquierda...
3. En
"otros aspectos relevantes" me gustaria que la caja de texto tuviera el alto de su caja de la izquierda. O al menos como indicar que ese texto tiene que tener 3 filas
4. En
"Rasgos psicopaticos me gustarian que los checkbox quedaran debajo del radio si a la derecha como en otra columna. ¿Deberia usar una tabla?
Decir que uso firefox en ubuntu y perdir disculpas si pregunto demasiado [(C)]
Codigo css
Código:
#form1 label {
width: 100px;
display: block;
float:left;
background-color: #E8EBEC;
padding:2px;
margin:2px;
cursor:pointer;}
#form1 label2 {
width: 100px;
display: block;
float:left;
background-color: #E8EBEC;
padding:2px;
margin:2px;
cursor:pointer;
height: 36px;
line-height: 18px;}
#form1 label21 {
width: 100px;
display: block;
float:left;
background-color: #E8EBEC;
padding:2px;
margin:2px;
cursor:pointer;
height: 36px;
line-height: 38px;}
#form1 label32 {
width: 100px;
display: block;
float:left;
background-color: #E8EBEC;
padding:2px;
margin:2px;
cursor:pointer;
height: 50px;
line-height: 25px;}
#form1 label:hover {
background-color: #DCE1E2;
cursor:pointer;
}
input,select{
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width:70%;}
input[type=checkbox] {width:auto; }
input[type=radio] {width:auto;}
fieldset{
float: left;
width: 80%;
display: block;
background-color: #99c8cc;
}
legend{
text-align:left;
font-weight:bold;}
body {
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
Codigo html
Código:
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>UACC/PIAS</title>
<link href="index.css" media="screen" rel="StyleSheet" type="text/css">
</head>
<body><form id="form1" method="post" action=""><fieldset><legend>VARIABLES SOCIODEMOGRAFICAS
Y FISICAS</legend>
<br><label for="id">ID</label><input name="id" type="text" id="id" /><br /><br>
<label for="nombre">Nombre</label><input name="nombre" type="text" id="nombre" /><br />
<label for="apellido">Apellido</label><input type="text" name="apellido" id="apellido" /><br />
<label for="nombre2">Nombre2</label><input type="text" name="nombre2" id="nombre2" /><br />
<label for="apellido2">Apellido2</label><input type="text" name="apellido2" id="apellido2" /><br /><br/>
<label for="alias">Alias</label><input type="text" name="apellido" id="alias" /><br />
<label for="alias2">Alias2</label><input type="text" name="nombre2" id="alias2" /><br />
<label for="alias3">Alias3</label><input type="text" name="apellido2" id="alias2" /><br /> <br />
<label >Sexo</label>
<input type="radio" name="sexo" value="Hombre"checked>Hombre
<input type="radio" name="sexo" value="Mujer">Mujer<br><br>
<label>Estatura</label>
<input type="radio" value="1"name="estatura">Alta
<input type="radio" value="2"name="estatura">Mediana
<input type="radio" value="3"name="estatura">Baja<br><br>
<label>Complexion</label>
<input type="radio" value="1"name="complex">Delgado
<input type="radio" value="2"name="complex">Fuerte/atletico
<input type="radio"value="3"name="complex">Obeso<br><br>
<label21>Ocupacion</label21>
<input type="checkbox" name="Empleado"value="Casado">Empleado
<input type="checkbox" name="soltero" value="1">Jefe
<input type="checkbox" name="separado" value="1">Trabajador por cuentra propia
<input type="checkbox" name="viudo" value="1">Desempleado
<input type="checkbox" name="viudo" value="1">Estudiante<br>
Otro<input type="text"name="raza"/><br><br />
<label2 for="edadi">Edad inicio de la actividad</label2>
<input name="edadi" type="text" id="edadi" /><br><br><br>
<label2 for="aspecto_fisic">Otros aspectos importantes</label2>
<input type="text" name="aspecto_fisic">
</fieldset>
<fieldset><legend>VARIABLES PSICOLOGICAS</legend>
<label>Coeficiente intelectual</label>
<input type="radio" value="blanca"name="coef">Alto
<input type="radio" value="negra"name="coef">Medio
<input type="radio" value="asiatico" name="coef">Bajo<br><br><br>
<label32>Rasgos psicopaticos</label32>
<input type="radio" value="1"name="rasgps">Si
<input type="radio" value="0"name="rasgps">No<br>
<input type="checkbox" name="Empleado"value="Casado">Falta empatia
<input type="checkbox" name="soltero" value="1">Versatilidad criminal
<input type="checkbox" name="separado" value="1">Encanto superficial
<input type="checkbox" name="viudo" value="1">Impulsividad
<input type="checkbox" name="viudo" value="1">Intolerancia ante la frustraccion<br>
<input type="checkbox" name="Empleado"value="Casado">Manipulacion/mentira
<input type="checkbox" name="soltero" value="1">Falta de responsabilidad
<input type="checkbox" name="separado" value="1">Elevada autovalía
<input type="checkbox" name="viudo" value="1">Falta de culpa
<input type="checkbox" name="viudo" value="1">Estilo de vida parasito<br><br>
<label2>Implicacion en la vida social</label2>
<input type="radio" value="1"name="vida_soc">Alta
<input type="radio" value="2"name="vida_soc">Media
<input type="radio" value="3" name="vida_soc">Baja<br><br>
</fieldset>
</form>
</body>
</html>