Hacer input text para Busqueda que se Ajuste al Resolucion 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>
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";
}
