Foros del Web » Creando para Internet » CSS »

Alinear input type text con boton type image

Estas en el tema de Alinear input type text con boton type image en el foro de CSS en Foros del Web. Hola, tengo un problema al poner un input type text y al lado un boton type image, el boton nunca queda alineado y no sé ...
  #1 (permalink)  
Antiguo 19/10/2011, 08:37
 
Fecha de Ingreso: junio-2010
Mensajes: 49
Antigüedad: 9 años, 5 meses
Puntos: 3
Busqueda Alinear input type text con boton type image

Hola, tengo un problema al poner un input type text y al lado un boton type image, el boton nunca queda alineado y no sé como solucionarlo.



Les dejo el código del formulario:

Código:
#busqueda {
  border:1px solid #BABABA;
  height:25px;
}
Código HTML:
<div align="center"><form name="buscar" action="***" method="get"> <input id="busqueda" type="text" size="40" value="***" name="frase" /> <input type="image" src="Imagenes/btnbuscar.jpg"name="buscar" value="Buscar" /></form></div> 



Gracias!! espero que puedan ayudarme a solucionar esto
__________________
Naica enciclopedia animal
  #2 (permalink)  
Antiguo 19/10/2011, 09:17
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: Alinear input type text con boton type image

Has probado a ponerlo en una tabla de una fila y 2 columnas??
  #3 (permalink)  
Antiguo 19/10/2011, 09:20
 
Fecha de Ingreso: junio-2010
Mensajes: 49
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: Alinear input type text con boton type image

Gracias, me funcionó, pero no sé si es buena idea utilizar tablas, leí a muchos usuarios que recomendaban no utilizar tablas, no sé si este será el caso.

Gracias por tu ayuda
__________________
Naica enciclopedia animal
  #4 (permalink)  
Antiguo 19/10/2011, 09:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 4 meses
Puntos: 1011
Respuesta: Alinear input type text con boton type image

usa vertical-align: middle
  #5 (permalink)  
Antiguo 19/10/2011, 09:26
 
Fecha de Ingreso: junio-2010
Mensajes: 49
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: Alinear input type text con boton type image

Cita:
Iniciado por IsaBelM Ver Mensaje
usa vertical-align: middle
Gracias pero ahora el boton en vez de estar arriba quedo abajo del input =P

Probe en diferentes navegadores lo de la tabla y quedaba en distintas posiciones, en Chrome y en IE estaba todo bien, pero en Firefox quedaba el boton abajo.

Ah pero en IE me queda el texto del input arriba en vez del medio a la izquierda =P
__________________
Naica enciclopedia animal
  #6 (permalink)  
Antiguo 19/10/2011, 09:33
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 4 meses
Puntos: 1011
Respuesta: Alinear input type text con boton type image

asigna, por ejemplo, una id al input image
Cita:
#busqueda {
border:1px solid #BABABA;
height:25px;
vertical-align: middle;
}

#img {
vertical-align: middle
}
por otro lado, quita align="center" del bloque contenedor, está desfasado. en su lugar usa margin
  #7 (permalink)  
Antiguo 19/10/2011, 09:45
 
Fecha de Ingreso: junio-2010
Mensajes: 49
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: Alinear input type text con boton type image

Cita:
Iniciado por IsaBelM Ver Mensaje
asigna, por ejemplo, una id al input image


por otro lado, quita align="center" del bloque contenedor, está desfasado. en su lugar usa margin
Quedaron alineados pero como centro algo con margin, yo utilizaba siempre align, es que margin no me da una opcion de centrar.

En IE me sigue quedando el texto del input para arriba, trate de centrarlo, mandarlo a la izquierda pero que siempre ahi xD

Saludos y muchas gracias por tu ayuda
__________________
Naica enciclopedia animal
  #8 (permalink)  
Antiguo 19/10/2011, 13:55
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 4 meses
Puntos: 1011
Respuesta: Alinear input type text con boton type image

si sólo tienes un bloque div
Cita:
div {
margin: 0 auto;
}
con respecto al problema que comentas en ie, estás usando un doctype??
  #9 (permalink)  
Antiguo 19/10/2011, 15:07
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 8 años, 3 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. <title>Buscar</title>
  2. <link href="css.css" rel="stylesheet" type="text/css" />
  3. </head>
  4. <div id="cuadro">
  5. <form name="buscar" action="Buscar.php" method="get">
  6. <input id="buscartext" type="text" name="frase" value="Buscar" />
  7. <input id="buscarboton" type="button" name="buscar" value="Buscar" />
  8. </form>
  9. </div>
  10. </body>
  11. </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
  #10 (permalink)  
Antiguo 19/10/2011, 21:33
 
Fecha de Ingreso: junio-2010
Mensajes: 49
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: Alinear input type text con boton type image

Cita:
Iniciado por IsaBelM Ver Mensaje
si sólo tienes un bloque div


con respecto al problema que comentas en ie, estás usando un doctype??
Si estoy usando doctype, el margin no me funciono.


Reyphp gracias por el código pero no me funciona, centra todo lo que hay en la web.

Gracias a todos!
__________________
Naica enciclopedia animal

Última edición por Naica; 19/10/2011 a las 21:43
  #11 (permalink)  
Antiguo 20/10/2011, 12:08
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Alinear input type text con boton type image

Cita:
Iniciado por Naica Ver Mensaje
Si estoy usando doctype, el margin no me funciono.


Reyphp gracias por el código pero no me funciona, centra todo lo que hay en la web.

Gracias a todos!
si solo tenias que borrarle todo lo que lo sentra aqui esta pero sin sentrar la web cualquier cosa me avisa si te sirvio o no o puedes pasar el enlace de tu web y es mejor

aqui esta el codigo intenta con este:


Código HTML:
Ver original
  1. <div id="cuadro">
  2. <form name="buscar" action="Buscar.php" method="get">
  3. <input id="buscartext" type="text" name="frase" value="Buscar" />
  4. <input id="buscarboton" type="button" name="buscar" value="Buscar" />
  5. </form>
  6. </div>

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

en caso de que lo pongas y en tu web no se vea bien entonses pones esto al principio de tu hoja de estilo, pero en caso de que el codigo anterior sirva no pones el codigo acontinuacion

* { margin: 0px; madding: 0px; border: 0px }

Etiquetas: input, buscadores, botones, busquedas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:40.