christines-blog
<!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>Christine's blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
* {margin: 0; padding: 0;}
body {
background-image: url(christines-blog-images/bodyBG.jpg);
background-repeat: no-repeat;
background-position: center top;
position: relative;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-align: center;
}
#container {
width: 600px;
margin: auto;
background-image: url(christines-blog-images/contentTile.jpg);
position: relative;
text-align: left;
}
#top {
height: 41px;
background-image: url(christines-blog-images/search.png);
background-repeat: no-repeat;
background-color: #FFFFFF;
}
#header {
height: 221px;
background-image: url(christines-blog-images/header.png);
}
#main_nav {
height: 40px;
padding-top: 18px;
text-align: center;
background-image: url(christines-blog-images/navbar.jpg);
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 40px;
font-size: 20px;
text-transform: uppercase;
}
#content {
background-image: url(christines-blog-images/content.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 130px;
padding-bottom: 20px;
padding-left: 20px;
}
#footer {
text-align: center;
padding: 20px;
clear: both;
}
#navbox {
position: absolute;
z-index: 200;
top: 390px;
left: 480px;
height: 100px;
width: 165px;
padding: 10px;
}
#navlistbox
{
border-bottom: 1px dotted gray;
}
#navlistbox li
{
list-style: none;
padding: 0.25em;
border-top: 1px dotted gray;
}
#navlistbox li a { text-decoration: none; }
h1 { text-indent: -5000px;}
h2 { text-indent: -5000px;}
h3{
color: #000000;
border-bottom: 1px dotted gray;
font-size: 14px;
}
p {margin: 20px 0;}
a:link {
color: #CC33CC;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #CC00CC;
text-decoration: none;
} /* visited link */
a:hover {
color: #FF00FF
} /* mouse over link */
a:active {
color: #990099
} /* selected link */
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="header">
<h1>Christine's blog</h1>
<h2>Girl stuff blogging</h2>
</div>
<div id="main_nav">
<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/">About</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
<li><a href="http://www.free-css.com/">Fun</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="content">
<h3>Vestibulum placerat</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam erat, venenatis a, dignissim vel, placerat sit amet, magna. Vestibulum placerat consectetuer nisi. Nullam ultricies egestas ante. Nullam placerat elit et est. Donec ligula nunc, convallis non, ornare vitae, rhoncus non, neque. Donec odio felis, sagittis nec, aliquam eu, vehicula eu, lacus. Maecenas sapien. Vivamus eget diam. Nulla facilisi. Nulla in quam id risus lobortis interdum. Morbi auctor pretium metus. Proin id dolor. Cras volutpat nisl. Fusce nec enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis malesuada eros nec dolor.</p>
<h3>Maecenas id urna</h3>
<p>Curabitur at pede sed libero vehicula eleifend. Morbi libero enim, mattis eget, mattis fermentum, vulputate vitae, enim. Aenean dictum ante vel risus. In hac habitasse platea dictumst. Aliquam nec mi ac dui laoreet dictum. Morbi porta, nulla ut hendrerit fermentum, lacus velit consectetuer sem, sit amet imperdiet orci massa ac eros. Integer vel est. Nulla rhoncus odio id ante. Maecenas id urna. Nam tellus. Nam eu purus at lectus laoreet mollis. Praesent pulvinar. Ut magna felis, viverra a, pellentesque at, vehicula et, lectus. Suspendisse et eros. Maecenas vel ligula ut ante adipiscing tempor. Aenean mi leo, posuere in, consequat sed, condimentum vitae, arcu. Mauris semper. Nulla facilisi.</p>
<h3>Morbi vel tortor</h3>
<p>Integer nec ante. Maecenas lobortis turpis dapibus purus. Donec augue est, cursus nec, tempus eget, congue in, justo. Sed blandit ante at libero. Integer nisi libero, pretium quis, pretium eu, tincidunt ut, nulla. Proin malesuada. Nulla facilisi. Suspendisse nec mauris. Vestibulum convallis sapien at nisi vehicula dignissim. Donec feugiat, nibh sit amet condimentum porttitor, turpis dolor tincidunt mauris, ut volutpat dolor tortor id nunc. Fusce nibh odio, sagittis vitae, dictum sed, iaculis non, est. Nulla mi. Nulla dapibus. Nam porttitor euismod turpis. Sed dictum nonummy tellus. Aliquam erat volutpat. Morbi vel tortor. Nulla facilisi. Morbi vehicula nulla tristique diam.</p>
</div>
<div id="navbox">
<ul id="navlistbox">
<li><a href="http://www.free-css.com/">Recent blogs</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li><a href="http://www.free-css.com/">Calendar</a></li>
<li><a href="http://www.free-css.com/">Friends</a></li>
</ul>
</div>
<div id="footer">Created by Dieter Schneider | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a></div>
</div>
</body>
</html>
Related examples in the same category