ramblingsoul4
<!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>Rambling Soul 4</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
background-image: url(ramblingsoul4-images/pagebg.gif);
background-repeat: repeat;
background-color: #D7C9B4;
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
}
#contents p {
line-height: 22px;
color: #3C0000;
}
#header #logo {
background-image: url(ramblingsoul4-images/logo.gif);
background-repeat: no-repeat;
height: 151px;
width: 204px;
float: left;
}
#header #logo h1 {
font-size: 24px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: capitalize;
font-weight: normal;
text-align: center;
margin-top: 30px;
margin-right: 25px;
margin-left: 20px;
color: #160000;
}
#header #topmenu {
list-style-image: none;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 220px;
padding-top: 122px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 650px;
}
#header #topmenu li {
display: inline;
}
#header {
background-image: url(ramblingsoul4-images/bg.gif);
background-repeat: repeat-x;
height: 155px;
position:fixed;
top:0;
left:0;
width:100%;
z-index:2;
}
#header #topmenu a {
background-image: url(ramblingsoul4-images/topmenu.gif);
background-repeat: no-repeat;
display: block;
height: 26px;
width: 122px;
padding-top: 6px;
float: left;
text-align: center;
text-decoration: none;
color: #DB584D;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
font-weight: normal;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
}
#menu {
margin: 0px;
position:fixed;
list-style-image: none;
background-image: url(ramblingsoul4-images/sidebar.gif);
height: 328px;
width: 191px;
top: 152px;
left: 0px;
z-index: 5;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#contents .highlight {
background-color: #F2EEE6;
color: #000000;
}
#header #logo a {
color: #000000;
text-decoration: none;
}
#contents {
margin-top: 175px;
margin-right: 15px;
margin-left: 215px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
margin-bottom: 35px;
}
#contents a {
color: #CC3300;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CC3300;
}
#contents #dashbar {
float: right;
width: 200px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 15px;
padding: 5px;
background-color: #EDE7DC;
border: 1px dashed #CEBE9F;
}
#contents #dashbar h2 {
font-size: 17px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
display: block;
margin: 0px;
padding: 3px;
background-color: #8D0000;
color: #B66B6B;
background-image: url(ramblingsoul4-images/bg.gif);
background-position: 25px;
}
#contents #dashbar p {
font-size: 11px;
line-height: 16px;
color: #000000;
}
#sidemenu {
}
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:25px;
padding:0;
color:#CB9898;
font-size:x-small;
font-style:normal;
text-align:center;
background-color: #5D0000;
background-image: url(ramblingsoul4-images/bg.gif);
background-repeat: repeat-x;
background-position: 0px -50px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #310000;
}
#header #topmenu a:visited,active {
background-image: url(ramblingsoul4-images/topmenu.gif);
background-repeat: no-repeat;
display: block;
height: 26px;
width: 122px;
padding-top: 6px;
float: left;
text-align: center;
text-decoration: none;
color: #DB584D;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
font-weight: normal;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
}
#header #topmenu a:hover {
background-image: url(ramblingsoul4-images/topmenu_h.gif);
background-repeat: no-repeat;
display: block;
height: 26px;
width: 122px;
padding-top: 6px;
float: left;
text-align: center;
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
font-weight: normal;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
}
#header #topmenu .current a {
background-image: url(ramblingsoul4-images/topmenu_h.gif);
background-repeat: no-repeat;
display: block;
height: 26px;
width: 122px;
padding-top: 6px;
float: left;
text-align: center;
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
font-weight: normal;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
}
#header #topmenu .current a:visited,active {
background-image: url(ramblingsoul4-images/topmenu_h.gif);
background-repeat: no-repeat;
display: block;
height: 26px;
width: 122px;
padding-top: 6px;
float: left;
text-align: center;
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
font-weight: normal;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
}
#contents a:visited,active {
color: #CC3300;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CC3300;
}
#contents a:hover {
color: #CC3300;
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#contents #dashbar .author {
display: block;
padding: 4px;
float: left;
margin-top: 15px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
background-color: #EEDDDD;
border: 1px solid #D1A3A3;
}
#contents h1 {
font-size: 22px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #810000;
}
#contents blockquote {
margin: 0px;
display: block;
background-image: url(ramblingsoul4-images/quote.gif);
background-repeat: no-repeat;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 65px;
}
#contents blockquote p {
line-height: 14px;
}
#contents h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
}
#contents h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
#contents ul {
list-style-type: none;
margin: 0px;
}
#contents li {
display: block;
background-image: url(ramblingsoul4-images/list.gif);
background-repeat: no-repeat;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 20px;
background-position: 0px 3px;
}
#contents .warning {
font-size: 14px;
color: #000000;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFCC;
display: block;
margin: 15px;
padding: 15px;
text-align: center;
}
#menu li {
list-style-type: none;
text-transform: capitalize;
}
#menu a {
color: #CB9898;
text-decoration: none;
margin: 5px;
padding: 3px;
display: block;
}
#menu a:visited,active {
color: #CB9898;
text-decoration: none;
margin: 5px;
padding: 3px;
display: block;
}
#menu a:hover {
color: #FFFFFF;
text-decoration: none;
margin: 5px;
padding: 3px;
display: block;
}
#header #logo a:visited,active {
color: #000000;
text-decoration: none;
}
#header #logo a:hover {
color: #9A0000;
text-decoration: none;
}
#footer a {
color: #CCCCCC;
text-decoration: none;
}
#footer a:visited,active {
color: #CCCCCC;
text-decoration: none;
}
#footer a:hover {
color: #FFFFFF;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="http://www.free-css.com/">Rambling<br />
Soul</a></h1>
</div>
<ul id="topmenu">
<li class="current"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Downloads</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="contents">
<div id="dashbar">
<h2>About Me</h2>
<img class="author" src="ramblingsoul4-images/author.gif" alt="My Photo" />
<p>My name is Roshan. I am a part-time Web designer working in Brunei. You can download more templates from my website. </p>
<p>Vestibulum malesuada iaculis leo. Cras eu nunc. Cras sapien nulla, iaculis ac, bibendum vel, iaculis ac, turpis. .. <a href="http://www.free-css.com/">Read More</a> </p>
</div>
<h1>Playing with positioning</h1>
<blockquote>
<p> This design was made with references from this article. Download it, use it and if you like, please let me know. I will appreciate it. </p>
</blockquote>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent rhoncus nisi nec lacus. Praesent convallis molestie nisl. Ut metus enim, venenatis nec, egestas porttitor, tempor eget, ipsum. Proin commodo. Maecenas quis elit ut sem accumsan pulvinar. Morbi et urna nec lacus condimentum eleifend. Fusce id est. Aliquam pellentesque. Mauris feugiat lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam metus. Maecenas mi massa, porttitor eu, imperdiet nec, mollis a, augue. Nulla ullamcorper nibh vel velit. Ut condimentum turpis sed dui. Proin vestibulum, tortor pretium aliquet eleifend,</p>
<ul>
<li>Metus velit vestibulum enim, id pulvinar justo metus vel enim.</li>
<li>Proin laoreet pretium turpis. Praesent ipsum lorem, malesuada at, mattis in, dignissim ac, nisl.</li>
<li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </li>
<li>Quisque mi ligula, bibendum a, consectetuer vel, rhoncus ut, arcu. Proin ut pede ut sapien luctus luctus.</li>
</ul>
<span class="warning"> This design will not work with IE 6 and older browsers & IE Mac </span>
<h2> Heading 2 looks like this</h2>
<p>Vestibulum malesuada iaculis leo. Cras eu nunc. Cras sapien nulla, iaculis ac, bibendum vel, iaculis ac, turpis. Nam rhoncus suscipit enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices. Aenean faucibus turpis id sapien. Duis sed tellus. Nullam elementum, mi non molestie ultricies, neque sapien semper augue, in scelerisque dui libero ac nulla. Aenean feugiat lectus vel ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus euismod tellus non felis. Nam mi ante, eleifend quis, ornare dignissim, sodales ut, dolor. Praesent tempus nunc et nunc. Integer auctor, erat vel mattis laoreet, sem nunc luctus ligula, eu pulvinar nisl tortor non ipsum. </p>
<h3>Heading 3 looks like this</h3>
<p>Donec vitae dui non lorem porttitor rhoncus. Phasellus ullamcorper bibendum tellus. Aliquam erat volutpat. Praesent dapibus nulla eu lorem. Maecenas risus dui, vulputate nec, tincidunt non, pretium consectetuer, sapien. Donec sodales. Praesent luctus, turpis sit amet porta pharetra, turpis justo tincidunt arcu, vitae sagittis urna elit a mi. Suspendisse condimentum pharetra lacus. Cras eu augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam posuere, leo a tincidunt accumsan, ligula dolor commodo augue, eget volutpat eros mauris sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer dolor tortor, pellentesque vitae, vulputate sit amet, tempus vel, sapien. Praesent congue, nulla sed condimentum lacinia, purus est tincidunt metus, sed luctus velit augue ac dui. Cras nunc. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent rhoncus nisi nec lacus. Praesent convallis molestie nisl. Ut metus enim, venenatis nec, egestas porttitor, tempor eget, ipsum. Proin commodo. Maecenas quis elit ut sem accumsan pulvinar. Morbi et urna nec lacus condimentum eleifend. Fusce id est. Aliquam pellentesque. Mauris feugiat lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam metus. Maecenas mi massa, porttitor eu, imperdiet nec, mollis a, augue. Nulla ullamcorper nibh vel velit. Ut condimentum turpis sed dui. Proin vestibulum, tortor pretium aliquet eleifend, metus velit vestibulum enim, id pulvinar justo metus vel enim. Proin laoreet pretium turpis. Praesent ipsum lorem, malesuada at, mattis in, dignissim ac, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque mi ligula, bibendum a, consectetuer vel, rhoncus ut, arcu. Proin ut pede ut sapien luctus luctus. </p>
<p>Vestibulum malesuada iaculis leo. Cras eu nunc. Cras sapien nulla, iaculis ac, bibendum vel, iaculis ac, turpis. Nam rhoncus suscipit enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices. Aenean faucibus turpis id sapien. Duis sed tellus. Nullam elementum, mi non molestie ultricies, neque sapien semper augue, in scelerisque dui libero ac nulla. Aenean feugiat lectus vel ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus euismod tellus non felis. Nam mi ante, eleifend quis, ornare dignissim, sodales ut, dolor. Praesent tempus nunc et nunc. Integer auctor, erat vel mattis laoreet, sem nunc luctus ligula, eu pulvinar nisl tortor non ipsum. </p>
<p>Donec vitae dui non lorem porttitor rhoncus. Phasellus ullamcorper bibendum tellus. Aliquam erat volutpat. Praesent dapibus nulla eu lorem. Maecenas risus dui, vulputate nec, tincidunt non, pretium consectetuer, sapien. Donec sodales. Praesent luctus, turpis sit amet porta pharetra, turpis justo tincidunt arcu, vitae sagittis urna elit a mi. Suspendisse condimentum pharetra lacus. Cras eu augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam posuere, leo a tincidunt accumsan, ligula dolor commodo augue, eget volutpat eros mauris sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer dolor tortor, pellentesque vitae, vulputate sit amet, tempus vel, sapien. Praesent congue, nulla sed condimentum lacinia, purus est tincidunt metus, sed luctus velit augue ac dui. Cras nunc. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent rhoncus nisi nec lacus. Praesent convallis molestie nisl. Ut metus enim, venenatis nec, egestas porttitor, tempor eget, ipsum. Proin commodo. Maecenas quis elit ut sem accumsan pulvinar. Morbi et urna nec lacus condimentum eleifend. Fusce id est. Aliquam pellentesque. Mauris feugiat lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam metus. Maecenas mi massa, porttitor eu, imperdiet nec, mollis a, augue. Nulla ullamcorper nibh vel velit. Ut condimentum turpis sed dui. Proin vestibulum, tortor pretium aliquet eleifend, metus velit vestibulum enim, id pulvinar justo metus vel enim. Proin laoreet pretium turpis. Praesent ipsum lorem, malesuada at, mattis in, dignissim ac, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque mi ligula, bibendum a, consectetuer vel, rhoncus ut, arcu. Proin ut pede ut sapien luctus luctus. </p>
<p>Vestibulum malesuada iaculis leo. Cras eu nunc. Cras sapien nulla, iaculis ac, bibendum vel, iaculis ac, turpis. Nam rhoncus suscipit enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices. Aenean faucibus turpis id sapien. Duis sed tellus. Nullam elementum, mi non molestie ultricies, neque sapien semper augue, in scelerisque dui libero ac nulla. Aenean feugiat lectus vel ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus euismod tellus non felis. Nam mi ante, eleifend quis, ornare dignissim, sodales ut, dolor. Praesent tempus nunc et nunc. Integer auctor, erat vel mattis laoreet, sem nunc luctus ligula, eu pulvinar nisl tortor non ipsum. </p>
<p>Donec vitae dui non lorem porttitor rhoncus. Phasellus ullamcorper bibendum tellus. Aliquam erat volutpat. Praesent dapibus nulla eu lorem. Maecenas risus dui, vulputate nec, tincidunt non, pretium consectetuer, sapien. Donec sodales. Praesent luctus, turpis sit amet porta pharetra, turpis justo tincidunt arcu, vitae sagittis urna elit a mi. Suspendisse condimentum pharetra lacus. Cras eu augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam posuere, leo a tincidunt accumsan, ligula dolor commodo augue, eget volutpat eros mauris sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer dolor tortor, pellentesque vitae, vulputate sit amet, tempus vel, sapien. Praesent congue, nulla sed condimentum lacinia, purus est tincidunt metus, sed luctus velit augue ac dui. Cras nunc. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent rhoncus nisi nec lacus. Praesent convallis molestie nisl. Ut metus enim, venenatis nec, egestas porttitor, tempor eget, ipsum. Proin commodo. Maecenas quis elit ut sem accumsan pulvinar. Morbi et urna nec lacus condimentum eleifend. Fusce id est. Aliquam pellentesque. Mauris feugiat lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam metus. Maecenas mi massa, porttitor eu, imperdiet nec, mollis a, augue. Nulla ullamcorper nibh vel velit. Ut condimentum turpis sed dui. Proin vestibulum, tortor pretium aliquet eleifend, metus velit vestibulum enim, id pulvinar justo metus vel enim. Proin laoreet pretium turpis. Praesent ipsum lorem, malesuada at, mattis in, dignissim ac, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque mi ligula, bibendum a, consectetuer vel, rhoncus ut, arcu. Proin ut pede ut sapien luctus luctus. </p>
<p>Vestibulum malesuada iaculis leo. Cras eu nunc. Cras sapien nulla, iaculis ac, bibendum vel, iaculis ac, turpis. Nam rhoncus suscipit enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices. Aenean faucibus turpis id sapien. Duis sed tellus. Nullam elementum, mi non molestie ultricies, neque sapien semper augue, in scelerisque dui libero ac nulla. Aenean feugiat lectus vel ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus euismod tellus non felis. Nam mi ante, eleifend quis, ornare dignissim, sodales ut, dolor. Praesent tempus nunc et nunc. Integer auctor, erat vel mattis laoreet, sem nunc luctus ligula, eu pulvinar nisl tortor non ipsum. </p>
<p>Donec vitae dui non lorem porttitor rhoncus. Phasellus ullamcorper bibendum tellus. Aliquam erat volutpat. Praesent dapibus nulla eu lorem. Maecenas risus dui, vulputate nec, tincidunt non, pretium consectetuer, sapien. Donec sodales. Praesent luctus, turpis sit amet porta pharetra, turpis justo tincidunt arcu, vitae sagittis urna elit a mi. Suspendisse condimentum pharetra lacus. Cras eu augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam posuere, leo a tincidunt accumsan, ligula dolor commodo augue, eget volutpat eros mauris sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer dolor tortor, pellentesque vitae, vulputate sit amet, tempus vel, sapien. Praesent congue, nulla sed condimentum lacinia, purus est tincidunt metus, sed luctus velit augue ac dui. Cras nunc. </p>
</div>
<ul id="menu">
<li><a href="http://www.free-css.com/">augue, eget</a></li>
<li><a href="http://www.free-css.com/">volutpat eros</a></li>
<li><a href="http://www.free-css.com/">mauris sit amet</a></li>
<li><a href="http://www.free-css.com/">arcu. Class aptent</a></li>
<li><a href="http://www.free-css.com/">taciti sociosqu ad</a></li>
<li><a href="http://www.free-css.com/">litora torquent</a></li>
<li><a href="http://www.free-css.com/">nostra, per</a></li>
</ul>
<div id="footer"> <a href="http://www.free-css.com/">XHTML 1.0</a> | <a href="http://www.free-css.com/">CSS</a> | Designed by : <a href="http://www.ramblingsoul.com">Ramblingsoul </a></div>
</body>
</html>
Related examples in the same category