books-forever : Book « Templates « HTML / CSS

books-forever
 

<!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>Books Forever</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
* {
  margin : 0px;
  padding : 0px;
}

body {
  background : url('books-forever-images/body_background.gif') #fff repeat-x 0px 57px;
  color : #7B7B7B;
  text-align : center;
  font-family : tahoma, sans-serif;
  font-size : 9px;
}

a {
  color : #7B7B7B;
}

a:hover {
  color : #7B7B7B;
  text-decoration : none;
}


/* Header Style */

#page_header {
  margin : 0px auto;
  width : 753px;
  height : 57px;
  text-align : left;
  overflow : hidden;
}

#page_title {
  margin-left : 3px;
  margin-top : 13px;
  width : 180px;
  height : 44px;
  float : left;
  background : url('books-forever-images/header.gif') no-repeat 30px 0px;
}

#page_title img {
  position : absolute;
  top : 15px;
  margin-left : 5px;
}

#header_search {
  margin-top : 15px;
  width : 220px;
  float : right;
  background : url('books-forever-images/search_icon.gif') no-repeat 0px 11px;
  overflow : hidden;
}

#header_search form {
  margin-top : 4px;
  margin-left : 16px;
}

#header_search input {
  margin-top : 4px;
  width : 133px;
  float : left;
  font-size : 11px;
  border : #737472 1px solid;
}

#header_search input.submit {
  width : 30px;
  height : 18px;
  position : relative;
  top : 2px;
  margin : 2px;
  border : none;
}



/* Menu Style */

#page_menu {
  margin : 0px auto;
  width : 684px;
  height : 35px;
  float : none;
  clear : both;
  text-align : center;
}

#page_menu ul {
  height : 35px;
}

#page_menu li {
  padding : 12px 24px 0px;
  height : 14px;
  float : left;
  display : block;
  position: relative;
}


/* Main Body Style */

#page_wrapper {
  margin : 0px auto;
  width : 753px;
  text-align : justify;
  display : block;
  clear : both;
}

#page_leftcol {
  width : 179px;
  float : left;
}

#page_maincol {
  margin-left : 14px;
  width : 362px;
  float : left;
}

#page_rightcol {
  margin-left : 13px;
  width : 185px;
  float : left;
}


/* Left Column Style */

.leftcol_box {
  width : 177px;
  background : #fff;
  overflow : hidden;
  display : block;
  clear : both;
}

.leftcol_box h2 {
  padding : 7px 0px;
  width : 177px;
  height : 11px;
  color : #fff;
  font-size : 11px;
  line-height : 11px;
  font-weight : bold;
}

.leftcol_box h2 span {
  left : 13px;
  display : block;
  position : relative;
}

.leftcol_box .content {
  margin : 15px 14px;
  width : 149px;
}

.leftcol_box .footnote {
  padding-left : 5px;
  padding-right : 5px;
  text-align : justify;
  color : #949393;
  clear : both;
}

.leftcol_box form {
  width : 149px;
  float : none;
}

#books_search {
  overflow : hidden;
  height : 135px;
}

#books_search h2 {
  background-color : #7EB610;
  border-bottom : #A2B565 1px solid;
}

#books_search a {
  color : #D14A4A;
  font-weight : bold;
}

#books_search a:hover {
  color : #EF7C7C;
  text-decoration : none;
  position : static;
}

#books_search input {
  margin-bottom : 14px;
  width : 140px;
}

#books_search select {
  margin-left : 0px;
  margin-bottom : 14px;
  width : 100px;
  float : left;
  clear : right;
}

#books_search input.submit {
  margin-left : 9px;
  width : 28px;
  height : 16px;
  float : right;
}

#catalog h2 {
  background-color : #F8C055;
  border-bottom : #F8C055 1px solid;
}

#catalog .content {
  text-align : center;
}

#catalog ul {
  margin-left : 4px;
  margin-right : 4px;
  margin-bottom : 14px;
  width : 141px;
  height : 97px;
  background : url('books-forever-images/catalog_bg.gif') 0px 0px;
  overflow : hidden;
}

#catalog li {
  display : block;
  float : left;
}

#catalog li span {
  padding-top : 6px;
  padding-bottom : 5px;
  width : 20px;
  text-align : center;
  position : relative;
  display : block;
}

#catalog li a {
  color : #B0ADAD;
  font-size : 11px;
  font-weight : bold;
  text-decoration : none;
}

#catalog a:hover {
  color : #716E6E;
}

#catalog .footnote {
  font-weight : bold;
  line-height : 13px;
}

#catalog .footnote h4 {
  padding-bottom : 5px;
  color : #716E6E;
  text-transform : uppercase;
  font-size : 9px;
}

#catalog .footnote em {
  color : #D14A4A;
  font-style : normal;
}

#knowmore {
  margin-top : 13px;
  width : 179px;
  height : 114px;
  overflow : hidden;
  background : url('books-forever-images/knowmore_bg.gif') #83A028 no-repeat 0px 0px;
  color : #FEFEFE;
  text-align : justify;
}

#knowmore h2 {
  height: 23px;
  background : url('books-forever-images/header_knowmore.gif') no-repeat 0px 0px;
}

#knowmore span.image {
  float : left;
  display : block;
  width : 58px;
  height : 45px;
}

#knowmore p {
  margin-left : 10px;
  width : 160px;
}

#knowmore .readmore {
  margin-right : 5px;
  text-align : right;
  font-weight : bold;
  clear : both;
}

#knowmore a {
  color : #fff;
}

#newsletter h2 {
  background-color : #58A4DE;
  border-bottom : #58A4DE 1px solid;
}

#newsletter .content {
  margin : 8px 14px 5px;
  width : 149px;
}

#newsletter input {
  margin-bottom : 8px;
  width : 140px;
}

#newsletter input.submit {
  margin-bottom : 10px;
  width : 66px;
  height : 17px;
  float : right;
}


/* Main Column Style */

#maincol_top {
  margin-top : 13px;
  width : 362px;
  height : 137px;
  background : url('books-forever-images/maincol_bg.gif') repeat-x 0px 0px;
  overflow : hidden;
}

#maincol_top h2 {
  width : 121px;
  height : 32px;
  background : url('books-forever-images/maincol_header.gif') no-repeat 0px 0px;
}

#maincol_top .sideimg {
  position : absolute;
  background : url('books-forever-images/maincol_img.gif') no-repeat bottom left;
  width : 87px;
  height : 137px;
}

#maincol_top .content {
  position : absolute;
  margin-left : 95px;
  width : 255px;
  color : #fff;
}

#maincol_top .readmore {
  margin-top : 8px;
  text-align : right;
}

#maincol_top a {
  color : #fff;
  font-weight : bold;
  text-decoration : none;
}

#maincol_top a:hover {
  text-decoration : underline;
}

.maincol_box {
  width : 360px;
  background : url('books-forever-images/maincol_vline.gif') #fff repeat-y 180px 0px;
  overflow : hidden;
}

.maincol_box h2 {
  width : 360px;
  height : 26px;
}

#bestsellers {
  overflow : hidden;
  background : url('books-forever-images/maincol_hline.gif') 0px 27px;
}

#bestsellers h2 {
  background : url('books-forever-images/header_bestsellers.gif') #075B9B no-repeat 0px 0px;
}

#bestsellers .content {
  width : 179px;
  height : 235px;
  float : left;
  overflow : hidden;
}

#bestsellers .wrapper {
  margin-top : 10px;
  margin-left : 10px;
  position : absolute;
  width : 160px;
}

#bestsellers .bookcover {
  width : 66px;
  height : 101px;
  float : left;
  position : static;
}

#bestsellers p {
  padding-top : 3px;
  padding-bottom : 20px;
  float : none;
}

#bestsellers .info {
  float : none;
  width : 160px;
}

#bestsellers .price h3 {
  color : #E9993D;
  font-size : 9px;
  font-weight : bold;
  float : left;
}

#bestsellers .buynow {
  font-weight : bold;
  float : right;
}

#bestsellers .buynow a {
  color : #577D0E;
}

#bestsellers .buynow a:hover {
  color : #7FAA2D;
  text-decoration : underline;
}


/* Right Column Style */

.rightcol_box {
  width : 183px;
  background-color : #fff;
  overflow : hidden;
}

.rightcol_box h2 {
  width : 183px;
  height : 26px;
}

#latest h2 {
  background : url('books-forever-images/header_latest.gif') #5C5E5F no-repeat 0px 0px;
}

#latest .wrapper {
  position : relative;
  margin : 0px 9px;
  width : 164px;
  overflow : hidden;
}

#latest h3 {
  clear : both;
  margin-top : 15px;
  margin-bottom : 10px;
  color : #234662;
  font-size : 9px;
  font-weight : bold;
}

#latest .thumbnail {
  margin-right : 5px;
  margin-bottom : 5px;
  float : left;
  position : static;
}

#latest p {
  margin-top : 2px;
  margin-bottom : 12px;
}

#latest .readmore {
  margin : 30px 0px 5px;
  text-align : right;
  clear : both;
  float : none;
  font-weight : bold;
}

#latest .readmore a {
  color : #5C5E5F;
  text-decoration : none;
}

#latest .readmore a:hover {
  color : #8C8F91;
  text-decoration : none;
}


/* Footer Style */

#page_spacing {
  clear : both;
  float : none;
  border-top : #fff 5px solid;
}

#page_footer {
  margin : 0px auto;
  width : 755px;
  height : 21px;
  background-color : #5C5E5F;
  font-size : 10px;
  color : #C8C6C6;
}

#page_footer a {
  color : #E4E1E1;
  text-decoration : none;
}

#page_footer a:hover {
  color : #fff;
}

#page_footer #rights {
  padding-top : 3px;
  padding-left : 15px;
  float : left;
}

#page_footer #links {
  padding-top : 3px;
  padding-right : 10px;
  float : right;
  font-weight : bold;
}

#page_footer #links span {
  margin-left : 20px;
  display : block;
  position : relative;
  float : left;
}

#page_credit {
  margin-top : 15px;
  margin-bottom : 7px;
  text-align : center;
  font-size : 12px;
  color : #010101;
}

#page_credit a {
  text-decoration : none;
  color : #010101;
}

#page_credit a:hover {
  color : #464646;
}



.borderbox {
  clear : both;
  float : none;
  margin-top : 13px;
  border : #A5A4A4 1px solid;
}

span {
  display : none;
}

img {
  border: 0px;
}

p {
  text-align : justify;
  line-height : 13px;
}

ul {
  list-style-position: inside;
  list-style-image: none;
  list-style-type: none;
  display : block;
}

li {
  text-indent: 0px;
  list-style-position: inside;
  list-style-image: none;
  list-style-type: none;
}

input {
  padding : 2px 0px 1px 7px;
  background-color : #fff;
  color : #949393;
  border : #D7D7D7 1px solid;
  font-family : tahoma, sans-serif;
  font-size : 9px;
  font-weight : bold;
}

select {
  padding : 2px 0px 1px 7px;
  background-color : #fff;
  color : #949393;
  border : #D7D7D7 1px solid;
  font-family : tahoma, sans-serif;
  font-size : 9px;
  font-weight : bold;
}

input.submit {
  padding : 0px;
  border : none;
  cursor : pointer;
}

.clearthis {
  margin : 0px;
  clear : both;  
  float : none;  
  font-size : 1px;
  line-height : 0px;
}

</style>


</head>
<body>
<div id="page_header">
  <div id="page_title">
    <h1> <img src="books-forever-images/header_logo.gif" width="25" height="26" alt="" /> <span>Books Forever</span> </h1>
  </div>
  <div id="header_search">
    <form method="post" action="http://www.free-css.com/">
      <div>
        <h3><span>Find:</span></h3>
        <input type="text" />
        <input type="image" src="img/search_button.gif" class="submit" />
      </div>
    </form>
  </div>
</div>
<div id="page_menu">
  <ul id="menu">
    <li><a href="http://www.free-css.com/"><span>Home&nbsp;&nbsp;</span> <img src="books-forever-images/menu_home.gif" width="31" height="14" alt="" /></a></li>
    <li><a href="http://www.free-css.com/"><span>Bestsellers&nbsp;&nbsp;</span> <img src="books-forever-images/menu_bestsellers.gif" width="59" height="14" alt="" /></a></li>
    <li><a href="http://www.free-css.com/"><span>Magazines&nbsp;&nbsp;</span> <img src="books-forever-images/menu_magazines.gif" width="57" height="14" alt="" /></a></li>
    <li><a href="http://www.free-css.com/"><span>Bargain&nbsp;&nbsp;</span> <img src="books-forever-images/menu_bargain.gif" width="40" height="14" alt="" /></a></li>
    <li><a href="http://www.free-css.com/"><span>New Releases&nbsp;&nbsp;</span> <img src="books-forever-images/menu_releases.gif" width="75" height="14" alt="" /></a></li>
    <li><a href="http://www.free-css.com/"><span>E-Books&nbsp;&nbsp;</span> <img src="books-forever-images/menu_ebooks.gif" width="44" height="14" alt="" /></a></li>
    <li><a href="http://www.free-css.com/"><span>Contact&nbsp;&nbsp;</span> <img src="books-forever-images/menu_contact.gif" width="41" height="14" alt="" /></a></li>
  </ul>
</div>
<div id="page_wrapper">
  <!-- BEGIN :: LEFT SIDEBAR -->
  <div id="page_leftcol">
    <div class="borderbox">
      <div class="leftcol_box">
        <div id="books_search">
          <h2><span>Books Search</span></h2>
          <div class="content">
            <form method="post" action="http://www.free-css.com/">
              <div>
                <input type="text" value="Enter Keywords......" />
                <select name="what">
                  <option>Title</option>
                  <option>Title 2</option>
                </select>
                <input type="image" src="img/booksearch_button.gif" class="submit" />
              </div>
            </form>
            <div class="footnote"> <a href="http://www.free-css.com//fsdf">Advanced Search</a> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="borderbox">
      <div class="leftcol_box">
        <div id="catalog">
          <h2><span>Catalog</span></h2>
          <div class="content">
            <ul>
              <li><span><a href="http://www.free-css.com/">A</a></span></li>
              <li><span><a href="http://www.free-css.com/">B</a></span></li>
              <li><span><a href="http://www.free-css.com/">C</a></span></li>
              <li><span><a href="http://www.free-css.com/">D</a></span></li>
              <li><span><a href="http://www.free-css.com/">E</a></span></li>
              <li><span><a href="http://www.free-css.com/">F</a></span></li>
              <li><span><a href="http://www.free-css.com/">G</a></span></li>
              <li><span><a href="http://www.free-css.com/">H</a></span></li>
              <li><span><a href="http://www.free-css.com/">I</a></span></li>
              <li><span><a href="http://www.free-css.com/">J</a></span></li>
              <li><span><a href="http://www.free-css.com/">K</a></span></li>
              <li><span><a href="http://www.free-css.com/">L</a></span></li>
              <li><span><a href="http://www.free-css.com/">M</a></span></li>
              <li><span><a href="http://www.free-css.com/">N</a></span></li>
              <li><span><a href="http://www.free-css.com/">O</a></span></li>
              <li><span><a href="http://www.free-css.com/">P</a></span></li>
              <li><span><a href="http://www.free-css.com/">Q</a></span></li>
              <li><span><a href="http://www.free-css.com/">R</a></span></li>
              <li><span><a href="http://www.free-css.com/">S</a></span></li>
              <li><span><a href="http://www.free-css.com/">T</a></span></li>
              <li><span><a href="http://www.free-css.com/">U</a></span></li>
              <li><span><a href="http://www.free-css.com/">V</a></span></li>
              <li><span><a href="http://www.free-css.com/">W</a></span></li>
              <li><span><a href="http://www.free-css.com/">X</a></span></li>
              <li><span><a href="http://www.free-css.com/">Y</a></span></li>
              <li><span><a href="http://www.free-css.com/">Z</a></span></li>
            </ul>
            <div class="footnote">
              <h4>Note:</h4>
              Search your books &amp; authors by <em>the first name</em> </div>
          </div>
        </div>
      </div>
    </div>
    <div id="knowmore">
      <h2><span>Know More</span></h2>
      <p> This is a template designed by free website templates
        for you <span class="image">&nbsp;</span> for free you can replace all the text by your own text. </p>
      <div class="readmore"><a href="http://www.free-css.com/">Read More</a></div>
    </div>
    <div class="borderbox">
      <div class="leftcol_box">
        <div id="newsletter">
          <h2><span>Newsletter Signup</span></h2>
          <div class="content">
            <form method="post" action="http://www.free-css.com/">
              <div>
                <input type="text" value="Enter Email Here" />
                <input type="image" src="img/newsletter_button.gif" class="submit" />
                <div class="clearthis">.</div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="page_maincol">
    <div id="maincol_top">
      <div class="sideimg">&nbsp;</div>
      <div class="content">
        <h2><span>Welcome to our site</span></h2>
        <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. If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help </p>
        <div class="readmore"><a href="http://www.free-css.com/">Read More</a></div>
      </div>
    </div>
    <div class="borderbox">
      <div class="maincol_box">
        <div id="bestsellers">
          <h2><span>Top Bestsellers</span></h2>
          <div class="content">
            <div class="wrapper">
              <div class="bookcover"><img src="books-forever-images/book01.gif" width="65" height="89" alt="" /></div>
              <p> This is a template designed by free website templates for you for free you can replace all the text by your own text. </p>
              <p> This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help </p>
              <div class="info">
                <div class="price">
                  <h3>Price: $20.00</h3>
                </div>
                <div class="buynow"> <a href="http://www.free-css.com/">Buy Now</a> </div>
                <div class="clearthis">.</div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="wrapper">
              <div class="bookcover"><img src="books-forever-images/book02.gif" width="65" height="89" alt="" /></div>
              <p> This is a template designed by free website templates for you for free you can replace all the text by your own text. </p>
              <p> This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help </p>
              <div class="info">
                <div class="price">
                  <h3>Price: $20.00</h3>
                </div>
                <div class="buynow"> <a href="http://www.free-css.com/">Buy Now</a> </div>
                <div class="clearthis">.</div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="wrapper">
              <div class="bookcover"><img src="books-forever-images/book03.gif" width="65" height="99" alt="" /></div>
              <p> This is a template designed by free website templates for you for free you can replace all the text by your own text. </p>
              <p> This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help </p>
              <div class="info">
                <div class="price">
                  <h3>Price: $20.00</h3>
                </div>
                <div class="buynow"> <a href="http://www.free-css.com/">Buy Now</a> </div>
                <div class="clearthis">.</div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="wrapper">
              <div class="bookcover"><img src="books-forever-images/book04.gif" width="65" height="101" alt="" /></div>
              <p> This is a template designed by free website templates for you for free you can replace all the text by your own text. </p>
              <p> This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help </p>
              <div class="info">
                <div class="price">
                  <h3>Price: $20.00</h3>
                </div>
                <div class="buynow"> <a href="http://www.free-css.com/">Buy Now</a> </div>
                <div class="clearthis">.</div>
              </div>
              <div class="clearthis">.</div>
            </div>
          </div>
          <div class="clearthis">.</div>
        </div>
      </div>
    </div>
    <div class="clearthis">.</div>
  </div>
  <div id="page_rightcol">
    <div class="borderbox">
      <div class="rightcol_box">
        <div id="latest">
          <h2><span>Latest Releases &amp; News</span></h2>
          <div class="wrapper">
            <h3>June 22nd, 2005</h3>
            <div class="thumbnail"><img src="books-forever-images/news_image01.gif" width="67" height="81" alt="" /></div>
            <p> This is a template designed by free website templates for you for free you can replace all the text by your own text. </p>
            <p> This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help </p>
            <h3>June 22nd, 2005</h3>
            <p> This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help </p>
            <h3>June 26th, 2005</h3>
            <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> If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. Your feedback is very important to us and we will do everything to fulfil your wishes. </p>
            <div class="readmore"><a href="http://www.free-css.com/">Read More</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearthis">.</div>
  </div>
</div>
<div id="page_spacing">
  <div id="page_footer">
    <div id="rights"> &copy; Copyright information goes here </div>
    <div id="links"> <span><a href="http://www.free-css.com/">Home</a></span> <span><a href="http://www.free-css.com/">Bestsellers</a></span> <span><a href="http://www.free-css.com/">Magazines</a></span> <span><a href="http://www.free-css.com/">Bargain</a></span> <span><a href="http://www.free-css.com/">New Releases</a></span> <span><a href="http://www.free-css.com/">E-Books</a></span> <span><a href="http://www.free-css.com/">Contact</a></span> </div>
  </div>
</div>
<div id="page_credit"> <a href="http://www.freewebsitetemplates.com">Powered by Free Website Templates</a></div>
<div class="clearthis">.</div>
</body>
</html>
Related examples in the same category

1.	book-store
2.	bookauthor
3.	bookish
4.	booksonline