Foros del Web » Creando para Internet » CSS »

Dudas maquetar formulario css

Estas en el tema de Dudas maquetar formulario css en el foro de CSS en Foros del Web. Hola a todos. Tengo unas dudas en un formulario que estoy haciendo. a ver si me podeis echar una mano. Decir que lo optimizo para ...
  #1 (permalink)  
Antiguo 30/03/2015, 08:24
 
Fecha de Ingreso: marzo-2015
Mensajes: 4
Antigüedad: 9 años, 7 meses
Puntos: 1
Dudas maquetar formulario css

Hola a todos. Tengo unas dudas en un formulario que estoy haciendo. a ver si me podeis echar una mano. Decir que lo optimizo para firefox, no sé que tal correrá en otros navegadores. Mis dudas son:
1. Cómo puedo hacer para que el input text de "pais de procedencia" quede centrado de altura y con una altura de una fila en vez de una altura igual a todo el recuadro de su izquierda. No sé si me explico bien, disculpad sino lo hago.
2. Las opciones radio en "numero de hermanos" me salen centradas como yo quiero, pero el texto que las acompaña queda abajo, tampoco sé alinearlo....
3. Me gustaría que en la ultima opcion "Otros aspectos importantes" aparecieran dos lineas para introducir texto en vez de una

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="style2.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" MAXLENGTH="4" type="text"/><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 />
	<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 />
	<labelradio>Sexo</labelradio>
		<select name="sexo">	
			<option> </option>						
			<option value="1" selected>Hombre</option>
        		<option value="0">Mujer </option></select><br>	
	<label2 for="pais">Pais de procedencia</label2>
		<input type="text"name="pais"id="pais"/><br>
	<label2 >Numero hermanos</label2> 
		<input type="radio" name="numhe"value="Casado">Sin hermanos
		<input type="radio" name="numhe" value="1">1
		<input type="radio" name="numhe" value="1">2
		<input type="radio" name="numhe" value="1">3
		<input type="radio" name="numhe" value="1">4
		<input type="radio" name="numhe" value="1">>4<br>
	<label2 for="aspecto_fisic">Otros aspectos importantes</label2>
		<input type="text" name="aspecto_fisic"rows="3">
</fieldset>
</form>
</body>
</html>
Codigo css
Código:
#form1 label {
	width: 100px;
	height: 1.2em;
	display: block;
	float:left;
	background-color: #E8EBEC;
	padding:2px;
	margin:1px;
	cursor:pointer;}

#form1 labelradio {
	width: 100px;
	height: 1em;
	display: block;
	float:left;
	background-color: #E8EBEC;
	padding:2px;
	margin:1px;
	cursor:pointer;}

#form1 label2 {
	width: 100px;
	height: 2.5em;
	display: block;
	float:left;
	background-color: #E8EBEC;
	padding:2px;
	margin:1px;
	cursor:pointer;}


#form1 label:hover {
	background-color: #DCE1E2;
	cursor:pointer;}
#form1 label2:hover {
	background-color: #DCE1E2;
	cursor:pointer;}
#form1 labelradio:hover {
	background-color: #DCE1E2;
	cursor:pointer;}

#izquierda{    
        background-color:#BDD2EF;  
        float:left;  
        width:10%;  
}  
#derecha{  
        height:50%;  
        background-color:#DAF7E2;  
        float:right;  
        width:90%;}

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;}

input[name=id] {width:60px;}
select[name=sexo] {width:80px;}
input[name=pais]{
	width: 30em;
	height: 3em;}
input[name=orsex]{height: 2.5em;}
input[name=numhe]{height: 2.5em;line-height:2.5em;}
radio[name=numhe]{height:2.5em;}

input[name=aspecto_fisic]{   
   	height: 3em;}

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;
}
Gracias de antemano por vuestra ayuda
  #2 (permalink)  
Antiguo 30/03/2015, 10:18
 
Fecha de Ingreso: febrero-2015
Mensajes: 61
Antigüedad: 9 años, 8 meses
Puntos: 15
Respuesta: Dudas maquetar formulario css

no es exactamente lo que preguntas.. pero.. como dice el dicho..

"si no puedes contra ellos... uneteles! "


http://codepen.io/anon/pen/YPgdKO
  #3 (permalink)  
Antiguo 30/03/2015, 10:32
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 11 meses
Puntos: 208
Respuesta: Dudas maquetar formulario css

1. Para que te quede en una sola linea, sacale el height porque le estas indicando una altura fija. Y dado a la extensión del texto, el label tiene que ser mas ancho.

2. Tambien tienen height, lo mas probable es que le quites ese alto fijo y queden uno al lado del otro.

3. Usa <textarea name="aspecto_fisic" rows="2"></textarea> en lugar de input.

Saludos
  #4 (permalink)  
Antiguo 01/04/2015, 02:06
 
Fecha de Ingreso: marzo-2015
Mensajes: 4
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Dudas maquetar formulario css

Hola! gracias por vuestras respuestas. Mman me gusta tu elegante solución

Etiquetas: background, color, dudas, float, formulario, html, maquetar, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:14.