thewildwest
<!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">
<head>
<title>The Wild West</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* SET MARGIN AND PADDING TO 0 FOR ALL ELEMENTS */
* {
margin: 0; padding: 0;
}
/* SET BASE FONT ATTRUBUTES */
html, body {
font: Georgia, "Times New Roman", Times, serif 14px/1.5em;
color: #000;
}
/* REMOVE PADDING AND MARGIN VALUES */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dd, dt, img,
blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form,
input, textarea, fieldset, pre
{margin: 0; padding: 0;}
/* SORT OUT HEADER FORMATTING AND SIZES */
h1, h2, h3, h4, h5 {font-weight: bold;}
h1 {font-size: 2em;}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}
/* HARMONIZE LINKS, KILL BORDER ON IMG LINKS */
a {text-decoration: underline;}
a:link, a:visited {color: #00f;}
a:hover {color: #33f;}
a:active {color: #fff;}
a img, :link img, :visited img {border: none}
/* REMOVE BROWSERS DEFAULT TABLE BORDERS */
table {border-collapse: collapse;}
/* REMOVE AUTOMATIC TOP/BOTTOM MARGINS ON NESTED LISTS */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul, dl ol, dl dir, dl menu, dl dl
{margin-top: 0; margin-bottom: 0;}
/* HARMONISE LIST-BULLET TYPE */
ul, ol, dl {list-style-type: disc;}
body {
background: #666;
}
body, input, textarea, select {
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
margin: 5px auto;
}
h1, h2, h3 {
margin-bottom: 1em;
font-weight: normal;
color: #975700;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1em;
font-weight: bold;
}
p, blockquote, ul, ol, form {
margin-bottom: 1.5em;
}
blockquote, ul, ol {
margin-left: 3em;
}
blockquote {
margin-right: 3em;
font-style: italic;
}
ul {
list-style-type: square;
}
a {
color: #975700;
}
a:hover {
text-decoration: none;
}
a:link, a:visited {color: #975700;}
/* Wrapper */
#wrapper {
width: 942px;
margin: 0px auto;
background-color: #FFFFFF;
}
/* Header */
#header {
height: 257px;
width: 942px;
position: relative;
background: #E6CD91 url(thewildwest-images/gun.jpg) no-repeat;
margin: 0px auto;
}
#header h1, #header h2 {
}
#header h1 {
position: absolute;
top: 13px;
left: 20px;
font-size: 3em;
letter-spacing: -2px;
}
#header h2 {
position: absolute;
top: 55px;
left: 30px;
font-size: 1em;
}
#header a {
text-decoration: none;
color: #FFF;
}
#header:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Menu */
#menu
{
width: 928px;
position: absolute;
margin: -40px 0;
}
#menu ul
{
list-style: none;
text-align: right;
padding: 10px 0px 10px 0px;
margin: 0;
}
#menu li
{
padding: 0em 0.7em 0em 0.7em;
display: inline;
}
#menu li a
{
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted #FFFFFF;
font-size: 1.2em;
}
#menu li a.active
{
border-bottom: 4px solid #FFFFFF;
}
#menu li a:hover
{
border-bottom: 4px solid #FFFFFF;
}
/* Content */
#content {
background: #FFFFFF url(thewildwest-images/bg.gif) repeat-y;
border-top: 5px solid #C48C05;
border-bottom: 1px solid #C48C05;
margin: 0px auto;
width: 928px;
}
/* Blog */
#blog {
float: right;
width: 678px !important;
width: 675px; /*IE6 3px problem */
margin: 0px auto;
}
/* Post */
.post {
padding-bottom: 20px;
}
.post .title {
height: 50px;
border-top: 1px solid #C48C05;
text-transform: uppercase;
font-size: small;
font-weight: bold;
padding: 5px 10px;
background: #FFF url(thewildwest-images/cbg.gif) repeat-x;
}
.post .title a {
text-decoration: none;
}
.post .title a:hover {
text-decoration: underline;
}
.post .date {
margin-top: -73px;
text-align: right;
font-size: x-small;
padding: 5px;
color: #975700;
}
.post .entry {
padding: 10px 20px 10px 20px;
line-height: 1.8em;
}
.post p {
text-align: justify;
}
.post .meta {
padding: 0 15px;
font-size: x-small;
color: #333;
}
.entry h1, .entry h2, .entry h3 {
color: #333;
}
/* Sidebar */
#sidebar {
float: left;
width: 250px;
padding-top: 5px;
margin: 0px auto;
border-top: 1px solid #C48C05;
}
#sidebar ul {
margin: 0;
list-style: none;
padding: 0 10px;
}
#sidebar li {
margin-bottom: 35px;
}
#sidebar li ul {
background: url(thewildwest-images/sbg.gif) repeat-x;
line-height: 1.5em;
list-style-type: none;
padding: 5px 0px 0px 10px;
}
#sidebar li li {
margin: 0;
color: #975700;
}
#sidebar h2 {
border-bottom: 3px solid #C48C05;
text-transform: uppercase;
font-size: small;
font-weight: bold;
margin: 0px;
}
#sidebar a {
text-decoration: none;
color: #975700;
padding-left: 15px;
background: transparent url(thewildwest-images/listoff.gif) left center no-repeat;
}
#sidebar a:hover {
text-decoration: none;
color: #530000;
background: transparent url(thewildwest-images/liston.gif) left center no-repeat;
}
/* Search */
#search {
}
#search h2 {
}
#search form {
}
#search #inputtext1 {
}
#search #inputsubmit1 {
}
/* Archives */
#archives {
}
/* Categories */
#categories {
}
/* Blogroll */
#blogroll {
}
/* Meta */
#meta {
}
/* Footer */
#footer {
width: 928px;
height: 50px;
margin: 0px auto;
background: #CDE691 url(thewildwest-images/fbg.gif) repeat-x;
}
#footer p {
margin: 0;
padding: 10px 0;
text-align: center;
font-size: x-small;
}
#footer a {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> <a href="http://www.free-css.com/">The Wild West</a></h1>
<h2>By Sumanasa.com</h2>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="active">Home</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
<div id="content">
<div id="sidebar">
<ul>
<li id="archives">
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">April 2007</a></li>
<li><a href="http://www.free-css.com/">March 2007</a></li>
<li><a href="http://www.free-css.com/">February 2007</a></li>
<li><a href="http://www.free-css.com/">January 2007</a></li>
<li><a href="http://www.free-css.com/">December 2006</a></li>
</ul>
</li>
<!-- end #archives -->
<li id="categories">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Category #1</a> <small>(21)</small></li>
<li><a href="http://www.free-css.com/">Category #2</a> <small>(11)</small></li>
<li><a href="http://www.free-css.com/">Category #3</a> <small>(13)</small></li>
<li><a href="http://www.free-css.com/">Category #4</a> <small>(89)</small></li>
</ul>
</li>
<!-- end #categories -->
<li id="blogroll">
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">Jack Hogan</a></li>
<li><a href="http://www.free-css.com/">Jill Reagan</a></li>
<li><a href="http://www.free-css.com/">Humpty Smith</a></li>
<li><a href="http://www.free-css.com/">Bumpty Smith</a></li>
<li><a href="http://www.free-css.com/">Mary Lamb</a></li>
</ul>
</li>
<!-- end #blogroll -->
<li id="meta">
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css.com/">Site Admin</a></li>
<li><a href="http://www.free-css.com/">Logout</a></li>
<li><a href="http://validator.w3.org/check/referer">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
</ul>
</li>
<!-- end #meta -->
</ul>
</div>
<!-- end #sidebar -->
<div id="blog">
<div id="post-1" class="post">
<h2 class="title"> <a href="http://www.free-css.com/">Introduction to The Wild West</a></h2>
<h3 class="date">March 26, 2007</h3>
<div class="entry">
<p><strong>The Wild West</strong> is a free template from Sumanasa.com released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons License</a>. This is a simple template with a header with background image, a horizontal menu, content and sidebar columns. We have tested this template in Firefox 1.5, Opera 8.5, IE 6.0 and IE 7.0 and it works fine in all these browsers. This is a valid XHTML and CSS and it is also very easy to customize.</p>
<p>You can use this template with no restrictions; just leave the "Design by" information as it is at the bottom. Good luck to your website.</p>
</div>
<p class="meta">Posted in <a href="http://www.free-css.com/">Category #1</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment »</a></p>
</div>
<!-- end #post-1 -->
<div id="post-2" class="post">
<h2 class="title"> <a href="http://www.free-css.com/">Sample Tags</a></h2>
<h3 class="date">January 31, 2007</h3>
<div class="entry">
<p>A one-sentence paragraph followed by a blockquoted paragraph.</p>
<blockquote>
<p>“A collection of nursery rhymes and songs to share and enjoy, with pictures to print off and color in.”</p>
</blockquote>
<h3>Heading Level Three</h3>
<ul>
<li>Jack and Jill went up the hill</li>
<li>To fetch a pail of water</li>
<li>Jack fell down, and broke his crown</li>
<li>And Jill came tumbling after.</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Mary had a little lamb</li>
<li>Its fleece was white as snow</li>
<li>And everywhere that Mary went</li>
<li>The lamb was sure to go.</li>
</ol>
</div>
<p class="meta">Posted in <a href="http://www.free-css.com/">Category #1</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment »</a></p>
</div>
<!-- end #post-2 -->
</div>
<!-- end #blog -->
<div style="clear: both; height: 1px;"></div>
</div>
<!-- end #content -->
<!-- Please do not remove the "Design by" information. -->
<div id="footer">
<p>Copyright © 2007 The Wild West. Design by <a href="http://www.sumanasa.com/">Sumanasa.com</a>.</p>
</div>
<!-- end footer -->
</div>
<!-- end #wrapper -->
</body>
</html>
Related examples in the same category