Ayuda con botones de envío y borrar!
Publicado por Alejandro (2 intervenciones) el 23/03/2012 23:54:44
Hola a todos. Quisiera saber si alguien me puede ayudar con un problemita. Le he dado mil vueltas, pero lamentablemente no consigo resolverlo.
Tengo un formulario de contacto hecho con divs completamente, pero al darle estilo, el botón Borrar me queda a la mitad del tamaño del botón Enviar. ¿Alguien podría revisar qué estoy haciendo mal? Eso si, les pido paciencia porque el código está un poco sucio, pero creo que es entendible.
Este es el html:
y este es el CSS:
Cualquier sugerencia será bienvenida.
¡Muchas gracias!
Tengo un formulario de contacto hecho con divs completamente, pero al darle estilo, el botón Borrar me queda a la mitad del tamaño del botón Enviar. ¿Alguien podría revisar qué estoy haciendo mal? Eso si, les pido paciencia porque el código está un poco sucio, pero creo que es entendible.
Este es el 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
<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="http://forms.melodysoft.com">
<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').submit()" />
<input type="reset" value="Borrar" />
</div>
</div>
</form>
</body>
y este es el 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
.contacto {
background: #e6e6e6;
width: 300px;border-radius: 6px;
padding: 5px;}#mensaje{background:#fff;
margin: 5px; padding: 5px 5px 50px 5px;border-radius: 6px;
}.textarea{
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.
¡Muchas gracias!
Valora esta pregunta
0
