p_partha
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
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
it's just a bunch of images.
here's the search bar css:
#searchBar{top:30px;positi on:absolut e;text-ali gn:center; width:95%}
#q,.advancedOptionsSearchE dit{border -left:1px solid #aaa;border-right:0;border -top:1px solid #aaa;border-bottom:1px solid #aaa;width:293px;height:19 px;padding :1px 1px}
#searchform,.advancedOptio nsSearchFo rm{padding :0;margin: 0}#searchf orm nobr{padding:2px}
#searchform .image,.advancedOptionsSea rchForm .image{margin-bottom:1px;b order: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:ur l(http://search.live.com/s/live/search_inputbackground.gif?v=3.6);"/><in put 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
#searchBar{top:30px;positi
#q,.advancedOptionsSearchE
#searchform,.advancedOptio
#searchform .image,.advancedOptionsSea
.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:ur
</div>
Cheers!
-Vinson Gracia
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
@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:ur l(http://search.live.com/s/live/search_inputbackground.gif?v=3.6);" onfocus="this.className='a ctive';" 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.getE lementById ('searchBu tton').src = 'http://search.live.com/s/live/search_button_hover.gif'; document.getElementById('q ').classNa me='active ';" onmouseout="document.getEl ementById( 'searchBut ton').src = 'http://search.live.com/s/live/search_button_rest.gif'; document.getElementById('q ').classNa me='';" /></nobr>
</form>
</div><!--div#searchBar !-->
</body>
</html>
<!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:ur
</form>
</div><!--div#searchBar !-->
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Guys
Thanks for all the answers, Any idea on the <More> link on the news .
Partha
Thanks for all the answers, Any idea on the <More> link on the news .
Partha
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?
ASKER
Can i get both, if am not asking for too much :)
Partha
Partha
That's a lot of trudging.
If MrRio does that for you, he should get more than 250 points! :)
ASKER
Thanks a lot