Local Search styles

[smeranda]

A while back, I was asked to submit the styles and XHTML used to create our search box at http://admissions.unl.edu. At the time, I was still in the process of testing a few tweaks. These tweaks are now complete -- as is the search engine -- so here is my final code (as well as some ramblings about its use):

We originally had the search box under the navigation. We found it to be used in-frequently, while still receiving minor navigation complaints. Based on analytical reports the top search phrase was 'apply', which was is also the first navigation item. Due to this, and a few other discoveries, it was decided to move the search box to a more prominent position (at the top of the navigation). The XHTML code for the search box was placed in the navigation include file (before the <ul>):

Code: Select all

<div>
 <form>
    <label>Search this site</label>
   <input>
    <input>
 </form>
</div>

The code is pretty straight-forward (for some reason, the BB is stripping the code, so here are the relevant elements assigned to each tag):

1. A div to hold the form.
   
   1. id="local_search"
2. The form element itself.
   
   1. id="searchform"
3. An label.
   
   1. for="localsearchinput"
4. An input box.
   
   1. id="localsearchinput"
5. A submit button (in this case an image)
   
   1. id="searchbtn"

Then the CSS to control the apperance:

Code: Select all

#localsearchinput {
   width:200px;
   height:15px;
   background-image:url(/images/searchTextBG.png);
   background-repeat:repeat-x;
   border:1px #999999 solid;
   position:relative;
   padding:2px 2px 2px 2px;
}
#localsearchinput:hover {
   border:1px #FFD900 solid;
}
#searchbtn {
   position:absolute;
   float:right;
   top:53px;
   left:190px;
   background-image:url(/images/searchButtonBG.png);
   background-repeat:no-repeat;
   width:35px;
   z-index:9;
}

This is also pretty straight-forward. A small note, the :hover element on the #localsearchinput won't work in IE6, so consider it an enhancement for individuals using better browsers.

Please feel free to incorporate this in your site. If you have any questions, let me know.