booksonline
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Books online</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 11px;
text-align: center;
}
th, td {
font-size: 11px;
}
img { border: 0; }
#wrapper {
margin: 17px auto;
text-align: left;
width: 630px;
position: relative;
}
h1 {
margin: 0;
padding: 17px 0 5px 0;
line-height: 1;
}
h2 {
margin: 0 0 5px 0;
padding: 5px 0 0 0;
font-size: 12px;
}
.nav {
width: 129px;
float: left;
margin: 0;
padding: 0;
}
.nav h2 {
color: #fff;
margin-top: 0;
padding: 6px 0 6px 30px;
border-bottom: 1px solid #fff;
line-height: 1;
}
.nav ul {
margin: 0;
padding: 0 0 0 30px;
line-height: 1.4;
}
.nav li {
list-style: none;
margin: 0;
padding: 0;
}
ul a {
color: white;
font-weight: bold;
}
ul a:visited {
color: #fefefe;
}
ul a:hover, a:hover {
text-decoration: none;
}
#menu {
background: url(booksonline-images/menu_bg.gif);
}
* html #menu {
background: white;
}
#header {
position: absolute;
background: #276196 url(booksonline-images/header_bg.gif) repeat-x;
top: 0px;
left: 128px;
width: 502px;
height: 167px;
}
#header h2 {
margin: 57px 0 0 126px;
}
#header a {
color: white;
}
#header ul {
margin: 0;
padding: 12px 0 0 0;
}
#header li {
margin: 0;
padding: 0 0 0 129px;
list-style: none;
line-height: 1.7;
}
#header #navtop {
position: absolute;
top: 10px;
left: 20px;
}
#header #navtop li {
display: inline;
padding: 0 0 0 18px;
}
#header #navtop a {
text-decoration: none;
}
#girl {
position: absolute;
background: url(booksonline-images/header_girl.gif) no-repeat;
top: 0px;
right: 0px;
width: 158px;
height: 167px;
}
#books {
position: absolute;
background: url(booksonline-images/header_books.gif) no-repeat;
top: 41px;
left: 0px;
width: 84px;
height: 126px;
}
#navblue {
margin: 0;
padding: 0;
width: 127px;
background: #bfdbfa;
}
#navblue li {
margin: 0 0 1px 0;
padding: 0 0 0 30px;
list-style: none;
line-height: 30px;
background: blue url(booksonline-images/blue_bg.gif);
}
* html #navblue li {
line-height: 28px;
l\ine-height: 30px;
padding: 0 0 0 16px;
padd\ing: 0 0 0 30px;
}
#navblue a {
text-decoration: none;
display: block;
}
#navblue a:hover {
text-decoration: underline;
}
* html #navblue a {
width: 100%;
w\idth: 96px;
}
#searchbar {
background: url(booksonline-images/olive_bg.gif);
position: absolute;
top: 172px;
left: 128px;
width: 502px;
height: 2.2em;
color: #fff;
border-bottom: 2px solid white;
}
* html #searchbar {
height: 2.4em;
he\ight: 2.2em;
}
#searchbar form {
margin: 0;
padding: 2px 0 0 30px;
}
#searchbar .submit {
border: 1px solid #e6ead5;
background: #72765c;
font-size: 11px;
padding: 0 3px;
height: 19px;
color: #fff;
}
#searchbar .text {
border: 0px none;
}
#orangerow .col {
padding-top: 2.3em;
}
#greenrow .col {
float: left;
width: 487px;
margin-left: 6px;
margin-bottom: 5px;
}
.divider {
background: #1a508c;
height: 3px;
margin: 1px 0;
padding: 0;
font-size: 1px;
}
.col .divider {
background: none;
border-top: 1px solid #999;
}
#orangerow {
background: url(booksonline-images/orange_bg.gif) repeat-y;
}
#greenrow {
background: url(booksonline-images/green_bg.gif) repeat-y;
}
.left {
float: left;
margin: 5px 5px 0 0;
}
.clear {
clear: both;
background: #fff;
margin: 0 1px 0 0;
}
.clear div {
margin: 0 4px 0 130px;
border-top: 1px solid #999;
height: 1px;
font-size: 1px;
margin-bottom: -1px;
}
* html .clear div {
margin-bottom: -2px;
}
#greenrow .clear {
height: 3px;
font-size: 1px;
margin-bottom: -2px;
}
#authormonth {
width: 222px;
float: left;
margin-left: 6px;
}
#bookmonth {
width: 236px;
float: right;
margin-right: 10px;
display: inline;
}
.readmore {
text-align: right;
margin-top: -0.8em;
}
#footer {
text-align: right;
background: #828282;
color: #dbd1d1;
}
* html #footer {
height: 1%;
}
#footeri {
padding: 5px 3px 7px 13px;
}
#footer .copyright {
float: left;
}
#footer a {
color: #fff;
text-decoration: none;
}
.books {
float: right;
width: 200px;
margin: 0 10px;
}
.col .books a {
color: maroon;
}
.col a {
color: #ed5411;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<h1><a href="http://www.free-css.com/"><img src="booksonline-images/logo.gif" width="121" height="22" alt="" /></a></h1>
<ul id="navblue">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">magazines</a></li>
<li><a href="http://www.free-css.com/">e-books</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
</ul>
</div>
<!-- end menu -->
<div id="header">
<ul id="navtop">
<li><a href="http://www.free-css.com/">Kids</a></li>
<li><a href="http://www.free-css.com/">Adults</a></li>
<li><a href="http://www.free-css.com/">Science</a></li>
<li><a href="http://www.free-css.com/">Commerce</a></li>
<li><a href="http://www.free-css.com/">Literature</a></li>
</ul>
<h2><img src="booksonline-images/title_explore.gif" width="185" height="20" alt="explore your knowledge" /></h2>
<ul id="explore">
<li><a href="http://www.free-css.com/">get online tutorials</a></li>
<li><a href="http://www.free-css.com/">books for all age</a></li>
<li><a href="http://www.free-css.com/">grab the encyclopedia</a></li>
</ul>
<div id="books"></div>
<div id="girl"></div>
</div>
<!-- end header -->
<div class="divider"></div>
<div id="searchbar">
<form action="/" method="get">
Title:
<input name="title" type="text" value="" class="text" />
Author:
<input name="author" type="text" value="" class="text" />
<input type="submit" value="Go" class="submit" />
</form>
</div>
<!-- end searchbar -->
<div id="orangerow">
<div class="nav">
<h2 id="categories">Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Biography</a></li>
<li><a href="http://www.free-css.com/">Children's</a></li>
<li><a href="http://www.free-css.com/">Crime & Thrillers</a></li>
<li><a href="http://www.free-css.com/">Food & Drink</a></li>
<li><a href="http://www.free-css.com/">General Fiction</a></li>
<li><a href="http://www.free-css.com/">Health</a></li>
<li><a href="http://www.free-css.com/">History</a></li>
<li><a href="http://www.free-css.com/">Home & Garden</a></li>
<li><a href="http://www.free-css.com/">Science</a></li>
<li><a href="http://www.free-css.com/">Romantic Fiction</a></li>
<li><a href="http://www.free-css.com/">SF & Fantasy</a></li>
<li><a href="http://www.free-css.com/">Sport</a></li>
<li><a href="http://www.free-css.com/">Entertainment</a></li>
</ul>
</div>
<!-- end .nav -->
<div class="col">
<div id="authormonth">
<h2><img src="booksonline-images/title_author_of_the_month.gif" width="137" height="15" alt="author of the month" /></h2>
<p>Don't forgot to check free website templates every day, because we add at least one free website template daily.</p>
<img src="booksonline-images/picture_1.gif" width="71" height="122" alt="Woman reading a book" class="left" />
<p>This is a template designed by free website templates for you for free you can replace all the text by your own
text. This is just a place holder so you can see how the site would look like.</p>
<p class="readmore"><a href="http://www.free-css.com/">read more</a></p>
</div>
<!-- end authormonth -->
<div id="bookmonth">
<h2><img src="booksonline-images/title_book_of_the_month.gif" width="125" height="15" alt="book of the month" /></h2>
<img src="booksonline-images/picture_3.gif" width="50" height="91" alt="dog books" class="left" />
<p>You can remove any link to our websites from this template you're free to use the template without linking
back to us. Don't want your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the forum.</p>
<p class="readmore"><a href="http://www.free-css.com/">read more</a></p>
</div>
<!-- end bookmonth -->
</div>
<!-- end .col -->
<div id="whitey"></div>
<div class="clear">
<div class="fix"></div>
</div>
</div>
<!-- end orangerow -->
<div id="greenrow">
<div class="nav">
<h2 id="discounts">Discounts On</h2>
<ul>
<li><a href="http://www.free-css.com/">Arts and Crafts</a></li>
<li><a href="http://www.free-css.com/">Biography</a></li>
<li><a href="http://www.free-css.com/">Books on TV</a></li>
<li><a href="http://www.free-css.com/">Business</a></li>
<li><a href="http://www.free-css.com/">Children</a></li>
<li><a href="http://www.free-css.com/">Computer Books</a></li>
<li><a href="http://www.free-css.com/">Cookery</a></li>
<li><a href="http://www.free-css.com/">Crime</a></li>
<li><a href="http://www.free-css.com/">Dictionaries</a></li>
<li><a href="http://www.free-css.com/">Languages</a></li>
</ul>
</div>
<!-- end .nav -->
<div class="col">
<h2><img src="booksonline-images/title_book_review.gif" width="94" height="18" alt="book review" /></h2>
<img src="booksonline-images/picture_2.gif" width="50" height="80" alt="Psycho book cover" class="left" />
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.com.</p>
<p>To find great hosting providers visit Web Hosting Zoom</p>
<p class="readmore"><a href="http://www.free-css.com/">read more</a></p>
<div class="divider"></div>
<h2><img src="booksonline-images/title_books_to_come.gif" width="101" height="14" alt="books to come" /></h2>
<table summary="book list" class="books" cellspacing="4" cellpadding="0">
<tr>
<td><a href="http://www.free-css.com/">Ghosts of darkness</a></td>
<td><a href="http://www.free-css.com/">Fifteen</a></td>
</tr>
<tr>
<td><a href="http://www.free-css.com/">New age</a></td>
<td><a href="http://www.free-css.com/">Quick fox</a></td>
</tr>
<tr>
<td><a href="http://www.free-css.com/">Disgrace</a></td>
<td><a href="http://www.free-css.com/">Unveil</a></td>
</tr>
</table>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.com.</p>
</div>
<div class="clear"></div>
</div>
<!-- end greenrow -->
<div id="footer">
<div id="footeri"> <span class="copyright">Powered by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a></span> <a href="http://www.free-css.com/">bestsellers</a> <a href="http://www.free-css.com/">magazines</a> <a href="http://www.free-css.com/">e-books</a> <a href="http://www.free-css.com/">home</a> </div>
<!-- end footeri -->
</div>
<!-- end footer -->
</div>
<!-- end wrapper -->
</body>
</html>
Related examples in the same category