asked on

Search Box and More CSS

Hello Experts
I was browsing thru live.com and was amazed by the look & feel they have brought in the site. As am not a CSS expert, could not understand lot of things, I am mainly looking at what they have used for searchbox and the more option in the news. Can somebody get me that CSS?

Thanks
Partha

GrandSchtroumpf

it's just a bunch of images.

0h4crying0utloud

here's the search bar css:

#searchBar{top:30px;position:absolute;text-align:center;width:95%}
#q,.advancedOptionsSearchEdit{border-left:1px solid #aaa;border-right:0;border-top:1px solid #aaa;border-bottom:1px solid #aaa;width:293px;height:19px;padding:1px 1px}
#searchform,.advancedOptionsSearchForm{padding:0;margin:0}#searchform nobr{padding:2px}
#searchform .image,.advancedOptionsSearchForm .image{margin-bottom:1px;border:1px solid #aaa}
.Mozilla #searchform .image,.Opera #searchform .image{margin-bottom:0}

search bar html:
<div id="searchBar">
<form id="searchform" action="http://www.live.com/"><nobr><input id="q" style="background-image:url(http://search.live.com/s/live/search_inputbackground.gif?v=3.6);"/><input class="image" type="image" align="absbottom" src="http://search.live.com/s/live/search_button_rest.gif?v=3.6" value="Search" /></nobr></form>
</div>

Cheers!
-Vinson Gracia

0h4crying0utloud

I cannot, for life of me, find where they put there hover effect css... could be in one of their many js files actually.

Cheers!
-Vinson Gracia

MrRio

@0h4crying0utloud: You're right, it was tucked away in some javascript file, I've converted it to plain CSS and made a simpler focus routine. The real live.com site gave the search box active state when it had focus OR hover. I've also done the little search button hover aswell. Only tested in firefox but this should give you enough to play around with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Live Search Bar</title>
<style type="text/css">
* { margin: 0; padding: 0; }

body { font-size: 76% }

#searchform .image
{
      border:1px solid #aaa;
      margin-bottom:0;

}

#searchBar
{
      top:30px;
      position:absolute;
      text-align:center;
      width:95%;
      height: 21px;
}
#q
{
      border-left:1px solid #aaa;
      border-right: 0px;
      border-top:1px solid #aaa;
      border-bottom:1px solid #aaa;
      width:293px;
      height:19px;
      padding:1px;
}
#searchform nobr
{
      padding:2px;
}

#q.active
{
border: 2px solid #D1FDCD;
padding: 1px;
border-left: 1px solid #54CE43;
border-right: 0px;
border-top: 1px solid #54CE43;
border-bottom: 1px solid #54CE43;
}
</style>
</head>

<body>
<div id="searchBar">
<form id="searchform" action="http://www.live.com/">
<nobr><input id="q" style="background-image:url(http://search.live.com/s/live/search_inputbackground.gif?v=3.6);" onfocus="this.className='active';" onblur="this.className='';" /><input id="searchButton" class="image" type="image" align="absbottom" src="http://search.live.com/s/live/search_button_rest.gif" value="Search" onmouseover="document.getElementById('searchButton').src = 'http://search.live.com/s/live/search_button_hover.gif'; document.getElementById('q').className='active';" onmouseout="document.getElementById('searchButton').src = 'http://search.live.com/s/live/search_button_rest.gif'; document.getElementById('q').className='';" /></nobr>
</form>
</div>
</body>
</html>

ASKER CERTIFIED SOLUTION

MrRio

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

p_partha

ASKER

Guys
Thanks for all the answers, Any idea on the <More> link on the news .

Partha

MrRio

The more link again cannot be done thru pure css. Would you just want the css to make the box itself or the javascript code to make it popup aswell?

p_partha