voodoodollyv2.0
?<!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>Voodoo Dolly v2.0</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
culture shock: voodoo dolly v2.0
pogy366: http://www.raykdesign.net
Sept 2007
*/
body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
margin:20px 0 0 0;
padding:0 0 0 0;
background:#ffffff;
}
p {
margin-bottom:10px;
line-height:1.2em;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
ul, ol {
margin:0 0 12px 0;
padding:0;
}
li {
margin:0 0 5px 15px;
padding-left:15px;
list-style:none;
background-image:url(voodoodollyv2.0-img/bulleted-li-bg-dark.gif);
background-position:0 3px;
background-repeat:no-repeat;
font-size:1em;
color:#454545;
}
a {
color:#6E312A;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
/* Main Outer Container */
#pageWrap {
margin:0 auto;
padding:0;
width:980px;
}
/* Header */
#header {
margin:0;
padding:0;
width:980px;
height:135px;
background-image:url(voodoodollyv2.0-img/header-bg.jpg);
background-position:0 0;
background-repeat:no-repeat;
}
#header h1 {
margin:0;
padding:30px 0 0 170px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:3em;
font-weight:lighter;
}
#header p {
margin:0;
padding:5px 0 0 175px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#eeeeee;
}
/* Main Navigation */
#navBar {
margin:0;
padding:0;
width:980px;
height:35px;
line-height:35px;
background:url(voodoodollyv2.0-img/nav-bar-bg.jpg);
background-position:0 0;
background-repeat:no-repeat;
}
#navBar ul{
list-style-type:none;
margin-left:20px;
}
#navBar li{
margin:0;
padding:0;
list-style-type:none;
display:inline;
background-image:none;
}
#navBar li a{
margin:0 0 0 -5px;
padding:9px 20px 9px 20px;
color:#ffffff;
text-decoration:none;
font-size:1.1em;
border-left:1px solid #757575;
}
#navBar ul li a:hover{
color:#ffffff;
text-decoration:none;
background-color:#AC4B41;
}
#navBar li.end {
margin:0;
padding:0;
list-style-type:none;
display:inline;
background-image:none;
}
#navBar li.end a{
margin:0 0 0 -5px;
padding:9px 20px 9px 20px;
color:#ffffff;
text-decoration:none;
font-size:1.1em;
border-left:1px solid #757575;
border-right:1px solid #757575;
}
#navBar li.end a:hover{
color:#ffffff;
text-decoration:none;
background-color:#AC4B41;
}
/* Content Container */
#container {
margin:0;
padding:10px 0 0 0;
width:980px;
}
/* Left Content Column - heavy negative margin so center column can appear first in HTML */
#leftColumn {
float:left;
margin:0 0 0 -750px;
padding:0;
width:140px;
font-size:.9em;
color:#686868;
}
#leftColumn h2 {
font-size:1.4em;
color:#9C291D;
}
#leftColumn ul, ol {
margin:0 0 12px 0;
padding:0;
}
#leftColumn li {
margin:5px 0 0 0;
padding-left:15px;
list-style:none;
background-image:url(voodoodollyv2.0-img/bulleted-li-bg-dark.gif);
background-position:0 1px;
background-repeat:no-repeat;
font-size:.95em;
color:#6E312A;
}
/* Center Content Column */
#centerColumn {
float:left;
margin:0 10px 0 145px;
padding:6px 6px 6px 10px;
width:580px;
font-size:.9em;
color:#000000;
border-left:1px dashed #cccccc;
}
#centerColumn h2 {
margin:0 0 5px 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#9C291D;
}
/* Right Content Column */
#rightColumn {
float:left;
margin:0;
padding:6px;
width:200px;
font-size:.9em;
color:#646464;
background:#eeeeee;
border:1px solid #cccccc;
}
#rightColumn h2 {
font-size:1.4em;
color:#2C2C2C;
}
/* Footer */
#footer {
margin:30px 0 10px 0;
padding:0;
width:980px;
height:100px;
background-image:url(voodoodollyv2.0-img/footer-bg.jpg);
background-position:0 0;
background-repeat:no-repeat;
}
#footer p {
margin:0;
padding:0 150px 0 0;
line-height:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#454545;
text-align:right;
}
#footer a {
color:#9C291D;
text-decoration:none;
}
#footer a:hover {
color:#999999;
text-decoration:underline;
}
/* Clears nested floats */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<link rel="stylesheet" type="text/css" href="style.css" media="screen,print" />
<!--[if IE 6]>
<style>
#centerColumn {
float:left;
margin:0 10px 0 75px;
padding:6px 6px 6px 10px;
width:580px;
font-size:.9em;
color:#000000;
border-left:1px dashed #cccccc;
}
</style>
<![endif]-->
</head>
<body>
<div id="pageWrap">
<div id="header">
<h1>Voodoo Dolly v2.0</h1>
<p>Busting Out The Digital Spackle For A Long Overdue Update</p>
</div>
<div id="navBar">
<ul>
<li><a href="http://www.free-css.com/" title="Homw">Home</a></li>
<li><a href="http://www.free-css.com/" title="About">About</a></li>
<li><a href="http://www.free-css.com/" title="Blog">Blog</a></li>
<li class="end"><a href="http://www.free-css.com/" title="Contact">Contact</a></li>
</ul>
</div>
<div id="container" class="clearfix">
<div id="centerColumn">
<h2>Center Column</h2>
<p>I really can?t say why, but this particular template has been the most popular of the ones that I?ve created for the open source community. It?s been ported as a Drupal theme and also included as a default PostNuke theme for a short time: very cool to a web geek like me.</p>
<p>To be honest, while it?s been popular, the CSS/XHTML behind this template was rather chunky and desperately needed some love. So after a particular request to have the content in the center column appear first in the markup, I figured it was time to fix the goofs or mistakes I had originally made. Hopefully this will extend it?s longevity for bit.</p>
<p><a href="http://www.free-css.com/">Link Example</a></p>
<p><strong>Strong Example</strong></p>
<p><em>Italic Example</em></p>
<ul>
<li>Un-Ordered List Item</li>
<li>Un-Ordered List Item</li>
<li>Un-Ordered List Item</li>
</ul>
<h2>H2 Heading Example</h2>
<p>Proin enim justo, viverra vitae, aliquam eget, pretium vel, enim. Pellentesque volutpat, est ac facilisis tempor, nibh diam posuere felis, vitae rhoncus odio velit vitae lectus. Nulla augue pede, bibendum sit amet, volutpat dapibus, adipiscing non, tellus. Nulla elit. Fusce imperdiet ullamcorper massa. Nulla sem ligula, interdum ut, sagittis sed, cursus in, metus. Sed porttitor neque sit amet metus. Ut mattis mollis risus. Duis auctor nulla at magna.</p>
<p>Proin enim justo, viverra vitae, aliquam eget, pretium vel, enim. Pellentesque volutpat, est ac facilisis tempor, nibh diam posuere felis, vitae rhoncus odio velit vitae lectus. Nulla augue pede, bibendum sit amet, volutpat dapibus, adipiscing non, tellus. Nulla elit. Fusce imperdiet ullamcorper massa. Nulla sem ligula, interdum ut, sagittis sed, cursus in, metus. Sed porttitor neque sit amet metus. Ut mattis mollis risus. Duis auctor nulla at magna.</p>
</div>
<div id="leftColumn">
<h2>Left Column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<p><a href="http://www.free-css.com/">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
</div>
<div id="rightColumn">
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><a href="http://www.free-css.com/">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
</div>
</div>
<div id="footer">
<p>Copyright, 2005 (Your Site Name) • Design
by <a href="http://www.raykdesign.net">Rayk Web Design</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category