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";
}