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;
}
a {
color:#383737;
}
a:hover {
color:#000;
}
a img {
text-decoration:none;
}
p {
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:0 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>"This is a blockquote element, specially used for quotes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit."</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>© 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