• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

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
0
p_partha
Asked:
p_partha
  • 3
  • 3
  • 3
  • +1
1 Solution
 
GrandSchtroumpfCommented:
it's just a bunch of images.
0
 
0h4crying0utloudCommented:
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
0
 
0h4crying0utloudCommented:

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
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
MrRioCommented:
@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><!--div#searchBar !-->
</body>
</html>
0
 
MrRioCommented:
Sorry, I got the glow effect wrong. It seems live.com adds a 2px border to the parent of #searchButton -- which is the <nobr> tag ?! Strange I know.

<!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;
}


.active #q
{

  border-left: 1px solid #54CE43;
  border-right: 0px;
  border-top: 1px solid #54CE43;
  border-bottom: 1px solid #54CE43;          
}


#qParent.active
{
  border: 2px solid #D1FDCD;
  padding: 0;
}

.active #searchButton
{
  border: 1px solid #54CE43;
}

</style>
</head>

<body>
<div id="searchBar">
  <form id="searchform" action="http://www.live.com/">
    <nobr id="qParent"><input id="q" style="background-image:url(http://search.live.com/s/live/search_inputbackground.gif?v=3.6);" onfocus="document.getElementById('qParent').className='active';" onblur="document.getElementById('qParent').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('qParent').className='active';" onmouseout="document.getElementById('searchButton').src = 'http://search.live.com/s/live/search_button_rest.gif'; document.getElementById('qParent').className='';" /></nobr>
  </form>
</div><!--div#searchBar !-->
</body>
</html>
0
 
p_parthaAuthor Commented:
Guys
Thanks for all the answers, Any idea on the <More> link on the news .

Partha
0
 
MrRioCommented:
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?
0
 
p_parthaAuthor Commented:
Can i get both, if am not asking for too much :)

Partha
0
 
0h4crying0utloudCommented:

That's a lot of trudging.

If MrRio does that for you, he should get more than 250 points!  :)
0
 
p_parthaAuthor Commented:
Thanks a lot
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now