Cloning Google Suggest With Ajaxac

Applying Styles To Our Html

Now we style the HTML we created in the previous step. Here’s the CSS, then I’ll briefly explain it. This code goes in googlesuggestclone.css.

form { margin : 0; }
input { vertical-align : middle; }
#fq {
    width : 300px; font-family : Arial, sans-serif;
    font-size : 13px; padding-left : 4px;
}
 
#search-results {
    width : 306px; border : 1px solid #000;
    margin-top : -1px; float : left;
}
 
* html div#search-results { width : 307px; } /* box model hack */
 
.sr, .srs {
    width : 100%; float : left; font-family : Arial, sans-serif;
    font-size : 13px; padding : 1px 0 0 0;
}
.sr { background-color : #fff; color : #000; }
.srs { background-color : #36c; color : #fff; cursor : pointer; }
.sr .src { color : #008000; }
.srs .src { color : #fff; }
.srt { float : left; font-size : 13px; margin-left : 4px; }
.src { float : right; font-size : 10px; margin-right : 3px; padding-top : 2px; }
 
form { margin : 0; }
input { vertical-align : middle; }
#fq { width : 300px; font-family : Arial, sans-serif; font-size : 13px; }

Firstly we remove the margin from forms. This is just a personal habit as margins on forms are a pet hate of mine! We then apply vertically align form inputs in the middle, so the text input and the submit button line up correctly.

Now, in order to clone Google Suggest correctly, we need to style our font in 13px Arial. Their form input, and dropdown results use this style.

The search-results div is given the same width as the query input as it needs to line up exactly. Additionally, we make the top margin -1 so it overlaps on the border.

Finally, we style the various search result colours and styles. The result count is right aligned, while the term is left aligned. To achieve this in a valid XHTML solution, we use left and right floats. We also have to float the containing div so correct alignment is maintained.

We will alter this later so the search-results div is hidden by default.

• Next: Beginning The Googlesuggestclonejax Application