Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Ayuda con botones de envío y borrar!

CSS - Ayuda con botones de envío y borrar!

Volver
Nuevo Tema
<<>>
 
Vista:

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:
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Ayuda con botones de envío y borrar!

Publicado por Alejandro (2 intervenciones) el 26/03/2012 21:30:34
Me autorrespondo para que vean lo obtuso que podemos ser cuando el error aparece frente a nuestras narices.

Las sentencias " input type='enviar' " del HTML e " input[type='enviar'] " del CSS son erróneas. Lo correcto es reemplazar la palabra enviar por submit. Luego hay que corregir los valores de width y heigth para acomodar el tamaño de los botones y listo.

Vuelvo a repetir: El código está disponible para quien quiera usarlo, su diseño es original y no lo he visto en ningún formulario de páginas conocidas. Si vieron algo parecido, avísenme, así puedo ver cómo puedo mejorar mi codificación.

Gracias!!!
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
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con botones de envío y borrar!

Publicado por xve (490 intervenciones) el 26/03/2012 22:27:45
jejejeje... a mi tambien me han pasado error similares...;) siempre hay que dejar pasar unas hora o un dia para verlo con mas claridad...
Gracias por comentarlo...
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