+ Responder Tema
Resultados 1 al 1 de 1

Tema: Problema con los botones Borrar y Enviar

  1. #1
    Conociendo a la comunidad masmorsa va por un camino distinguido Avatar de masmorsa
    Fecha de Ingreso
    26 mar, 12
    Mensajes
    2
    Descargas
    0
    Subidas
    0

    Predeterminado Problema con los botones Borrar y Enviar

    Hola a todos. Quisiera saber si alguien me puede ayudar con un problemita. 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!

  2. #2
    Conociendo a la comunidad masmorsa va por un camino distinguido Avatar de masmorsa
    Fecha de Ingreso
    26 mar, 12
    Mensajes
    2
    Descargas
    0
    Subidas
    0

    Predeterminado Re: Problema con los botones Borrar y Enviar

    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!!!

+ Responder Tema

Temas Similares

  1. Hola
    Por santimartinj en el foro Presentaciones
    Respuestas: 0
    Último Mensaje: 04/08/2013, 20:07
  2. Hola
    Por hvasquez2710 en el foro Presentaciones
    Respuestas: 0
    Último Mensaje: 15/08/2012, 18:03

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes

1 2 3 4 5 6 7 8 9 10 11 12 13 14