bookish
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bookish 1.0</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
bookish1.0 by nodethirtythree design
http://www.nodethirtythree.com
hope you enjoy it :)
*/
*
{
margin: 0px;
padding: 0px;
}
body
{
background: #fff url('bookish-images/bg.gif');
font-size: 11px;
font-family: "trebuchet ms", helvetica, sans-serif;
color: #857D74;
}
p
{
display: block;
text-align: justify;
}
a
{
color: #D97900;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
background-color: #D97900;
color: #FFFAF3;
}
em
{
font-style: italic;
}
.date
{
font-family: georgia, "times new roman", serif;
font-size: 10px;
}
h1,h2,h3,h4,h5,h6,th
{
font-family: georgia, "times new roman", serif;
text-transform: lowercase;
font-weight: normal;
}
.foot
{
height: 1px;
line-height: 1px;
clear: both;
}
.divider
{
border-bottom: solid 1px #F6F3F1;
}
th strong
{
color: #fff;
}
table
{
border-collapse: collapse;
width: 100%;
}
th
{
background: #824900 url('bookish-images/thbg.gif') repeat-x;
height: 29px;
padding-left: 11px;
padding-right: 11px;
color: #fff;
text-align: left;
border-left: solid 1px #A8814D;
border-bottom: solid 2px #ffffff;
}
tr
{
height: 30px;
}
td
{
padding-left: 11px;
padding-right: 11px;
border-left: solid 1px #EED9C3;
border-bottom: solid 1px #ffffff;
}
td.first,th.first
{
border-left: 0px;
}
tr.rowA
{
background: #FFF0DE url('bookish-images/trbg1.gif') repeat-x;
}
tr.rowB
{
background: #FFFAF4 url('bookish-images/trbg2.gif') repeat-x;
}
#outer
{
width: 698px;
background: #fff url('bookish-images/mainbg.gif');
margin: 20px auto 0px auto;
padding: 10px 13px 0px 13px;
}
#outer2
{
width: 724px;
height: 3px;
font-size: 0px;
line-height: 0px;
padding: 0px;
background: #fff url('bookish-images/mainbg2.gif');
margin: 0px auto 0px auto;
}
#inner
{
background-image: url('bookish-images/cbg2.gif');
background-repeat: repeat-y;
}
#header
{
position: relative;
height: 80px;
background-image: url('bookish-images/headbg.gif');
}
#header h1
{
position: absolute;
bottom: 10px;
font-size: 26px;
padding-left: 26px;
color: #fff;
}
#header h1 strong
{
color: #fff;
}
#header h1 span
{
color: #D97900;
}
#menu
{
position: absolute;
right: 0px;
padding-right: 26px;
bottom: 14px;
color: #A75300;
}
#menu ul
{
list-style: none;
}
#menu li
{
float: left;
border-left: solid 1px #A75300;
padding-left: 8px;
margin-left: 8px;
}
#menu li.first
{
margin-left: 0px;
padding-left: 0px;
border-left: 0px;
}
#menu a
{
color: #fff;
}
#xbgA
{
height: 31px;
width: 500px;
position: absolute;
top: 0px;
background-image: url('bookish-images/cbg1.gif');
z-index: 1;
}
#xbgB
{
position: relative;
height: 32px;
width: 500px;
background-image: url('bookish-images/cbg3.gif');
z-index: 1;
}
#main
{
position: relative;
width: 500px;
margin: 3px -500px 0px 0px;
float: left;
}
#main_inner
{
padding: 31px 28px 18px 18px;
position: relative;
z-index: 5;
}
#main ul
{
list-style: none;
}
#main li
{
padding-left: 12px;
background-image: url('bookish-images/bullet.gif');
background-repeat: no-repeat;
background-position: 0px 6px;
}
#main h2,h3
{
color: #6C3C1E;
}
#main h2
{
font-size: 22px;
background-image: url('bookish-images/db1.gif');
background-repeat: no-repeat;
height: 60px;
padding-left: 22px;
margin-bottom: -15px;
}
#main h3
{
font-size: 12px;
background-image: url('bookish-images/db2.gif');
background-repeat: no-repeat;
height: 50px;
padding-left: 22px;
margin-bottom: -15px;
}
#main p
{
margin-bottom: 14px;
}
#main p strong
{
color: #725D46;
}
#main .content
{
position: relative;
padding-left: 22px;
}
img.cpic
{
position: relative;
top: -8px;
background-image: url('bookish-images/imgbg.gif');
width: 97px;
height: 73px;
padding: 10px;
}
img.right
{
float: right;
margin-left: 14px;
}
#main .divider
{
margin: 20px 0px 20px 0px;
}
#ccol1
{
position: relative;
width: 202px;
float: left;
border-right: solid 1px #F6F3F1;
padding-right: 20px;
}
#ccol2
{
position: relative;
width: 202px;
margin-left: 242px;
}
#side
{
position: relative;
float: right;
width: 194px;
margin: 3px 0px 0px 3px;
}
#side h3
{
background-image: url('bookish-images/rhbg.gif');
width: 180px;
height: 23px;
color: #fff;
font-size: 11px;
padding: 9px 0px 0px 14px;
}
#side .content
{
background-image: url('bookish-images/rhbg2.gif');
background-repeat: repeat-x;
padding: 22px 14px 0px 14px;
margin: 3px 0px 20px 0px;
}
#side ul
{
list-style: none;
}
#side li
{
border-top: solid 1px #F6F3F1;
padding-top: 5px;
margin: 5px 0px 0px 0px;
}
#side li.first
{
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
}
#side .divider
{
margin: 14px 0px 14px 0px;
}
#footer
{
width: 698px;
margin: 12px auto 0px auto;
padding-bottom: 24px;
text-align: center;
color: #6495A3;
}
#footer a
{
color: #7DAFBD;
}
#footer a:hover
{
background-color: #7DAFBD;
color: #E8FAFF;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1><span>My</span><strong>Website</strong>Name</h1>
<div id="menu">
<ul>
<li class="first"><a href="http://www.free-css.com/">homepage</a></li>
<li><a href="http://www.free-css.com/">recent articles</a></li>
<li><a href="http://www.free-css.com/">about us</a></li>
<li><a href="http://www.free-css.com/">contact us</a></li>
</ul>
</div>
</div>
<div id="inner">
<div id="main">
<div id="xbgA"></div>
<div id="main_inner">
<!-- Main start -->
<h2><strong>bookish<sup>1.0</sup></strong> by nodethirtythree</h2>
<div class="content"> <img src="bookish-images/pic.gif" class="cpic right" alt="" />
<p><strong>Bookish<sup>1.0</sup></strong> is a free, lightweight, tableless, W3C-compliant website design by NodeThirtyThree Design. You're free to dissect, manipulate and use it to your heart's content. We only ask that you link back to our site in some way. If you find this design useful, feel free to let us know :)</p>
<p>You can find more of our free work at this site or our site, or some of our commercial work on <a href="http://www.free-css.com/">4Templates.com</a>, a commercial website template site.</p>
</div>
<div class="foot"></div>
<div class="divider"></div>
<h3><strong>demonstration</strong> of tabulated data</h3>
<div class="content">
<table>
<tr>
<th class="first"><strong>post</strong> date</th>
<th><strong>author</strong> name</th>
<th><strong>entry</strong> title</th>
</tr>
<tr class="rowA">
<td class="first"><span class="date">05.31.2006</span></td>
<td><a href="http://www.free-css.com/">Sam Jackson</a></td>
<td><em><a href="http://www.free-css.com/">Lobortis commodo metus vestibulum</a></em></td>
</tr>
<tr class="rowB">
<td class="first"><span class="date">05.31.2006</span></td>
<td><a href="http://www.free-css.com/">Daniel Carter</a></td>
<td><em><a href="http://www.free-css.com/">Purus in eget odio in sapien</a></em></td>
</tr>
<tr class="rowA">
<td class="first"><span class="date">05.31.2006</span></td>
<td><a href="http://www.free-css.com/">Trent O'Neill</a></td>
<td><em><a href="http://www.free-css.com/">Adipiscing blandit quisque eros</a></em></td>
</tr>
<tr class="rowB">
<td class="first"><span class="date">05.31.2006</span></td>
<td><a href="http://www.free-css.com/">Jack Reznor</a></td>
<td><em><a href="http://www.free-css.com/">Cras lobortis commodo metus lorem</a></em></td>
</tr>
</table>
</div>
<div class="divider"></div>
<div id="ccol1">
<h3><strong>nullam</strong> sit amet</h3>
<div class="content">
<p><strong>Quisque eros cras</strong> lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque eros. Cras lobortis commodo metus lorem ipsum dolor sit amet nullam sed veroeros etiam augue nunc ante aliquam. Quisque augue tortor, facilisis sit etiam. <a href="http://www.free-css.com/">Continued ...</a></p>
</div>
</div>
<div id="ccol2">
<h3><strong>nullam</strong> sit amet</h3>
<div class="content">
<p>Vestibulum vel purus. In eget odio in ante aliquam quisque etiam.</p>
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit</a></li>
<li><a href="http://www.free-css.com/">Amet nullam sed</a></li>
<li><a href="http://www.free-css.com/">Veroeros etiam augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante aliquam quisque</a></li>
<li><a href="http://www.free-css.com/">Augue tortor facilisis sit</a></li>
<li><a href="http://www.free-css.com/">More ...</a></li>
</ul>
</div>
</div>
<!-- Main End -->
<div class="foot"></div>
</div>
</div>
<div id="side">
<!-- Side start -->
<h3><strong>lorem</strong> ipsum dolor</h3>
<div class="content">
<p>Vestibulum vel purus. In eget dolor nulla <a href="http://www.free-css.com/">veroeros et nullam sed</a> veroeros etiam augue nunc ante aliquam. Quisque augue.</p>
<div class="divider"></div>
<p>In eget dolor nulla <a href="http://www.free-css.com/">nullam sed etiam dolore sed</a> eroeros etiam augue nunc ante aliquam.</p>
<div class="divider"></div>
<p>Purus etiam in eget dolor nulla <a href="http://www.free-css.com/">lorem ipsum dolor</a> augue nunc ante aliquam sed dolore nullam. Lorem ipsum dolor et sed etiam augue.</p>
</div>
<h3><strong>lorem</strong> ipsum dolor</h3>
<div class="content">
<ul>
<li class="first"><a href="http://www.free-css.com/">Lorem ipsum dolor sit</a></li>
<li><a href="http://www.free-css.com/">Amet nullam sed etiam</a></li>
<li><a href="http://www.free-css.com/">Veroeros etiam augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante aliquam quisque</a></li>
<li><a href="http://www.free-css.com/">Augue tortor facilisis sit</a></li>
<li><a href="http://www.free-css.com/">Veroeros etiam augue</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit</a></li>
<li><a href="http://www.free-css.com/">Nunc ante aliquam quisque</a></li>
<li><a href="http://www.free-css.com/">Amet nullam sed etiam</a></li>
</ul>
</div>
<!-- Side end -->
</div>
<div id="xbgB" class="foot"></div>
</div>
</div>
<div id="outer2"></div>
<div id="footer"> © 2006 MyWebsiteName. Design by <a href="http://www.nodethirtythree.com">NodeThirtyThree</a> </div>
</body>
</html>
Related examples in the same category