Search box at the top 2 : Seach box « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Seach box

Search box at the top 2

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Biru_Manteb &raquo; Made Bay Kodokhunt aka Hendrawan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="hendrawan ak.a kodokhunt" />
<style type='text/css'>
/*Author Name: Hendrawan
  Author NickName: Kodokhunt
  URI 1:http://kodokhunt.blogsome.com
  URI 2:http://dot.choosen.net
  OFFICE 1:http://bascomp.org
  OFFICE 2:http://choosen.net
  */
/*---------------|||||||||||Global------------------------------------------------------*/
  
  body {
    margin:0 auto;
    margin-bottom: 30px;
    margin-top: 0px;
    background:#2763A5 url(Biru_Manteb-img/back.gif);
    }

  a {
    color: #6DA6E2;
    text-decoration: none;
    font-weight: bold;
    }

  a:hover {
    color:#2763A5;
    font-weight: bold;
    text-decoration: underline;
    }
    
/*---------------|||||||||||Container------------------------------------------------------*/

  #container {
    width: 750px;
    margin: 0 auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    margin-top:30px;
    color: #666;
    background-color: #fff;
    }
    
  #container2 {
    width: 750px;
    margin: 0 auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    color: #666;
    background-color: #fff;
    }
    
/*---------------|||||||||||header-------------------------------------------------------------------*/

  #header {
    width: 745px;
    border: 2px solid #fff;
    padding-bottom:10px;
    padding-top: 10px;
    clear: both;
    background:url(Biru_Manteb-img/head.gif) no-repeat;
    }
    
  #header p { 
    margin-top: -3px;
    margin-left: 30px;
    color: #fff;
      font-family: Georgia, Times New Roman, Times, serif;
    }
      
  #header h1 {
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
    margin-top:30px;
    margin-left: 10px;
    }
    
  #header a {
    color: #6DA6E2;
    text-decoration: none;
    }

  #header a:hover {
    color: #999;
    }
      
/*---------------|||||||||||Menu-------------------------------------------------*/

    #menu {
      float:left;
      width:745px;
      font-size:93%;
    padding-bottom: 1px;  
    background:url(Biru_Manteb-img/menu.gif);
      line-height:normal;
      }
    
    #menu ul {
    margin:0;
    padding:10px 10px 0 20px;
    list-style:none;
      }
    
    #menu li {
      display:inline;
      margin:0;
      padding:0;
      }
    
    #menu a {
      float:left;
      background:url(Biru_Manteb-img/left.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 6px;
      text-decoration:none;
      }
    
    #menu a span {
      float:left;
      display:block;
      background:url(Biru_Manteb-img/right.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#fff;
      }
    
    #menu a span {
    float:none;
    }
    
    #menu a:hover {
     background-position:0% -42px;
      }
    
    #menu a:hover span {
     background-position:100% -42px;
      }

/*---------------|||||||||||Content------------------------------------------------*/

  #content {
    width: 520px;
    padding-left: 10px;
    padding-right: 10px;
   padding-top: 10px;
    float: left; 
    }
    
  #content p {
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
    }
    
  #content h2 {
    color: #666;
    font-size: 16px;
    font-weight:bold;
    text-decoration:underline;
    font-family: Georgia, Times New Roman, Times, serif;
    background-color: #fff;
    }
    
  #content h2 a {
    color: #666;
    text-decoration: none;
    }

  #content h2 a:hover {
    color: #999;
    }

/*---------------|||||||||||Sidebar------------------------------------------*/

  #sidebar {
    width: 175px;
    padding-left: 19px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0.5em;
    float: right;background:#F1F1F1;
    border-right:4px solid #fff;
    }
    
  #sidebar p {
    padding-bottom: 10px;
    }
    
    #sidebar h2 {
    color: #2763A5;
    font-size: 16px;
    padding-left:15px;
    background:url(Biru_Manteb-img/arrow.gif)no-repeat bottom left;
    font-weight:bold;border-bottom: 1px solid #ddd;
    font-family: Georgia, Times New Roman, Times, serif;
    }
    
/*---------------|||||||||||Footer-----------------------------------------------*/

  #footer {
    clear: both;
    width: 745px;
    font-size:10px;border:2px solid #fff;
       background:#2763A5 url(Biru_Manteb-img/foot.gif);
     background-repeat: no-repeat;
    }
    
  #footer p {
    color:#fff;
    padding: 2px;
    text-align: center;
    }
    
  #footer p a {
    color: #fff;
    background:#2763A5 url(Biru_Manteb-img/foot.gif);
    font-weight:100;
    border-bottom: 1px dotted #fff;
    }
    
  #footer p a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: 0px dotted #fff;
    }
  
/*---------------|||||||||||Search--------------------------------------------------------------*/

  form {
    float:right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-right:5px;
    color:#fff;
    }
    
  input {
    background-color: #fff;
    color: #999;
    border: 1px solid #2763A5;
    font-size: 11px;
    padding: 3px;
    }
    
  .button {
    padding: 2px;
    background-color: #6DA6E2;
    color: #fff;
    border: 1px solid #2763A5;
    font-size: 11px;
    }
     
/*---------------|||||||||||Others--------------------------------------------------------------*/    
  
  a img{
    border: none;
    }
  .box {
      background-color: #fff;
      border: 1px solid #2763A5;
    padding: 5px;
    font-family: Georgia, Times New Roman, Times, serif;
    color: #000;
    font-size: 10px;
    }
  
</style>


</head>

<body>
<!--Contain-->
<div id="container">
    
<!--Skuadron Atas-->
<div id="header">
  <!--Search Facilty-->
  <form method="get" action="http://www.google.com/custom">
       <input name="q" size="25" maxlength="255" value="" type="text" />
        <input name="sa" value="search" type="submit" />
         <input name="cof" value="" type="hidden" />
         </form>
      
<h1>Biru_Manteb Gitu Loh..!!</h1>
<p>[ This Template used for my company site on http://choosen.net ]</p>

<!--Navigasi Skuad-->
<div id="menu">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Profile</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>The Staff</span></a></li>
    <li><a href="#"><span>Downloads</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
 </div>
</div>
<!--Contain2 Skuad-->
<div id="container2">
  <!--COntent SKuad-->
  <div id="content">
    <h2><img src="img/no_1.gif" alt="" align="bottom" />[Biru_Manteb]</h2>
      <p>
      Welcome To My Biru_Manteb Design, This my Fourth Design for OPen Source Community, 
      This Design used -I hope- for Bussiness website, you can customizing the menu and anything else
      with your idea and is very simply. <br />The Background Idea just only repeat the source image.<br />
      Background Menu, Header, Footer and Arrow in the sidebar used an image, if you think this make your site slowly you can change it,
      maybe with "background-color:#2763A5;", but trust me its makes not cool, huh..<br />
      I hope you can enjoy with this template, No right reserved and links back to me, <br />
      just remember this template was design by <a href="http://dot.choosen.net">me</a><br /><br />
      salam!!<br />Indonesia Goes Open Source<br />
      <a href="#">..more</a></p>
    <h2><img src="img/no_2.gif" alt="" align="bottom" />[Lorem Ipsum]</h2>
      <p>Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website</p>  
  </div>

<!--SideBar Here Bro-->
<div id="sidebar">
  <!--Skuad Right-->
<h2>Links!!!</h2>
<p>
&raquo;&nbsp;<a href="http://kodokhunt.blogsome.com">kodokhunt!</a><br />
&raquo;&nbsp;<a href="http://dot.choosen.net">hendrawan!</a><br />
&raquo;&nbsp;<a href="http://bascomp.org">Bascomp.org!</a><br />
&raquo;&nbsp;<a href="http://choosen.net">Choosen.net!</a><br />
&raquo;&nbsp;<a href="http://oswd.org">OSWD!</a><br />
&raquo;&nbsp;<a href="http://openwebdesign.org">OpenWebDesign!</a>
</p>
<h2>Support</h2>
<p>Add Our Banner to your web site or promote me in your email signature.<br />
Just simply copy and paste the source below to link Back to <a href="#">Us</a>..<br />
<textarea cols="30" rows="4" class="box">
&lt;a href=&quot;#&quot; title=&quot;&quot;&nbsp;target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://domain.tld/img/*.gif&quot; border=&quot;0&quot; width=&quot;120px&quot; height=&quot;60px&quot; /&gt;&lt;/a&gt;
</textarea><br />
</p>
<h2>Lorem Ipsum!!!</h2>
<p>
This sidebar..
used for latest news, latest activity,
testimonial, your client links, your partner links,
maybe a random image..up to you!!!
</p>
</div>

</div><!--End Contain2 here-->

<!--Known Ur Footer-->
<div id="footer">
<p><a href="#">Copyright</a> &copy; 2006 your Company Name, No Rights Reserved | Design by <a href="http://kodokhunt.blogsome.com">kodokhunt</a> 
| <a href="http://www.ehostinfo.com/">Web Hosting</a></p>
</div>

</div><!--End Contain here-->

</body>
</html>
<!--Made on 12 Muharram 1427 H >> hep Phun, "kodokhunt, yo!"-->








Related examples in the same category

1.Seach box floating right
2.Adding search to the header
3.Search box 2
4.Search box layout
5.Search box at the top
6.Search box inside sidebar
7.Search box bar with image background
8.Search box inside sidebar 3
9.Search box
10.Search box 3
11.Search box style
12.Search box with border
13.Search box 4
14.Search box and button
15.Large and wide search box
16.Grey style search box inside left section bar