CSS - Dudas maquetacion css

   
Vista:

Dudas maquetacion css

Publicado por iscariote (3 intervenciones) el 26/03/2015 14:30:43
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

Codigo css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
#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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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>
		&nbsp;&nbsp;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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder
Imágen de perfil de xve

Dudas maquetacion css

Publicado por xve (352 intervenciones) el 26/03/2015 16:26:40
Hola, para limitar el ancho es con MAXLENGTH=4 en el input...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Dudas maquetacion css

Publicado por iscariote (3 intervenciones) el 26/03/2015 23:14:34
Muchas gracias por tu respuesta xve!

Mi duda por concretar es; si yo cambiara el primer input text de mi formulario

1
<br><label for="id">ID</label><input name="id" type="text"/><br /><br>

Lo sustituyo por:
1
<br><label for="id">ID</label><input name="id" MAXLENGTH="4" type="text"/><br /><br>


Cuando abro mi index no hace nada, recordar que tengo mi css
1
2
3
4
input,select{
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:70%;}

Y el tema es que solo quiero cambiar esa caja de tamaño, no el resto.

Gracia
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Dudas maquetacion css

Publicado por iscariote (3 intervenciones) el 26/03/2015 23:58:16
Disculpadme pero ahora descubre que con mozilla en windows y mozilla en ubuntu se ve de distinta manera En window me queda descolocado! por supuesto en i explorer tambien... Como trabajo en ubuntu he ido viendolo ahi... No sé, algún consejo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Dudas maquetacion css

Publicado por xve (352 intervenciones) el 27/03/2015 10:38:50
Puedes indicar a poseriori el tamaño para ese indice en concreto desde el CSS...
1
2
3
4
5
6
7
input,select{
    font-family: "Trebuchet MS",
    Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width:70%;
}
input[name=id] {width:50px;}

Esto te modificar únicamente el campo con el nombre id.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar