Day by day post layout
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Another Rambling Soul Template</title>
<style type='text/css'>
body {
background-image: url(22_rambling_soul_9-images/bg.png);
background-repeat: repeat;
background-color: #6B0808;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-attachment: fixed;
}
#wrap {
background-image: url(22_rambling_soul_9-images/pagebg.png);
background-repeat: repeat-y;
width: 782px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#wrap #header {
background-image: url(22_rambling_soul_9-images/header.png);
background-repeat: no-repeat;
height: 209px;
}
#wrap #header h1 {
margin: 0px;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
font-weight: normal;
color: #F3E3C8;
width: 450px;
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 30px;
}
#wrap #header .desc {
display: block;
font-size: 12px;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#wrap #header #topnav {
display: block;
margin-left: 525px;
margin-right: 35px;
margin-top: 15px;
}
#wrap #header #topnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#wrap #header #topnav li {
height: 20px;
display: block;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
list-style-type: none;
margin-right: auto;
margin-left: auto;
text-transform: uppercase;
}
#wrap #contents #left .postheading {
display: block;
margin: 0px;
padding: 0px;
}
#wrap #contents #left .postheading h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 25px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #B7412C;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 91px;
display: block;
}
#wrap #contents #left .postheading .headspacer {
clear: left;
margin: 0px;
padding: 0px;
font-size: 1px;
}
#wrap #contents #left .postheading .postinfo {
font-size: 10px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 91px;
display: block;
padding: 0px;
}
#wrap #contents #left .postheading .cal .date {
display: block;
font-size: 31px;
padding-top: 15px;
text-align: center;
padding-right: 4px;
padding-left: 4px;
color: #0099CC;
margin: 0px;
line-height: 32px;
}
#wrap #contents #left ul {
list-style-type: none;
margin: 15px;
}
#wrap #contents #left li {
margin-bottom: 5px;
padding: 2px;
display: block;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CC6600;
}
#wrap #contents #sidebar ul {
margin: 0px;
list-style-type: none;
display: block;
background-image: url(22_rambling_soul_9-images/sidemenuhvr.png);
background-position: bottom;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}
#wrap #contents #sidebar li {
height: 22px;
display: block;
}
#wrap #contents #sidebar a {
color: #993300;
text-decoration: none;
display: block;
height: 18px;
padding-top: 4px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FBF5EB;
}
#wrap #contents #sidebar h2 {
font-size: 16px;
padding: 5px;
display: block;
background-image: url(22_rambling_soul_9-images/sidemenuhvr.png);
background-repeat: no-repeat;
background-position: center bottom;
text-transform: uppercase;
color: #993300;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#wrap #contents .clear {
clear: both;
}
#wrap #contents #left .postheading .cal .month {
font-size: 9px;
display: block;
padding-top: 11px;
padding-left: 4px;
padding-right: 10px;
color: #BB412D;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#wrap #contents #left .postheading h1 a {
color: #B7412C;
text-decoration: none;
}
#wrap #contents #left .postheading .cal {
background-image: url(22_rambling_soul_9-images/datecal.png);
background-repeat: no-repeat;
height: 71px;
width: 69px;
display: block;
float: left;
padding: 10px;
}
#wrap #contents {
margin-top: 10px;
margin-bottom: 0px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
}
#wrap #header #topnav a {
color: #CC6600;
text-decoration: none;
font-weight: bold;
}
#wrap #contents #sidebar {
width: 211px;
float: right;
padding-right: 25px;
padding-left: 25px;
}#wrap #contents #left {
margin-top: 0px;
margin-right: 270px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 15px;
}
#wrap #contents #left p {
line-height: 20px;
}
#wrap #header #topnav a:visited,active {
color: #CC6600;
text-decoration: none;
font-weight: bold;
}
#wrap #header #topnav a:hover {
color: #F3E3C8;
text-decoration: none;
font-weight: bold;
}
#wrap #contents #left .postheading h1 a:visited,active {
color: #B7412C;
text-decoration: none;
}
#wrap #contents #left .postheading h1 a:hover {
color: #000000;
text-decoration: none;
background-color: #F8F0E2;
}
#wrap #contents #left .postbottom {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
background-image: url(22_rambling_soul_9-images/postinfobg.png);
background-repeat: no-repeat;
background-position: center bottom;
height: 45px;
padding-top: 25px;
text-align: center;
}
#wrap #contents #left h2 {
font-size: 18px;
color: #996633;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
#wrap #contents #left blockquote {
background-color: #F7EEDD;
padding-left: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #FF9966;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 1px;
padding-bottom: 1px;
}
#wrap #contents #left blockquote p {
line-height: 20px;
margin: 0px;
}
#wrap #contents #left a {
color: #B7412C;
text-decoration: underline;
}
#wrap #contents #left a:visited,active {
color: #B7412C;
text-decoration: underline;
}
#wrap #contents #left a:hover {
color: #000000;
text-decoration: none;
background-color: #FAF2E6;
}
#wrap #contents #sidebar a:visited,active {
color: #993300;
text-decoration: none;
display: block;
height: 18px;
padding-top: 4px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FBF5EB;
}
#wrap #contents #sidebar a:hover {
color: #000000;
text-decoration: underline;
display: block;
height: 18px;
padding-top: 4px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FBF5EB;
}
#footer span {
margin-left:35px;
}
#footer {
background-image: url(22_rambling_soul_9-images/footerbg.png);
height: 40px;
padding-top: 30px;
background-position: 0px 0px;
float: none;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #F3E3C8;
font-size: 10px;
width: 782px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer a {
color: #FFFFFF;
}
#footer a:visited,active {
color: #FFFFFF;
}
#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
#wrap #header h1 a {
color: #F3E3C8;
text-decoration: none;
}
#wrap #header h1 a:visited,active {
color: #F3E3C8;
text-decoration: none;
}
#wrap #header h1 a:hover {
color: #FFFFFF;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">YourSiteName.com </a><span class="desc">Another Free Blog Template</span></h1>
<div id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="contents">
<div id="sidebar">
<h2>Categories</h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a> </li>
</ul>
<h2>Recent Posts </h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a> </li>
</ul>
<h2>Recent Comments </h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a> </li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a> </li>
</ul>
<h2>Blogroll</h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a> </li>
</ul>
<h2>Meta</h2>
<ul>
<li><a href="http://www.ramblingsoul.com">Rambling Soul </a></li>
<li><a href="#">Valid XHTML 1.0 </a></li>
<li><a href="#">WAI</a></li>
<li><a href="http://www.opendesigns.org">Open Designs </a></li>
</ul>
<p> </p>
</div>
<div id="left">
<div class="postheading">
<span class="cal">
<span class="date">
21
</span>
<span class="month">
November
</span>
</span>
<h1>This is Heading One</h1>
<span class="postinfo">by :AuthorName | News</span>
<div class="headspacer"></div>
</div>
<p> Sed vestibulum sapien a massa. Pellentesque sed ligula. Fusce ut sem accumsan urna pretium faucibus. Quisque commodo venenatis sem. Maecenas pellentesque. Maecenas ipsum lorem, malesuada a, vehicula vel, porta sit amet, nisi. Nam lorem nulla, mollis sit amet, fermentum eget, eleifend et, urna. Maecenas massa diam, laoreet at, euismod quis, tristique eu, dui. Praesent eu sem sed arcu blandit sollicitudin. Curabitur eu libero. In ligula. Vestibulum est ipsum, malesuada nec, auctor nec, pharetra a, arcu. Ut erat magna, euismod a, rutrum sed, porttitor a, dolor. Suspendisse ultrices nonummy metus. Donec ante nisl, hendrerit pharetra, accumsan ut, dictum pharetra, quam. Etiam pharetra tristique dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quam metus, rutrum vitae, consequat sed, sollicitudin eget, sapien. Nunc tristique vestibulum massa. <a href="#">Read More</a> </p>
<div class="postbottom">Posted under <a href="#">News</a> | <a href="#">12 Comments</a> |<a href="#"> Add Comment </a></div>
<div class="postheading">
<span class="cal">
<span class="date">
5
</span>
<span class="month">
June
</span>
</span>
<h1><a href="#">This is Heading One with link and long text. Vestibulum ultrices est non libero.</a> </h1>
<span class="postinfo">by :AuthorName | News</span>
<div class="headspacer"></div>
</div>
<p>Vestibulum ultrices est non libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean leo est, fringilla commodo, aliquet id, imperdiet sit amet, diam. Ut nonummy, pede ut lobortis suscipit, nisi justo volutpat purus, et suscipit tellus ipsum sed mauris. Nullam volutpat, tortor a interdum aliquet, metus urna tincidunt massa, consequat pretium tortor arcu a urna. Donec eget est. Cras tortor magna, aliquam ut, tempor et, interdum non, nunc. Sed at dolor. Maecenas non lacus. Donec egestas venenatis ipsum. Aenean justo eros, auctor eu, dignissim id, fermentum sed, justo. Nulla facilisi. Curabitur id orci rutrum tellus aliquam ornare. Maecenas eu neque. </p>
<h2>Heading 2 : Blockquote and a list</h2>
<p>Nam tempor faucibus mi. Curabitur vehicula, magna at porttitor feugiat, mauris turpis sollicitudin nulla, vel porta libero nibh id nunc. Vestibulum condimentum. </p>
<blockquote><p>Aliquam luctus purus sit amet pede. Suspendisse tristique neque a libero. Duis consectetuer rhoncus pede. Aenean vehicula lacus in sapien. Morbi suscipit, augue at vestibulum mollis, libero quam iaculis pede, eu varius turpis libero vitae nisi. Nulla fringilla mauris vitae dolor.</p></blockquote>
<p> In sit amet erat id orci tincidunt dignissim. Nam egestas erat vitae purus. Sed tellus. Proin mauris. Nunc faucibus, velit vel fringilla ullamcorper, orci dolor auctor lorem, non posuere diam nibh in massa. Quisque mi odio, mollis nec, accumsan a, interdum non, justo. </p>
<ul>
<li>Cras a felis. Duis erat felis, </li>
<li>fringilla eget, ultrices eget, rutrum aliquam, odio. </li>
<li>Curabitur eget nibh. </li>
<li>Proin lobortis aliquet pede. </li>
<li>Nam nec ligula interdum elit dignissim dignissim</li>
</ul>
<div class="postbottom">Posted under <a href="#">News</a> | <a href="#">12 Comments</a> |<a href="#"> Add Comment </a></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer"><span>Your copyright information | <a href="#">Put </a>| <a href="#">Some</a> | <a href="#">Links</a></span><br />
<span>Design by <a href="http://www.ramblingsoul.com">Rambling Soul </a>| Patterns by <a href="http://www.peschetz.at/">peschetz</a></span>
</div>
</body>
</html>
Related examples in the same category