Foros del Web » Creando para Internet » CSS »

Hacer input text para Busqueda que se Ajuste al Resolucion

Estas en el tema de Hacer input text para Busqueda que se Ajuste al Resolucion en el foro de CSS en Foros del Web. Lo que necesito hacer es un Campo de búsqueda, tipo AMAZON, que se expanda depende del tamaño de la resolución de la pantalla. Si se ...
  #1 (permalink)  
Antiguo 04/10/2012, 15:56
 
Fecha de Ingreso: abril-2007
Mensajes: 53
Antigüedad: 17 años, 6 meses
Puntos: 0
Exclamación Hacer input text para Busqueda que se Ajuste al Resolucion

Lo que necesito hacer es un Campo de búsqueda, tipo AMAZON, que se expanda depende del tamaño de la resolución de la pantalla.

Si se fijan en el campo de busqueda de amazon al agrandar o achicar la pantalla, el input se achica junto al boton GO todo junto..

El Input text lo logre hacer, que se estirara poniendo el input con css Background:transparent y abajo un div con un background blanco tipo input.. pero no logro qu eel boton GO se quede pegado al tamano del INPUT!..

Alguien sabe como puedo hacer?

Código HTML:
<!doctype html>
<html lang="es">
<head>
	<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="contenedor">
	<header>
		<div id="head">
				<div class="head-logo"><img src="images/logo.png"></div>
				<div class="head-srch">
					<div class="search img-sprite">
						<form action="#" method="post" class="nav-searchbar-inner">
						<input id="searchtextbox" type="text" value="" size="60px">
					</div>
						<div class="nav-submit-button img-sprite">
              				<input type="submit" value="Go" class="nav-submit-input" title="Go">
            			</div>
						</form>
					
				</div>
				<div class="head-cart">hggh</div>
		</div>	
	</header>
</div>
</body>
</html> 
EL CSS ES

Código HTML:
body{
	margin:0;
	font-family: verdana;
	font-size: 12px;
	color:black;
	background: white;
}
#contenedor{
	overflow: hidden;
	min-height: 600px;
	background: #f2f2f2;
	position: relative;
}
header{
	min-height: 94px;
	background-color:#070707;

}
#head{
	background:url(images/bck-header-full.jpg);
	background-position:center top;
	background-repeat: no-repeat;
	min-height: 94px;
}
#head .head-logo{
	float:left;
	min-height: 92px;
	width: 326px;

}
#head .head-srch{
	float:left;
	min-height: 92px;
	width: 50%;
	position:relative;
	background: peru;

}
#head .head-cart{
	float:left;
	min-height: 92px;
	width: 18%;
}
/* --- Buscador -------------*/
/* ### CAJA ###*/
#head .search{
	min-height: 32px;
	background-position: 0 -613px;
	margin: 30px 0;
	border-radius: 5px;

}
/* ### Barra Busqueda ###*/
#head .nav-searchbar-inner {
	margin: 10px 358px 0px 221px;
	height: 34px;
	position: relative;
	display: block;
	left:-205px;
}
/* ### BOX INPUT ###*/
#searchtextbox {
	margin: 7px 0 0 0;
	padding: 0;
	height: 23px;
	border: 0;
	min-width: 500%;
	font-family: "arial","sans-serif";
	font-size: 12pt;
	background: transparent;
	color: black;
	outline: 0;
	-webkit-appearance: none;
	position:relative;
	z-index: 59;
}
#head .img-sprite{
	background-image: url(images/img-sprite.png);
}
/* ### DIV BOTON ###*/
#head .nav-submit-button {
	height: 34px;
	overflow: hidden;
	background-position: 4px -288px;
	padding: 0 0 0 3px;
	margin: -42px 0 0 420px;
	position: absolute;

}
/* ### BOTON IR ###*/
#head .nav-submit-input {
	width: 39px;
	height: 34px;
	padding: 0;
	margin: 0;
	background: 0;
	border: 0;
	cursor: pointer;
	font-weight: bold;
	color: white;
	line-height: 12px;
	font-size: 13px;
	font-family: "arial","sans-serif";
}
  #2 (permalink)  
Antiguo 06/10/2012, 21:12
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 23 años
Puntos: 1
Respuesta: Hacer input text para Busqueda que se Ajuste al Resolucion

mira, esto se ajusta al 90% de la pantalla

input {
border: 0;
font-size: 12px;
padding: 6px 10px;
width: 90%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
resize: none;
outline: none;
}

espero te sirva
__________________
On error no hago nada porque deje de fumar...
  #3 (permalink)  
Antiguo 07/10/2012, 07:54
 
Fecha de Ingreso: marzo-2011
Mensajes: 345
Antigüedad: 13 años, 7 meses
Puntos: 28
Respuesta: Hacer input text para Busqueda que se Ajuste al Resolucion

Cita:
Iniciado por dieguicho Ver Mensaje
mira, esto se ajusta al 90% de la pantalla

input {
border: 0;
font-size: 12px;
padding: 6px 10px;
width: 90%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
resize: none;
outline: none;
}

espero te sirva
El float de css es es la solución creo (un float:left o float:right en el elemento).

Etiquetas: ajuste, html, input, tamaño, busquedas, txt, fondo
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 16:06.