Tema: Alinear input type text con boton type image
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 19/10/2011, 14:07
Reyphp
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 13 años, 4 meses
Puntos: 1
Respuesta: Alinear input type text con boton type image
hola amigo aqui tienes un codigo espero que te sirva:

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <title>Buscar</title>
  4. <link href="css.css" rel="stylesheet" type="text/css" />
  5. </head>
  6. <body>
  7. <div id="cuadro">
  8. <form name="buscar" action="Buscar.php" method="get">
  9. <input id="buscartext" type="text" name="frase" value="Buscar" />
  10. <input id="buscarboton" type="button" name="buscar" value="Buscar" />
  11. </form>
  12. </div>
  13. </body>
  14. </html>

Código CSS: 
Ver original
  1. * { margin: 0px; padding: 0px; border: 0px }
  2. body { text-align: center } /* esto es para que internet explorer centre el cuadro del buscador */
  3. /* este cuadro es el div que centra en buscador puedes borrar este codigo pero en el navegador no te saldra centrado */
  4. #cuadro {
  5. margin: 50px auto;
  6. width: 300px;
  7. height: auto;
  8. }
  9. /* fin del cuadro es el div que centra en buscador */
  10.  
  11. /* este es el cuadro donde las personas ponen lo que va a buscar */
  12. #buscartext {
  13. border: 1px solid #8bce57;
  14. float: left;
  15. width: 200px;
  16. height:30px;
  17. }
  18. /* fin del cuadro donde las personas ponen lo que va a buscar */
  19.  
  20. /* esto sirve para cuando el puntero este sobre el campo de texto de un lijero cambio de color */
  21. #buscartext:hover {
  22. border: 1px solid #70c52e;
  23. }
  24.  
  25. /* este es el boton buscar */
  26. #buscarboton {
  27. margin-left: 10px;
  28. float: left;
  29. width: 80px;
  30. height: 30px;
  31. color: #fff;
  32. font-size: 14px;
  33. font-weight: bold;
  34. background-image: url(boton.png);
  35. cursor: pointer
  36. }
  37. /* fin de el boton buscar */
  38.  
  39. /* esto sirve para que cuando las personas pongan el puntero sobre el boton buscar este de un ligero cambio de color */
  40. #buscarboton:hover {
  41. background-image: url(boton-activo.png)
  42. }

aqui tienes un enlace para que lo puedas descargar:

http://www.mediafire.com/?dn4qd4za0022nv3


el codigo es libre se lo regalo a cualquira lo ise yo puden usarlo como quieran y sin la nesesidad de atribucion...


ME avisas si te sirvio amigo