codificando una barra de búsqueda con ícono dentro de ella

Estoy intentando codificar el siguiente diseño. He arruinado el código y no estoy seguro de cuál es la mejor manera de hacerlo.codificando una barra de búsqueda con ícono dentro de ella

alt text

<div class="search-wrapper"> 
     <form action="search.php" method="get" name="search"> 
      <div class="search-box"><img class="search-icon" src="images/search-icon.png" width="21" height="18" alt="search icon" /> 
      <input name="seach" type="text" value="Search for dishes or restaurants" /> 
      </div> 
      <input class="submit-button" name="Go" type="submit" /> 
     </form> 
     </div> 



#search { 
    height:125px; 
    overflow:hidden; 
} 
.search-wrapper { 
    width:465px; 
    height:45px; 
    background-color:#f0f0f0; 
    margin:43px auto 0; 
    border:1px solid #e9e9e9; 
    -moz-border-radius: 5px; /* FF1+ */ 
    -webkit-border-radius: 5px; /* Saf3-4 */ 
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */ 
    position:relative; 
} 
.search-box { 
    width:375px; 
    height:32px; 
    background-color:#fff; 
    margin:5px 7px; 
    border:1px solid #cfcfcf; 
    -moz-border-radius: 5px; /* FF1+ */ 
    -webkit-border-radius: 5px; /* Saf3-4 */ 
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */ 
    position:relative; 
} 
.search-box img.search-icon { 
    margin:8px 0 0 5px; 
} 
.search-box input { 
    border:none; 
    height:30px; 
    width:332px; 
    margin:0; 
    position:absolute; 
    font-size:16px; 
    padding-left:5px; 
    padding-right:5px; 
} 
input.submit-button { 
    background:url(../images/go-button.png) no-repeat; 
    text-indent:-9999px; 
    border:none; 
    height:32px; 
    width:68px; 
    position:absolute; 
    top:6px; 
    left:390px; 
    cursor:pointer; 
//right:15px; 
}

Aquí está el código de bin @ pegar:

http://pastebin.com/KQR3mPiW

Imágenes:

http://bayimg.com/IAPcpAACi

http://bayimg.com/JapcBaAci

Fuente

2010-10-02 Harsha M V

Intente cargar las imágenes relevantes en algún lugar que estén conectadas en caliente (recomiendo http // bayimg.com, ya que también le permiten especificar un código de eliminación y, obviamente, le permiten eliminarlas). Tal como están las cosas, tu CSS funciona bastante bien (aunque parece detallado), es solo el botón de enviar lo que hay que hacer. –

agregó los enlaces de la imagen: D –

Aquí yo vaya: http://jsfiddle.net/SjafT/

Vista previa:

alt text

Usted puede cambiar el valor de 'reajustar en jsFiddle' parte.

Fuente

2010-10-02 13:31:44

:(¿por qué ha cortado la imagen y la ha vuelto a hacer? Aquí está la imagen http://image.bayimg.com/iapcpaaci.jpg el código es tan simple no como el mío :) solo preguntándose acerca de la imagen –

solo porque jpeg no es transparente –

¿Por qué usan

position: absolute;

? Uso

position: relative; float: left;

con el cuadro de búsqueda y lo mismo con el botón. No se requerirá ninguna especificación de margen tampoco.

Fuente

2010-10-02 13:19:08 bogatyrjov

codificando una barra de búsqueda con ícono dentro de ella

Respuesta

Cuestiones relacionadas