Hola a todos. Quisiera saber si alguien me puede ayudar con un problemita. Revisé varios tópicos del foro sobre "input", manejo de capas y divs, etc. Le he dado mil vueltas, pero lamentablemente no consigo resolverlo. Y como llevo una semana sin saber qué hacer, probablemente haya perdido la perspectiva y quedé estancado.
Tengo un formulario de contacto hecho con divs completamente, pero al darle estilo, el botón Borrar me queda a la mitad de la altura del botón Enviar. ¿Alguien podría revisar qué estoy haciendo mal? Eso si, les pido paciencia porque el código todavía está un poco sucio, pero creo que es entendible.
Este es el html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="textarea.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form class='contacto' name="form1" id="formulario" form method="post" action="#">
<input type="hidden" name="id" value="formdeyro">
<div>
<input type="text" name="nombre" id="nombre" size="49" value="Nombre" onfocus="if(this.value=='Nombre')this.value='';" onblur="if(this.value=='')this.value='Nombre';">
</div>
<div>
<input type="text" name="email" id="email" size="49" value="E-mail" onfocus="if(this.value=='E-mail')this.value='';" onblur="if(this.value=='')this.value='E-mail';">
</div>
<div id="mensaje">
<textarea class="textarea" name="comentario" cols="30" rows="8" id="comentario" onfocus="if(this.value=='Escriba aquí su mensaje')this.value='';" onblur="if(this.value=='')this.value='Escriba aquí su mensaje';">Escriba aquí su mensaje</textarea>
<div class="botones">
<input type='enviar' value="Enviar" onclick="document.getElementById('formulario').sub mit()" />
<input type="reset" value="Borrar" />
</div>
</div>
</form>
</body>
y este es el CSS:
.contacto {
background: #e6e6e6;
width: 300px;
border-radius: 6px;
padding: 5px;
}
#mensaje{
background:#fff;
margin: 5px;
padding: 5px 5px 50px 5px;
border-radius: 6px;
}
.textarea{
font-family: Arial, Helvetica, sans-serif;
width:280px;
border:none;
resize:none;
}
.botones{
float: right;
}
.contacto input[type='text']{
background-color: #fff;
padding: 7px 6px;
width: 176px;
border: none;
border-radius: 6px;
resize: none;
margin: 5px;
}
.contacto input[type='text']:focus{
background-color: #FFC;
outline: none;
box-shadow:0 0 0 2px #037803;
}
.contacto input[type='enviar']{
float:right;
text-align:left;
margin: .4em;
width: 80px;
height: 20px;
padding: 7px;
border: 1px solid #037803;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #fff;
background: #26ba05;
background: url(images/flecha.png) no-repeat right center, -moz-linear-gradient(45deg, #26ba05 60%, #42f51d 85%) !important;
background: url(images/flecha.png) no-repeat right center, -webkit-linear-gradient(45deg, #26ba05 60%, #42f51d 85%);
}
.contacto input[type='enviar']:hover{
background: #28ea00;
background: url(images/flecha.png) no-repeat right center, -moz-linear-gradient(45deg, #42f51d 15%, #26ba05 40%) !important;
background: url(images/flecha.png) no-repeat right center, -webkit-linear-gradient(45deg, #42f51d 15%, #26ba05 40%);
}
.contacto input[type='enviar']:active{
background: #42f51d;
background: url(images/flecha.png) no-repeat right center, -moz-linear-gradient(45deg, #42f51d 60%, #28ea00 85%) !important;
background: url(images/flecha.png) no-repeat right center, -webkit-linear-gradient(45deg, #42f51d 60%, #28ea00 85%);
}
input[type='reset']{
float:right top;
text-align:left;
margin: .4em;
width: 80px;
height: 20px;
padding: 7px;
border: 1px solid #d9d9d9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #000;
background: #e6e6e6;
background: url(images/flecha.png) no-repeat right center, -moz-linear-gradient(45deg, #e6e6e6 60%, #d9d9d9 85%) !important;
background: url(images/flecha.png) no-repeat right center, -webkit-linear-gradient(45deg, #e6e6e6 60%, #d9d9d9 85%);
}
.contacto input[type='reset']:hover{
background: #c2c2c2;
background: url(images/flecha.png) no-repeat right center, -moz-linear-gradient(45deg, #d9d9d9 15%, #e6e6e6 40%) !important;
background: url(images/flecha.png) no-repeat right center, -webkit-linear-gradient(45deg, #d9d9d9 15%, #e6e6e6 40%);
}
.contacto input[type='reset']:active{
background: #d9d9d9;
background: url(images/flecha.png) no-repeat right center, -moz-linear-gradient(45deg, #d9d9d9 60%, #c2c2c2 85%) !important;
background: url(images/flecha.png) no-repeat right center, -webkit-linear-gradient(45deg, #d9d9d9 60%, #c2c2c2 85%);
}
Cualquier sugerencia será bienvenida. Quedan libres para usar este código si lo desean (mejorado, obviamente).
¡Muchas gracias!