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
LVL 14
p_parthaAsked:
Who is Participating?
 
MrRioConnect With a Mentor Commented:
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
 
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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.