Sidebar with link and text
<!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>
<title>Underground</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<style type='text/css'>
/* -----------------------------------------------------
AUTHOR : Erwin Aligam
WEBSITE : http://www.styleshout.com/
TEMPLATE NAME : Underground
TEMPLATE CODE : S-0006
VERSION : 1.2
LAST DATE MOD : January 20, 2010
-------------------------------------------------------- */
/* -----------------------------------------------------
HTML ELEMENTS
-------------------------------------------------------- */
/* top elements */
* { margin: 0; padding: 0; outline: 0; }
body {
margin: 0; padding: 0;
font: 12px/160% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
color: #555;
background: #FFF url(Underground-images/bg.gif) repeat-x;
}
/* links */
a:link, a:visited {
color: #003366;
background-color: inherit;
text-decoration: none;
}
a:hover {
color: #CC0001;
background-color: inherit;
}
/* headers */
h1, h2, h3 {
font-family: Arial, 'Trebuchet MS', Sans-Serif;
font-weight: bold;
color: #333;
}
h1 {
font-size: 120%;
letter-spacing: .5px;
}
h2 {
font-size: 115%;
text-transform: uppercase;
}
h3 {
font-size: 115%;
color: #003366;
}
/* images */
img {
background: #FAFAFA;
border: 1px solid #DCDCDC;
padding: 8px;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}
h1, h2, h3, p {
padding: 0;
margin: 10px;
}
ul, ol {
margin: 10px 20px;
padding: 0 20px;
}
code {
margin: 10px 0;
padding: 15px 20px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #CC0000;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 10px;
padding: 10px 10px 15px 32px;
background: #FAFAFA url(Underground-images/quote.gif) no-repeat 7px 10px !important;
background-position: 8px 10px;
border: 1px solid #f2f2f2;
border-left: 4px solid #CC0000;
font-weight: bold;
}
/* form elements */
form {
margin:10px;
padding: 15px 10px;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 3px 5px;
border:1px solid #eee;
font-size: 1em;
color:#777;
}
textarea {
width:400px;
padding: 3px 5px;
font-size: 1em;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
input.button {
margin: 0;
font: bolder 12px Arial, Sans-serif;
border: 1px solid #CCC;
padding: 5px 3px;
background: #FFF;
color: #CC0000;
}
/* search form */
form.search {
position: absolute;
top: 5px; right: 5px;
padding: 0; margin: 0;
border: none;
background-color: transparent;
}
form.search input.textbox {
margin: 0;
width: 120px;
border: 1px solid #CCC;
background: #FFF;
color: #333;
}
form.search input.searchbutton {
margin: 0;
font-size: 100%;
font-family: Arial, Sans-serif;
border: 1px solid #CCC;
background: #FFFFFF url(Underground-images/headerbg.gif) repeat-x bottom left;
padding: 1px;
font-weight: bold;
height: 23px;
color: #333;
width: 60px;
}
/* -----------------------------------
LAYOUT
-------------------------------------- */
#wrap {
margin: 0 auto;
width: 780px;
}
/* header */
#header {
position: relative;
margin: 0; padding: 0;
height: 60px;
}
#header span#slogan {
z-index: 3;
position: absolute;
left: 3px; bottom: 7px;
font: bold 1.1em Verdana, Arial, Tahoma, Sans-serif;
color: #FFF;
}
#header-logo {
position: relative;
clear: both;
height: 50px;
margin: 0; padding: 0;
}
#header-logo #logo {
position: absolute;
top: 3px; left: 5px;
font: bold 30px "trebuchet MS", Arial, Tahoma, Sans-Serif;
margin: 0; padding: 0;
letter-spacing: -1px;
color: #000;
}
/* navigation tabs */
#header ul {
position: absolute;
margin:0;
list-style:none;
right:-18px ; bottom: 3px;
font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
}
#header li {
display:inline;
margin:0; padding:0;
}
#header a {
float:left;
background: url(Underground-images/tableft.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#header a span {
float:left;
display:block;
background: url(Underground-images/tabright.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
color:#FFF;
}
#header a:hover {
background-position:0% -42px;
}
#header a:hover span {
background-position:100% -42px;
}
#header #current a {
background-position:0% -42px;
}
#header #current a span {
background-position:100% -42px;
}
/* main column */
#main {
float: right;
margin: 0; padding: 0;
width: 545px;
}
#main h1 {
margin: 10px 0 15px 0;
padding: 5px 5px 5px 8px;
font-size: 105%;
color: #FFF;
text-transform: uppercase;
background-color: #CC0000;
letter-spacing: .5px;
}
/* sidebar */
#sidebar {
float: left;
width: 220px;
margin: 0; padding: 0;
background-color: #FFFFFF;
}
#sidebar h1 {
margin: 10px 0 0 0;
padding: 5px 5px 5px 8px;
font-size: 105%;
color: #FFF;
text-transform: uppercase;
background: #333;
letter-spacing: 1px;
}
#sidebar .left-box {
border: 1px solid #EBEBEB;
margin: 0 0 5px 0;
background: #FFF;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 3px 0px 8px 0; padding: 0;
text-decoration: none;
}
#sidebar ul.sidemenu li {
border-bottom: 1px solid #f2f2f2;
background: url(Underground-images/bullet.gif) no-repeat 3px 6px;
padding: 4px 5px 4px 28px;
margin: 0;
}
#sidebar ul.sidemenu a {
font-weight: bolder;
padding: 3px 0px;
background: none;
}
/* footer */
.footer {
clear: both;
border-top: 1px solid #f2f2f2;
background: #FFF url(Underground-images/footerbg.gif) repeat-x;
padding: 2px 0 10px 0;
text-align: center;
line-height: 1.5em;
font-size: .9em;
}
.footer a {
text-decoration: none;
font-weight: bold;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* display and additional classes */
.clear { clear: both; }
.red { color: #CC0000; }
.comments {
margin: 20px 10px 25px 10px;
padding: 5px 3px;
border-bottom: 1px solid #EFF0F1;
border-top: 1px solid #EFF0F1;
}
</style>
</head>
<body>
<!-- wrap starts here -->
<div id="wrap">
<!-- header -->
<div id="header">
<span id="slogan"> your site slogan here...</span>
<!-- tabs -->
<ul>
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Archives</span></a></li>
<li><a href="index.html"><span>Downloads</span></a></li>
<li><a href="index.html"><span>Services</span></a></li>
<li><a href="index.html"><span>Support</span></a></li>
<li><a href="index.html"><span>About</span></a></li>
</ul>
</div>
<div id="header-logo">
<div id="logo">under<span class="red">ground</span></div>
<form method="post" class="search" action="#">
<p><input name="search_query" class="textbox" type="text" />
<input name="search" class="searchbutton" value="Search" type="submit" /></p>
</form>
</div>
<div id="main">
<a name="TemplateInfo"></a>
<h1>Template Info</h1>
<p><strong>Underground</strong> is a free, W3C-compliant, CSS-based website template
by <a href="http://www.styleshout.com/">styleshout.com</a>. This work is
distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5 License</a>, which means that you are free to
use and modify it for any purpose. All I ask is that you give me credit by including a <strong>link back</strong> to
<a href="http://www.styleshout.com/">my website</a>.
</p>
<p>
You can find more of my free template designs at <a href="http://www.styleshout.com/">my website</a>.
For premium commercial designs, you can check out
<a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate.com</a>.
</p>
<p class="comments clear">
<a href="index.html">Read more</a> |
<a href="index.html">comments(3)</a> |
Oct 18 2006
</p>
<a name="SampleTags"></a>
<h1>Sample Tags</h1>
<h3>Code</h3>
<p>
<code>
code-sample { <br />
font-weight: bold;<br />
font-style: italic;<br />
}
</code></p>
<h3>Example Lists</h3>
<ol>
<li>example of</li>
<li>ordered list</li>
</ol>
<ul>
<li>example of</li>
<li>unordered list</li>
</ul>
<h3>Blockquote</h3>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>
<h3>Image and text</h3>
<p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum
odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna.
In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar
ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.
</p>
<h3>Example Form</h3>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value="Your Name" type="text" size="30" />
<label>Email</label>
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
<br />
</div>
<div id="sidebar" >
<h1>Sidebar Menu</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="#TemplateInfo">Template Info</a></li>
<li><a href="#SampleTags">Sample Tags</a></li>
<li><a href="http://www.styleshout.com/">More Free Templates</a></li>
<li>
<a href="http://www.buywebtemplates.net" title="Web Templates">Web Templates</a></li>
</ul>
</div>
<h1>Sponsors</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate</a></li>
<li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts</a></li>
<li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com</a></li>
<li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock</a></li>
<li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft</a></li>
<li><a href="http://www.ehostinfo.com/" title="Web Hosting">Web Hosting</a></li>
</ul>
</div>
<h1>Wise Words</h1>
<div class="left-box">
<p>"Big men and big personalities make mistakes and admit them.
It is the little man who is afraid to admit he has been wrong"</p>
<p class="align-right">- Dr. Maxwell Maltz</p>
</div>
<h1>Support Styleshout</h1>
<div class="left-box">
<p>If you are interested in supporting my work and would like to contribute, you are
welcome to make a small donation through the
<a href="http://www.styleshout.com/">donate link</a> on my website - it will
be a great help and will surely be appreciated.</p>
</div>
</div>
<!-- wrap ends here -->
</div>
<!-- footer starts here -->
<div class="footer">
<p>
© 2010 Your Company
Design by <a href="http://www.styleshout.com/">styleshout</a>
| <a href="http://www.cssportal.com/">CSS Portal </a>
<a href="index.html">Home</a> |
<a href="index.html">Site Map</a> |
<a href="index.html">RSS Feed</a> |
<a href="http://validator.w3.org/check/referer">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
</p>
</div>
</body>
</html>
Related examples in the same category