Comunidad de diseño web y desarrollo en internet online

Problema con formulario

Citar            
MensajeEscrito el 16 Jul 2014 02:21 am
Hola amigos de la comunidad como estan? soy relativamente nuevo en html y css y estoy creando un pequeño formularioy resulta que que no puedo bajar de posicion donde dice "comentarios" osea alinearlo al centro del campo de texto que esta a su derecha intente creando una clase en la etiqueta label pero no resulta y para que me entiendan mas aca les dejo el codigo tan to html como css, gracias.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos1.css" type="text/css">
</head>
<body>
<div id="contenedorform">
<form method="post" action="#">
<label>Ingrese nombre:</label>
<input type="text" name="nombre" class="texto1">
<br>
<label>Ingrese email:</label>
<input class="texto2" type="text" name="mail">
<br>
<label>Comentarios:</label>
<textarea class="texta" name="comentarios"></textarea>
<br>
<input class="botonsubmit" type="submit" value="confirmar">
</form>
</div>
</body>
</html>

CSS

#contenedorform {
width:500px;
height:250px;
margin-left:20px;
margin-top:10px;
background:#A3F5FB;
border:1px solid #CCC;
padding:20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#contenedorform form label {
width:120px;
float:left;
font-family:Arial;
font-size:17px;
}

.texto1 {
width:300px;
background-color:#E4FBFC;
border: 1px solid grey;
margin-left:10px;
}

.texto2 {
width:300px;
background:#E4FBFC;
border: 1px solid grey;
margin-left:10px;
}

.texta {
width:297px;
height:130px;
background:#E4FBFC;
border: 1px solid grey;
margin-left:10px;
margin-top:10px;
}

.botonsubmit {
color:#f00;
background-color:#bbb;
border: 1px solid #fff;
}

Por jarvito

33 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 16 Jul 2014 09:28 pm
quita el float a label y agrega al textarea:

vertical-align: middle;

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 16 Jul 2014 10:12 pm
Hola amigo y gracias pero me podrias explicar porque quitar el float y poner lo otro que me dijiste? gracias.

Por jarvito

33 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 16 Jul 2014 10:25 pm
Hola y repito gracis por la respuesta pero al hacer lo que me dijistes se deslinearon mis campos de texto ahora lo que quiero hacer es alinearlos lso tres campos lo hago con margin-left pero no resulta alguna otra forma de aliearlos se los agradecere.

Por jarvito

33 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 16 Jul 2014 10:26 pm
vertical-align es para alinear verticalmente los elementos adyacentes. Para ello necesitan ser elementos "inline" y que pertenezcan al mismo nivel de "profundidad".

Al utilizar float, mueves la profundidad del elemento, provocando que el siguiente elemento ocupe el espacio que "dejó" el anterior. Con float no se sobrepone el texto, por eso algunas veces se percibe como "colocar al lado de".

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 16 Jul 2014 10:40 pm
Respuesta copy/paste

Código CSS :

#contenedorform {
width:500px; 
height:250px;
margin-left:20px; 
margin-top:10px;
background:#A3F5FB;
border:1px solid #CCC;
padding:20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

label {
width:130px; 
font-family:Arial;
font-size:17px;
display:inline-block;
}

input[type="text"] {
width:300px;
background-color:#E4FBFC;
border: 1px solid grey;
margin-left:10px;
}

textarea {
width:297px;
height:130px;
background:#E4FBFC;
border: 1px solid grey;
margin-left:10px;
margin-top:10px;
vertical-align:middle;
}

.botonsubmit {
color:#f00;
background-color:#bbb;
border: 1px solid #fff;
}

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 17 Jul 2014 12:47 am
Hola gracais por tu respuesta me ayudo mucho pero ahora modifique mi formulario le agregue un boton mas pero ese boton se alinea muy abajo inetente con float y el display:inline-block y no puedo alinearlo con el otro boton que tenia, aca te envio el codigo, gracias.

#contenedorform {
width:500px;
height:260px;
margin-left:20px;
margin-top:10px;
background:#A3F5FB;
border:1px solid #006699;
padding:23px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#contenedorform form label {
color:#006699;
width:120px;
font-family:Arial;
font-size:17px;
font-weight:500;
}

.texto1 {
width:300px;
background:#E4FBFC;
border: 1px solid #006699;
margin-left:6px;
}
.texto1:hover {
width:300px;
background:#fff;
border: 1px solid #fff;
margin-left:6px;
}
.texto1:focus {
width:300px;
background:#E4FBFC;
border: 1px solid #fff;
margin-left:6px; }

.texto2 {
width:300px;
background:#E4FBFC;
border: 1px solid #006699;
margin-left:22px;
}
.texto2:hover {
width:300px;
background:#fff;
border: 1px solid #fff;
margin-left:22px;
}
.texto2:focus {
width:300px;
background:#E4FBFC;
border: 1px solid #fff;
margin-left:22px; }

.texta {
width:297px;
height:115px;
background:#E4FBFC;
border: 1px solid #006699;
margin-left:27px;
margin-top:10px;
vertical-align:middle;
}

.texta:hover {
width:297px;
height:115px;
background:#fff;
border: 1px solid #fff;
margin-left:27px;
margin-top:10px;
vertical-align:middle;
}

.texta:focus {
width:297px;
height:115px;
background:#E4FBFC;
border: 1px solid #fff;
margin-left:27px;
margin-top:10px;
vertical-align:middle;
}
.botonsubmit {
width:120px;
height:29px;
font-family:Arial;
font-size:17px;
font-weight:300;
color:#E4FBFC;
background:#006699;
border-right: 2px solid #000;
border-top: 2px solid #000;
margin-left:280px;
margin-top:15px;
-webkit-border-radius:10px 0 10px 0;
-moz-border-radius:10px 0 10px 0;
border-radius:10px 0 10px 0;
}
.botonborrar {
display:inline-block;
width:120px;
height:29px;
font-family:Arial;
font-size:17px;
font-weight:300;
color:#E4FBFC;
background:#006699;
border-right: 2px solid #000;
border-top: 2px solid #000;
margin-left:140px;
margin-top:15px;
-webkit-border-radius:10px 0 10px 0;
-moz-border-radius:10px 0 10px 0;
border-radius:10px 0 10px 0;
}

Por jarvito

33 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 17 Jul 2014 04:28 am
Le das mucho espaciado a los botones... al no caber en la misma línea se baja.

Yo siempre manejo cada campo (con su etiqueta) como bloque, y para los estilos uso como selectores los tags...

ejemplo

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.