Alinear input type text con boton type image

Naica · #1 (**permalink**) 19/10/2011, 07:37

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

amdisenoweb · #2 (**permalink**) 19/10/2011, 08:17

Has probado a ponerlo en una tabla de una fila y 2 columnas??

Naica · #3 (**permalink**) 19/10/2011, 08:20

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

IsaBelM · #4 (**permalink**) 19/10/2011, 08:21

usa vertical-align: middle

Naica · #5 (**permalink**) 19/10/2011, 08:26

Cita:

Iniciado por IsaBelM

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

IsaBelM · #6 (**permalink**) 19/10/2011, 08:33

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

Naica · #7 (**permalink**) 19/10/2011, 08:45

Cita:

Iniciado por IsaBelM

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

IsaBelM · #8 (**permalink**) 19/10/2011, 12:55

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

Reyphp · #9 (**permalink**) 19/10/2011, 14:07

hola amigo aqui tienes un codigo espero que te sirva:

Código HTML:

Ver original<html>
<head>
<title>Buscar</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="cuadro">
<form name="buscar" action="Buscar.php" method="get">
<input id="buscartext" type="text" name="frase" value="Buscar" />
<input id="buscarboton" type="button" name="buscar" value="Buscar" />
</form>
</div>
</body>
</html>

Código CSS:

Ver original* { margin: 0px; padding: 0px; border: 0px }
body { text-align: center } /* esto es para que internet explorer centre el cuadro del buscador */
/* este cuadro es el div que centra en buscador puedes borrar este codigo pero en el navegador no te saldra centrado */
#cuadro {
margin: 50px auto;
width: 300px;
height: auto;
}
/* fin del cuadro es el div que centra en buscador */
 
/* este es el cuadro donde las personas ponen lo que va a buscar */
#buscartext {
border: 1px solid #8bce57;
float: left;
width: 200px;
height:30px;
}
/* fin del cuadro donde las personas ponen lo que va a buscar */
 
/* esto sirve para cuando el puntero este sobre el campo de texto de un lijero cambio de color */
#buscartext:hover {
border: 1px solid #70c52e;
}
 
/* este es el boton buscar */
#buscarboton {
margin-left: 10px;
float: left;
width: 80px;
height: 30px;
color: #fff;
font-size: 14px;
font-weight: bold;
background-image: url(boton.png);
cursor: pointer
}
/* fin de el boton buscar */
 
/* esto sirve para que cuando las personas pongan el puntero sobre el boton buscar este de un ligero cambio de color */
#buscarboton:hover {
background-image: url(boton-activo.png)
}

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

Naica · #10 (**permalink**) 19/10/2011, 20:33

Cita:

Iniciado por IsaBelM

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!

Reyphp · #11 (**permalink**) 20/10/2011, 11:08

Cita:

Iniciado por Naica

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<div id="cuadro">
<form name="buscar" action="Buscar.php" method="get">
<input id="buscartext" type="text" name="frase" value="Buscar" />
<input id="buscarboton" type="button" name="buscar" value="Buscar" />
</form>
</div>

Código CSS:

Ver original#cuadro {
margin: 0px;
width: 300px;
height: auto;
}
/* fin del cuadro es el div que centra en buscador */
 
/* este es el cuadro donde las personas ponen lo que va a buscar */
#buscartext {
border: 1px solid #8bce57;
float: left;
width: 200px;
height:30px;
}
/* fin del cuadro donde las personas ponen lo que va a buscar */
 
/* esto sirve para cuando el puntero este sobre el campo de texto de un lijero cambio de color */
#buscartext:hover {
border: 1px solid #70c52e;
}
 
/* este es el boton buscar */
#buscarboton {
margin-left: 10px;
float: left;
width: 80px;
height: 30px;
color: #fff;
font-size: 14px;
font-weight: bold;
background-image: url(boton.png);
cursor: pointer
}
/* fin de el boton buscar */
 
/* esto sirve para que cuando las personas pongan el puntero sobre el boton buscar este de un ligero cambio de color */
#buscarboton:hover {
background-image: url(boton-activo.png)
}

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 }