Transferir el cuadro de búsqueda del sitio web antiguo al nuevo sitio web

Estoy trabajando para esta empresa que me contrató para convertir un nuevo diseño de página de inicio en html y css. En el diseño que me dieron hay un cuadro de búsqueda en el encabezado que les gustaría ser igual que el de su página web actual ( http://shop.manorfinewares.com/intro.html ). No estoy seguro de cómo navegar el código fuente de su página actual para transferir con éxito el cuadro de búsqueda a la nueva página que estoy diseñando para ellos. Aquí está el código de encabezado que tengo hasta ahora …

CSS:

#header{ position:absolute; width:100%; top:0; height:107px; min-width:600px; border-bottom: 1px dotted #86beca; } #headerContainer{ position:relative; width:100%; margin:0 auto; top:0; height:107px; max-width:1280px; min-width:600px; border-bottom: 1px dotted #86beca; } .headerUtilityContainer{ float:left; padding-top:4px; margin-left:8%; width:22%; height:103px; } .headerUtilityContainer img{ float:left; margin-top:2px; width:40%; height:9px; } .headerLogoContainer{ float:left; margin:0px; width:40%; height:107px; } .headerLogoContainer img { display:block; margin-top:30px; margin-left:auto; margin-right:auto; width: 55%; max-width:250px; height: 57%; } .searchContainer{ float:left; text-align:right; font-size:70%; padding-top:4px; margin-right:8%; width:22%; height:103px; } .headerBorderDiv{ float:left; width:100%; margin:0 auto; padding:0px; height:2px; border-bottom: 1px dotted #86beca; 

HTML:

  

CUALQUIER consejo será muy útil ya que no estoy seguro de dónde empezar. Nunca he trabajado con barras de búsqueda XLS en el pasado

Todavía no está claro qué es exactamente lo que quiere, ¿una barra de búsqueda flotante derecha con un icono claro en la entrada? He creado este violín para ti, replica el comportamiento del sitio que mencionaste.

 http://jsfiddle.net/DP22Y/ 

HTML

 
Utility

CSS

 #container{ margin:0 auto; height:100px; width:80%; } #utility, #logo, #search{ box-sizing: border-box; color:#000; height:100%; float:left; } #utility{ background:#f1f1f1; width:33.3%; padding:10px; } #logo{ background:#e0e0e0; width:33.3%; padding:10px; } #search{ background:#e9e9e9; width:33.3%; padding:10px; text-align:right } #search > #data_field{ margin:10px 0 10px; padding:5px; width:100px; float:right; } span.icon_clear{ position:absolute; right:10px; top:0px; display:none; cursor:pointer; font: bold 1em sans-serif; color:#38468F; } span.icon_clear:hover{ color:#f52; } .clearable{ position:relative; } .data_field{ padding-right:17px; /* add space for the 'x' icon*/ width:100px; } 

jQuery

 $(document).on('propertychange keyup input paste', 'input.data_field', function(){ var io = $(this).val().length ? 1 : 0 ; $(this).next('.icon_clear').stop().fadeTo(300,io); }).on('click', '.icon_clear', function() { $(this).delay(300).fadeTo(300,0).prev('input').val(''); }); 

En lo que se refiere a la funcionalidad, esa es una pregunta completamente diferente. Eso depende de qué idioma estés usando, ¿quieres que los resultados aparezcan en la recarga de la página o sin eso usando ajax, cuál es el esquema de db, etc.? Pero la búsqueda básica sería algo como esto

  1. Ajustar el campo de búsqueda con un formulario
  2. Establezca una acción y método para el formulario
  3. La acción será la página en la que se mostrarán los resultados de búsqueda