historyofwar
<!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>History of War</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document by Dieter Schneider 2006 | www.csstemplateheaven.com */
* {margin: 0;
padding: 0;
}
p {
margin-bottom: 15px;
background-color: #f9f9f9;
padding: 5px;
}
h1 {
background-image: url(historyofwar-images/logo.jpg);
height: 51px;
width: 355px;
}
h2 {
margin-left: -3000px;
height: 0px;
}
.heading_one {margin-left: -3000px;}
h3 {
margin-top: 5px;
color: #595726;
font-size: 1.2em;
background-color: #dfdec9;
padding: 4px;
}
h4 {
color: #595726;
font-size: 0.7em;
background-color: #dfdec9;
padding: 4px;
text-align: left;
}
a:link {
color: #6C6A41;
text-decoration: none;
} /* unvisited link */
a:visited {color: #333333} /* visited link */
a:hover {color: #000000} /* mouse over link */
a:active {color: #000000} /* selected link */
.float_left {float: left;
margin-right: 6px;}
body {
font-size: 62.5%;
padding: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header {
background-image: url(historyofwar-images/header.jpg);
background-repeat: no-repeat;
height: 20px;
padding-right: 10px;
background-color: #575857;
margin-bottom: 10px;
text-align: right;
color: #CCCCCC;
padding-top: 45px;
}
.header_txt {
color: #FFFFFF;
background: none;
}
#left {width: 30%;
float: left;
}
#right {width: 30%;
float: right;
}
#content {margin-left: 32%;
margin-right: 32%;
}
#footer {
font-size: 1.2em;
background-color: #f9f9f9;
border-top: 1px dotted #CCCCCC;
border-bottom: 1px dotted #CCCCCC;
text-align: center;
padding: 15px;
clear: both;
}
#navcontainer
{
margin-bottom: 1em;
overflow: hidden;
width: 100%;
font-size: 1.2em;
font-style: italic;
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
padding-top: 10px;
padding-bottom: 10px;
background-color: #f9f9f9;
}
#navlist
{
list-style-type: none;
color: #000000;
}
#navlist li
{
border-left: 1px solid #000;
float: left;
line-height: 1.1em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
}
</style>
</head>
<body>
<h1><span class="heading_one">History of War</span></h1>
<h2><span class="heading_one">Sub heading goes here</span></h2>
<div id="header">
<p class="header_txt">Monday, December 18, 2006 Last Update: 11:24 AM ET</p>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
<div id="left">
<h3>About this template</h3>
<h4>Author: Dieter Schneider</h4>
<p>This is a three column fluid layout. Heading one and two are hidden using css, this was to spice up the typography a bit, simply replace the image with your own or if you just want plain text just remove the span class. I kindly ask you to not remove the footer link if you have the free download.</p>
<h3>A left floated image</h3>
<p> <img src="historyofwar-images/demo_image.jpg" alt="History of war" class="float_left" height="97" width="136" />Nam feugiat. Nam eleifend, diam ac convallis rhoncus, lacus nibh bibendum purus, id porta leo elit sodales dolor. Ut dui risus, convallis at, fringilla at, elementum quis, felis. Fusce quis urna. Etiam fringilla sapien sit amet nisl. Ut pulvinar nibh at mauris. Donec elit. Proin feugiat, mauris sed interdum gravida, enim enim iaculis diam, at viverra nisl felis et turpis. Aliquam sagittis. Ut hendrerit rutrum leo. Duis felis magna, molestie sit amet, eleifend eget, pellentesque elementum, nisl. Proin risus magna, blandit a, elementum vel, tristique sit amet, felis. Nam leo nulla, tempus facilisis, consectetuer at, interdum sit amet, est.</p>
<h3>Headings</h3>
<p>Vestibulum tempor bibendum urna. Suspendisse ac lorem. Praesent in tellus nec mi hendrerit malesuada. Fusce condimentum velit. Ut imperdiet egestas quam. In ut magna sit amet nisi mollis placerat. Fusce auctor. Duis semper vehicula enim. Curabitur suscipit lacinia ipsum. Mauris sem. Maecenas aliquam neque eget elit. Quisque condimentum mi et leo. Vestibulum enim. Praesent leo lacus, cursus a, vehicula ac, sollicitudin et, nulla. Fusce a justo. Nulla facilisi. Proin adipiscing magna eu diam.</p>
<h3>Headings</h3>
<p>Aliquam semper, mi sit amet feugiat aliquam, ante arcu tempus enim, in porttitor risus risus congue turpis. Morbi volutpat. Proin sapien nibh, pretium non, tempor eget, laoreet vitae, dui. Curabitur vel mauris. Aenean facilisis. Aenean accumsan ante ut neque. Duis dui. Curabitur dictum venenatis ligula. Nullam nulla. Morbi mi risus, gravida vulputate, laoreet eget, vestibulum sit amet, dolor. In volutpat dui ut purus. Aenean porta dapibus nunc. Cras sed lacus nec ligula luctus tincidunt. Praesent nonummy, ante et tincidunt sagittis, diam mauris sollicitudin ligula, eget tempor augue diam at elit.</p>
<h3>Headings</h3>
<p>Etiam est. Sed lectus turpis, laoreet ut, lobortis vitae, eleifend at, nisl. Fusce tempus mollis nisl. Vestibulum semper dictum nisi. Proin elit. Ut arcu enim, auctor eu, molestie hendrerit, sagittis vitae, sapien. Sed enim. Nam bibendum adipiscing risus. Aliquam erat volutpat. Vestibulum volutpat. Ut sem neque, dapibus quis, adipiscing rutrum, hendrerit ut, dolor. Curabitur facilisis dolor ut ipsum. Cras adipiscing eros vel elit. Integer auctor faucibus odio. Duis convallis, metus blandit dignissim vestibulum, nibh nisl auctor ipsum, ut commodo diam lacus condimentum pede.</p>
</div>
<div id="right">
<h3>Headings</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sit amet nisl et nisi tincidunt sagittis. Nulla in turpis. Nulla interdum leo quis felis. Suspendisse metus mauris, consequat ornare, aliquet sed, egestas et, odio. Curabitur fringilla. Donec quis urna in quam suscipit pretium. Vestibulum nonummy augue imperdiet ipsum. Cras congue, pede sed euismod ullamcorper, odio pede placerat justo, sed tempor orci velit a ante. Phasellus dignissim enim. Cras pharetra ullamcorper quam. Vivamus consectetuer magna id magna. Donec fermentum, diam sed molestie pharetra, diam nisl gravida velit, id semper dui massa sit amet sapien. Mauris dui.</p>
<h3>Headings</h3>
<p>Nam feugiat. Nam eleifend, diam ac convallis rhoncus, lacus nibh bibendum purus, id porta leo elit sodales dolor. Ut dui risus, convallis at, fringilla at, elementum quis, felis. Fusce quis urna. Etiam fringilla sapien sit amet nisl. Ut pulvinar nibh at mauris. Donec elit. Proin feugiat, mauris sed interdum gravida, enim enim iaculis diam, at viverra nisl felis et turpis. Aliquam sagittis. Ut hendrerit rutrum leo. Duis felis magna, molestie sit amet, eleifend eget, pellentesque elementum, nisl. Proin risus magna, blandit a, elementum vel, tristique sit amet, felis. Nam leo nulla, tempus facilisis, consectetuer at, interdum sit amet, est.</p>
<h3>Headings</h3>
<p>Vestibulum tempor bibendum urna. Suspendisse ac lorem. Praesent in tellus nec mi hendrerit malesuada. Fusce condimentum velit. Ut imperdiet egestas quam. In ut magna sit amet nisi mollis placerat. Fusce auctor. Duis semper vehicula enim. Curabitur suscipit lacinia ipsum. Mauris sem. Maecenas aliquam neque eget elit. Quisque condimentum mi et leo. Vestibulum enim. Praesent leo lacus, cursus a, vehicula ac, sollicitudin et, nulla. Fusce a justo. Nulla facilisi. Proin adipiscing magna eu diam.</p>
<h3>Headings</h3>
<p>Aliquam semper, mi sit amet feugiat aliquam, ante arcu tempus enim, in porttitor risus risus congue turpis. Morbi volutpat. Proin sapien nibh, pretium non, tempor eget, laoreet vitae, dui. Curabitur vel mauris. Aenean facilisis. Aenean accumsan ante ut neque. Duis dui. Curabitur dictum venenatis ligula. Nullam nulla. Morbi mi risus, gravida vulputate, laoreet eget, vestibulum sit amet, dolor. In volutpat dui ut purus. Aenean porta dapibus nunc. Cras sed lacus nec ligula luctus tincidunt. Praesent nonummy, ante et tincidunt sagittis, diam mauris sollicitudin ligula, eget tempor augue diam at elit.</p>
<h3>Headings</h3>
<p>Etiam est. Sed lectus turpis, laoreet ut, lobortis vitae, eleifend at, nisl. Fusce tempus mollis nisl. Vestibulum semper dictum nisi. Proin elit. Ut arcu enim, auctor eu, molestie hendrerit, sagittis vitae, sapien. Sed enim. Nam bibendum adipiscing risus. Aliquam erat volutpat. Vestibulum volutpat. Ut sem neque, dapibus quis, adipiscing rutrum, hendrerit ut, dolor. Curabitur facilisis dolor ut ipsum. Cras adipiscing eros vel elit. Integer auctor faucibus odio. Duis convallis, metus blandit dignissim vestibulum, nibh nisl auctor ipsum, ut commodo diam lacus condimentum pede.</p>
</div>
<div id="content">
<h3>Headings</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sit amet nisl et nisi tincidunt sagittis. Nulla in turpis. Nulla interdum leo quis felis. Suspendisse metus mauris, consequat ornare, aliquet sed, egestas et, odio. Curabitur fringilla. Donec quis urna in quam suscipit pretium. Vestibulum nonummy augue imperdiet ipsum. Cras congue, pede sed euismod ullamcorper, odio pede placerat justo, sed tempor orci velit a ante. Phasellus dignissim enim. Cras pharetra ullamcorper quam. Vivamus consectetuer magna id magna. Donec fermentum, diam sed molestie pharetra, diam nisl gravida velit, id semper dui massa sit amet sapien. Mauris dui.</p>
<h3>Headings</h3>
<p>Nam feugiat. Nam eleifend, diam ac convallis rhoncus, lacus nibh bibendum purus, id porta leo elit sodales dolor. Ut dui risus, convallis at, fringilla at, elementum quis, felis. Fusce quis urna. Etiam fringilla sapien sit amet nisl. Ut pulvinar nibh at mauris. Donec elit. Proin feugiat, mauris sed interdum gravida, enim enim iaculis diam, at viverra nisl felis et turpis. Aliquam sagittis. Ut hendrerit rutrum leo. Duis felis magna, molestie sit amet, eleifend eget, pellentesque elementum, nisl. Proin risus magna, blandit a, elementum vel, tristique sit amet, felis. Nam leo nulla, tempus facilisis, consectetuer at, interdum sit amet, est.</p>
<h3>Headings</h3>
<p>Vestibulum tempor bibendum urna. Suspendisse ac lorem. Praesent in tellus nec mi hendrerit malesuada. Fusce condimentum velit. Ut imperdiet egestas quam. In ut magna sit amet nisi mollis placerat. Fusce auctor. Duis semper vehicula enim. Curabitur suscipit lacinia ipsum. Mauris sem. Maecenas aliquam neque eget elit. Quisque condimentum mi et leo. Vestibulum enim. Praesent leo lacus, cursus a, vehicula ac, sollicitudin et, nulla. Fusce a justo. Nulla facilisi. Proin adipiscing magna eu diam.</p>
<h3>Headings</h3>
<p>Aliquam semper, mi sit amet feugiat aliquam, ante arcu tempus enim, in porttitor risus risus congue turpis. Morbi volutpat. Proin sapien nibh, pretium non, tempor eget, laoreet vitae, dui. Curabitur vel mauris. Aenean facilisis. Aenean accumsan ante ut neque. Duis dui. Curabitur dictum venenatis ligula. Nullam nulla. Morbi mi risus, gravida vulputate, laoreet eget, vestibulum sit amet, dolor. In volutpat dui ut purus. Aenean porta dapibus nunc. Cras sed lacus nec ligula luctus tincidunt. Praesent nonummy, ante et tincidunt sagittis, diam mauris sollicitudin ligula, eget tempor augue diam at elit.</p>
<h3>Headings</h3>
<p>Etiam est. Sed lectus turpis, laoreet ut, lobortis vitae, eleifend at, nisl. Fusce tempus mollis nisl. Vestibulum semper dictum nisi. Proin elit. Ut arcu enim, auctor eu, molestie hendrerit, sagittis vitae, sapien. Sed enim. Nam bibendum adipiscing risus. Aliquam erat volutpat. Vestibulum volutpat. Ut sem neque, dapibus quis, adipiscing rutrum, hendrerit ut, dolor. Curabitur facilisis dolor ut ipsum. Cras adipiscing eros vel elit. Integer auctor faucibus odio. Duis convallis, metus blandit dignissim vestibulum, nibh nisl auctor ipsum, ut commodo diam lacus condimentum pede.</p>
</div>
<div id="footer">Created by Dieter Schneider | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a></div>
</body>
</html>
Related examples in the same category