Foros del Web » Creando para Internet » CSS »

Alinear busqueda fields y botones

Estas en el tema de Alinear busqueda fields y botones en el foro de CSS en Foros del Web. Hola chicos, una vez mas vengo a pedir su ayuda ccs' sera jijijiji. Estoy tratando de alinear unos campos de busqueda y un boton, mas ...
  #1 (permalink)  
Antiguo 18/11/2010, 20:07
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 472
Antigüedad: 17 años, 2 meses
Puntos: 25
Alinear busqueda fields y botones

Hola chicos, una vez mas vengo a pedir su ayuda ccs' sera jijijiji.

Estoy tratando de alinear unos campos de busqueda y un boton, mas o menos asi como en ebay:


Como ven el campo de busqueda, de filtros y el boton estan bien alineaditos, y por mas ke he kerido no he podido ke me keden asi, alguien podria plis hecharme una manita? El codigo ke tengo yo es algo asi:

Código HTML:
Ver original
  1. <div id="search">
  2.     <form action="1.php" method="post">
  3.       <input type="text" style="width:300px; border:1px solid #F00; height:20px; padding:3px 0; margin:4px 5px 4px 10px; vertical-align: middle;" />
  4.       <select name="" class="grayfont" style="height:28px; padding:4px 2px;">
  5.       <option selected="selected">Todas Las Categorias</option>
  6.       <option value="1">Antiguedades</option>
  7.       <option value="2">Arte</option>
  8.       <option value="3">Bebes</option>
  9.       <option value="4">Libros</option>
  10.       <option value="5">Negocio e Industria</option>
  11.     </select>
  12.     <a href=""><input type="submit" value="" class="christmas" /></a>
  13.     </form>
  14. </div>

Código CSS:
Ver original
  1. #search { background:url(../images/search_bg.jpg); height:35px; width:974px; margin:0 auto; padding:0 8px; }
  2. .christmas { border:0; color:#FFF; height:28px; width:80px; background: url(../images/buscar.png); }
  3. .christmas:hover { background-position: 0 -25px;}

Alguna alma caritativa ke pudiera ayudarme? Me estoy rompiendo la cabeza con eso XD

Mil gracias chicos !!!
__________________
٩(͡๏̯͡๏)۶ || ٩(͡๏̯͡๏)۶
  #2 (permalink)  
Antiguo 18/11/2010, 21:24
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Alinear busqueda fields y botones

Hola, lo que necesitas hacer es que los elementos "floten" dentro de la div, es decir se vallan poniendo uno al lado del otro.

Mira este LINK, que habla sobre lo que es el "FLOAT" y si tienes mas dudas postea el codigo.

Saludos y Suerte
  #3 (permalink)  
Antiguo 18/11/2010, 22:33
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 472
Antigüedad: 17 años, 2 meses
Puntos: 25
Respuesta: Alinear busqueda fields y botones

Puedo flotar los <input> y <select> ?

Eso no lo sabia, como se podria hacer disculpa rodomiro?
__________________
٩(͡๏̯͡๏)۶ || ٩(͡๏̯͡๏)۶
  #4 (permalink)  
Antiguo 19/11/2010, 01:09
 
Fecha de Ingreso: diciembre-2009
Mensajes: 53
Antigüedad: 14 años, 2 meses
Puntos: 4
Respuesta: Alinear busqueda fields y botones

Simplemente debería hacer lo que se comenta en el enlace que te ha puesto @rodomiro y flotar los elementos a la izquierda con un float: left;

Prueba y nos cuentas a ver que tal !
  #5 (permalink)  
Antiguo 19/11/2010, 11:34
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 472
Antigüedad: 17 años, 2 meses
Puntos: 25
Respuesta: Alinear busqueda fields y botones

Haber chicos, ya he flotado divs pero no he flotado campos de este tipo, pregunta, el codigo es:
Código HTML:
Ver original
  1. <div id="search">
  2.     <form action="1.php" method="post">
  3.       <input type="text" style="width:300px; border:1px solid #F00; height:20px; padding:3px 0; margin:4px 5px 4px 10px; vertical-align: middle;" />
  4.       <select name="" class="grayfont" style="height:28px; padding:4px 2px;">
  5.       <option selected="selected">Todas Las Categorias</option>
  6.       <option value="1">Antiguedades</option>
  7.       <option value="2">Arte</option>
  8.       <option value="3">Bebes</option>
  9.       <option value="4">Libros</option>
  10.       <option value="5">Negocio e Industria</option>
  11.     </select>
  12.     <a href=""><input type="submit" value="" class="christmas" /></a>
  13.     </form>
  14. </div>

Debo de flotar el select y el boton input? Debe de tener el div ke contiene todo alguna especificacion o algo? Disculpen si insisto pero no entiendo del todo flotar inputs y eso. Si trato de flotar el select ahi numas me lo avienta a la izquierda y ahi se keda.
__________________
٩(͡๏̯͡๏)۶ || ٩(͡๏̯͡๏)۶
  #6 (permalink)  
Antiguo 19/11/2010, 12:56
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Alinear busqueda fields y botones

Te dejo un ejemplo:

#search input {
background-color:#000;
}

Eso hace que todos los INPUT de la DIV tengan fondo negro, ahora si lo quieres hacer mas expecifico, asignales una clase:

HTML:
<input class="cuadro" type="text"/>

CSS:
.cuadro {
background-color:#000;
}

Saludos, cualquier cosa postea.

p.d: En vez de background puede ser float:left;
  #7 (permalink)  
Antiguo 19/11/2010, 15:06
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 472
Antigüedad: 17 años, 2 meses
Puntos: 25
Respuesta: Alinear busqueda fields y botones

Bueno, a final de cuentas evite los float y use position, para no romperme tanto la cabeza, mil gracias chicos !!!
__________________
٩(͡๏̯͡๏)۶ || ٩(͡๏̯͡๏)۶

Etiquetas: alinear, botones, fields, 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




La zona horaria es GMT -6. Ahora son las 09:01.