Transfer Search Box From Old Website to New Website

Question

I am working for this company that has hired me to turn a new home page design of theirs into html and css. In the design they gave me there is a search box in the header that they would like to be same as the one on their current webpage (http://shop.manorfinewares.com/intro.html). I am unsure how to navigate their current page's source code in order to successfully transfer the search box to the new page I am designing for them. Here is the header code that I have so far...

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:

<div id="header">
        <div id="headerContainer">
         <div class="headerUtilityContainer">
          <img src="images/manorSocialButtons.png" />
         </div>
         <div class="headerLogoContainer">
          <img src="images/homePageLogo.png"/>
         </div>
         <div class="searchContainer">
         LOGIN / REGISTER  CART (0)
         </div>
        </div>
       </div>

ANY advice will be very helpful as I am not sure where to start. I have never worked with XLS search bars in the past

Answer 1

It's still unclear as to what exactly you want, a right floated search bar with clear icon on input? I have created this fiddle for you, it replicates the behaviour of site you mentioned.

http://jsfiddle.net/DP22Y/

HTML

<div id="container">
   <div id="utility">Utility</div><!-- 
--><div id="logo">Logo</div><!-- 
--><div id="search">LOGIN / REGISTER | CART (0)
        <span class="clearable">
            <input class="data_field" type="text" name="search" placeholder="Search..."/>
            <span class="icon_clear">x</span>
        </span>
    </div>    
</div>

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('');
});

As far as the functionality is concerned, that is a different question altogether. That depends on what language you are using, do you want to make the results appear on page reload or without that using ajax, whats the db scheme etc. But the basic search would be something like this

1. Wrap search field with a form
2. Set an action and method for the form
3. Action will be the page the search results will be shown on