Pages

Thursday, February 3, 2011

Slick Interface

<div id="nav">

<a href="">Hospitality</a>
<a href="">Financial</a>
<a href="">Energy</a>

<div id="search-box">
<input id="box"/>
<input type="button" value="Search" id="button"/>
</div>

</div>


<style>
/* nav */
#nav { border: 1px solid #aaa; border-radius: 8px; background: gold; overflow: auto; padding: 10 10px;}
#nav a { text-decoration: none; padding: 4 10 2 10; font: 16px arial; font-weight: bold; color: blue; border-radius: 10px;}
#nav a:hover { background: #99f; color: white; }

#search-box { display: inline; float: right; border: 1px solid #aaa; border-radius: 4px; background: cornsilk; padding: 5px; margin: -5px; }
#box { border: 1px solid #aaa; border-radius: 4px; padding: 2px;}
#box:hover { border: 1px solid #55f; }

#button { border: 1px solid #ccc; border-radius: 4px; font: 12px arial; padding: 2px; background: azure; }
#button:hover { background: #efa; cursor: pointer; }

html { background: #58f; }
html, div { margin: 0px; }
</style>

No comments:

Post a Comment