Search box inside sidebar : Seach box « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » Seach box 
Search box inside sidebar
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Vivid</title>
<style type='text/css'>
/***************************************************************
  Vivid v1.0 
  By Ori Pearl
  http://www.oripearl.com/
  Instructions can be found in the attached Instructions.txt
***************************************************************/

/**********************************
  Reset settings  
**********************************/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
text-align:left;
vertical-align:baseline;
}

/**********************************
  Basic elements 
**********************************/
body {
background:url('Vivid-images/top-bg.jpg') repeat-x #fff;
color:#383737;
font-family:Verdana, Arial, sans-serif;
font-size:13px;
}

h1 {
color:#587f29;
font-size:18px;
font-weight:400;
margin-bottom:8px;
}

h2 {
color:#e65a05;
font-size:16px;
font-style:italic;
font-weight:400;
margin-bottom:8px;
}

{
color:#383737;
}

a:hover {
color:#000;
}

a img {
text-decoration:none;
}

{
margin-bottom:18px;
text-align:left;
}

p img {
margin:6px;
}

blockquote {
color:#626262;
font-style:italic;
}

/* Table */
caption,th,td {
font-weight:400;
text-align:left;
}

table,td,th {
vertical-align:middle;
}

table {
margin-bottom:8px;
width:100%;
}

th {
background:#C3D9FF;
font-weight:700;
}

th,td {
padding:4px 10px 4px 5px;
}

tr td {
background:#E5ECF9;
text-align:center;
}

/* Lists */
ul,ol {
margin:0 16px 8px;
}

ul {
list-style-type:square;
}

li {
margin-left:14px;
}

.date {
font-size:12px;
font-style:italic;
}

/**********************************
  Header settings  
**********************************/
#header {
margin:140px auto 0;
width:900px;
}

#header #header-message {
color:#ef5400;
float:right;
font-size:16px;
}

#header #logo {
float:left;
}

/**********************************
  Menu settings  
**********************************/
#menu-strip {
background:#be370e;
float:left;
height:40px;
margin-top:50px;
width:100%;
}

#top-menu {
margin:8px auto;
width:900px;
}

#top-menu li {
display:inline;
float:left;
list-style-type:none;
margin-left:0;
margin-right:40px;
}

#top-menu a {
color:#fff;
font-size:17px;
text-decoration:none;
}

#top-menu a:hover {
color:#ffa46d;
}

/**********************************
  Main content settings  
**********************************/
#wrapper {
clear:both;
margin:auto;
padding-top:30px;
width:900px;
}

#main-content {
float:left;
margin-right:40px;
width:560px;
}

#main-content p {
line-height:20px;
}

.block {
margin-bottom:18px;
}

/**********************************
  Sidebar settings  
**********************************/
#sidebar {
float:left;
width:300px;
}

#sidebar img {
float:left;
}

/**********************************
  Search form settings  
**********************************/
.search-form {
margin-bottom:18px;
}

.search-form #searchterm {
height:17px;
width:146px;
}

.search-form #submitbutton {
background-color:#fff;
border:solid 1px #383737;
color:#383737;
font-size:13px;
}

/**********************************
  Footer settings  
**********************************/
#footer {
background:#be370e;
float:left;
height:24px;
margin-top:50px;
width:100%;
}

#footer-content {
color:#fff;
font-size:11px;
margin:5px auto;
width:900px;
}

#footer-content a {
color:#fff;
}

#footer-content p {
margin-bottom:0;
}
</style>


      <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
      <![endif]-->
      <link rel="shortcut icon" href="images/favicon.ico" />
  </head>
  
  <body>
    
    <div id="header">    
      <!-- Logo image -->
      <img id="logo" src="images/logo.jpg" alt="Vivid" />
      
      <!-- Right header section -->
      <div id="header-message">
        <img src="images/testimonial.jpg" alt="Testimonial" />
      </div>
    </div>
  
    <div id="menu-strip"> <!-- Menu -->
      <ul id="top-menu">
        <li><a href="index.html">home</a></li>
        <li><a href="#">showcase</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>
    
    <div id="wrapper"> <!-- Content wrapper -->
      <div id="main-content">    
        
        <div class="block"> <!-- Block class is used for adding space around a paragraph -->
          <h1>Vivid - a colorful clean template</h1>
          <h2>Extensive guide for easy and simple modifications</h2>
          <p>
            Welcome to Vivid - a colorful and clean web template. Vivid is coded cleanly for <b>simple and easy modifications</b>. Vivid was tested for compatibility on all major browsers including IE6, IE7, Firefox and Safari. The code is valid <a href="http://validator.w3.org/check?uri=referer">Strict XHTML</a> and CSS.<br/>            
            <a href="#"><img src="images/showcase.jpg" alt="Showcase sample" /></a>
            <a href="#"><img src="images/showcase.jpg" alt="Showcase sample" /></a>
            <a href="#"><img src="images/showcase.jpg" alt="Showcase sample" /></a>
          </p>          
          <p>And now for something completely different...</p>
          <h1>Elements samples</h1>
        </div>
        
        <div class="block">
          <h2>A table</h2>          
          <table>
            <tr><td></td><th>Vivid template</th><th>Other template</th><th>Other template</th></tr>
            <tr><th>Elegant</th><td><img src="images/v.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td></tr>
            <tr><th>Simple editing</th><td><img src="images/v.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td></tr>
            <tr><th>Extensive guide</th><td><img src="images/v.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td></tr>
          </table>
        </div>        
        
        <div class="block">          
          <h2>blockquote element</h2>
          <blockquote><p>&quot;This is a blockquote element, specially used for quotes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&quot;</p></blockquote>          
        </div>
        
        <div class="block">
          <h2>Unordered list</h2>          
          <ul>
            <li>Item 1: Lorem ipsum dolor sit amet</li>
            <li>Item 2: Consectetuer adipiscing elit</li>
            <li>Item 3: sed diam nonummy nibh euismod tincidunt</li>
          </ul>
        </div>
        
        <div class="block">
          <h2>Ordered list</h2>        
          <ol>
            <li>Item: Lorem ipsum dolor sit amet</li>
            <li>Item: Consectetuer adipiscing elit</li>
            <li>Item: sed diam nonummy nibh euismod tincidunt</li>
          </ol>
        </div>        
      </div>
      
      <div id="sidebar"> <!-- The sidebar wrapper -->
        <h2>The sidebar</h2>        
        <p>          
          <b>This is the sidebar.</b> You can insert here any content that fits a sidebar.<br/><br/>
          <img src="images/sample1.jpg" alt="Sample image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis.<br/><br/>
        </p>
        
        <form class="search-form" action=""> <!-- Search form -->
          <p>
            <input type="text" id="searchterm" />
            <input type="submit" value="Search" id="submitbutton" />
          </p>
        </form>  
        
        <ul>
          <li>Lists are always welcome</li>
          <li>Sidebar list item B</li>
          <li>Sidebar list item C</li>
        </ul><br/>                
        
        <h2>Latest news</h2> <!-- News item sample -->                    
        <p>
          <b>News item title here</b><br/>          
          <span class="date">March 18th, 2008</span><br/>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis.
        </p>
        
        <p>
          <b>News item title here</b><br/>
          <span class="date">March 18th, 2008</span><br/>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis.
        </p>        
      </div>
    </div>
    
    <div id="footer">
      <div id="footer-content">
        <p>&copy; Vivid 2008 : All rights reserved | Designed and coded by <a href="http://www.oripearl.com">Ori Pearl</a> 
        | <a href="http://www.cssportal.com/">CSS Portal</a> | This website is <a href="http://validator.w3.org/check?uri=referer">XHTML Valid</a></p>
      </div>
    </div>
  </body>
</html>

   
    
  
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 bar with image background
7.Search box inside sidebar 3
8.Search box
9.Search box 3
10.Search box style
11.Search box with border
12.Search box 4
13.Search box and button
14.Large and wide search box
15.Grey style search box inside left section bar
16.Search box at the top 2
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.