How to make Bookshelf page in website using Css

Let me introduce how to make Bookshelf page in your website.I make Bookshelf for liveurlifehere education books in which i make bookshelf  i tell you how to make that bookshelf .In this not so much extra programming require , You just need some Css and Html. So now lets start how to make this, first you see snapshot
bookshelf of liveurlifehere education
Snapshot of bookshelf
 Demo
For making website page of bookshelf you need Css arrangement of images in background. Here is css for that where you can reedit according to your page.
.bookshelf { margin-top:200px;
}

.bookshelfbc {
background:url("images/bc.png");
}
.bookshelf-title {
margin: 40px 0px 0px -10px;
padding:0px;
height: 55px;
width: 660px;
display: table;
background: url('images/booktitle2.jpg') top left repeat-y;
color: white;
font-size: 28px;
font-style: bold;
background-color: #889088;
}
.bookshelf-title a {
text-decoration: none;
color: #333;
}
.bookshelf-name-link {
display: table-cell;
vertical-align: middle;
font-size: 24px;
font-weight: bolder;
text-shadow: 0px 2px 0px #E6C8A8;
color: #7E5325 !important;
padding-left: 5px;
}
.bookshelf-more-link:link {
color: white;
text-decoration: none;
font-size: 12px;
}
.bookshelf-body {
width: 660px !important;
margin: 0px 0px 0px -10px !important;
background: url('images/rack.jpg') top left repeat-y;
background-position: 0px 12px;
}

.container_16 .grid_11 {
width: 640px;
}
.omega {
margin-right: 0;
}
.alpha {
margin-left: 0;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
#cssmenu1{ height:37px; display:block; padding:0; margin: 0 auto;  border:1px solid; border-radius:5px; } 
#cssmenu1 > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu1 > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu1 > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu1 > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu1 > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu1 ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu1 > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu1 > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu1 ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu1 ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu1 ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu1 ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu1 ul li > ul{width:200px;} 
#cssmenu1 ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu1 ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 

#cssmenu1, #cssmenu > ul > li > ul > li a:hover{ background:#ff9812; background:-moz-linear-gradient(top, #ff9812 0%, #e17310 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9812), color-stop(100%,#e17310)); background:-webkit-linear-gradient(top, #ff9812 0%,#e17310 100%); background:-o-linear-gradient(top, #ff9812 0%,#e17310 100%); background:-ms-linear-gradient(top, #ff9812 0%,#e17310 100%); background:linear-gradient(top, #ff9812 0%,#e17310 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9812', endColorstr='#e17310',GradientType=0); } 
#cssmenu1{border-color:#b05a0d;} 
#cssmenu1 > ul > li > a{border-right:1px solid #b05a0d; color:#fff;} 
#cssmenu1 > ul > li > a:after{border-color:#ffa32b;} 
#cssmenu1 > ul > li > a:hover{background:#e17310;} 
 1px dotted #6db2d0;
}
#cssmenu1 .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

I hope you can use above id & class according to your requirement but if you want my design code then find below.

                                <html>
<head>
<link rel="stylesheet" type="text/css" href="bookself.css">
<title>Sample bookself</title>
<META NAME="description" CONTENT="Liveurlifehere Education Books sample of Bookself. This is Demo for Publisher">
<META NAME="keywords" CONTENT="Books, education, bookself-demo, books-free, read, publisher, book-publisher, online-books,pdf-books ">
<META NAME="robot" CONTENT="index,follow">
<META NAME="copyright" CONTENT="Copyright © 2014 Liveurlifehere. All Rights Reserved.">
<META NAME="author" CONTENT="Liveurlifehere">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<META NAME="revisit-after" CONTENT="5">
</head>
<body>
<table width="100%" style="margin-left:-3px;">
  <tbody>
    <tr class="bookshelf">
      <td><span class="bookshelf-title"> <a href="/books/tag/all/NCERT/12th/" class="bookshelf-name-link"> Liveurlifehere Education Bookself </a> <a href="https://liveurlifehere.com/2014/02/make-bookshelf-page-website-using-css.html" style="display:table-cell;vertical-align:middle;text-align:right" class="bookshelf-more-link"> <b class="roundedges" style="margin-right:5px;padding:5px;background-color:rgba(255,255,255,0.5);color:#333">Back</b></a> </span>
        <div class="grid_11 alpha omega bookshelf-body">
          <div class="grid_10 alpha omega" style="padding-left:40px"> <span style="float: left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 111px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Accountancy 1 Class 12" title="Accountancy 1 Class 12" src="images/rack1/Accountancy_1_Class_12_150x150.jpg" rel="book_thumb_8" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 116px; height: 38.40625px;"></div>
                <div class="caption-bottom" style="margin: -52px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Accountancy 1 Class 12 </a> </div>
              </div>
              </a> </div>
            </span> <span style="float:left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 113px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Accounting 2 Class 12" title="Accounting 2 Class 12" src="images/rack1/Accounting_2_Class_12_150x150.jpg" rel="book_thumb_9" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 118px; height: 38.40625px;"></div>
                <div class="caption-bottom" style="margin: -52px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Accounting 2 Class 12 </a> </div>
              </div>
              </a> </div>
            </span> <span style="float:left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 114px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Business Studies 1 Class 12" title="Business Studies 1 Class 12" src="images/rack1/Business_Studies_1_Class_12_150x150.jpg" rel="book_thumb_10" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 119px; height: 38.40625px;"></div>
                <div class="caption-bottom" style="margin: -52px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Business Studies 1 Class 12 </a> </div>
              </div>
              </a> </div>
            </span> <span style="float:left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 117px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Business Studies 2 Class 12" title="Business Studies 2 Class 12" src="images/rack1/Business_Studies_2_Class_12_150x150.jpg" rel="book_thumb_11" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 122px; height: 38.40625px;"></div>
                <div class="caption-bottom" style="margin: -52px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Business Studies 2 Class 12 </a> </div>
              </div>
              </a> </div>
            </span> <span style="float:left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 117px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Chemistry 1 Class 12" title="Chemistry 1 Class 12" src="images/rack1/Chemistry_1_Class_12_150x150.jpg" rel="book_thumb_12" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 122px; height: 38.40625px;"></div>
                <div class="caption-bottom" style="margin: -52px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Chemistry 1 Class 12 </a> </div>
              </div>
              </a> </div>
            </span> <span style="float:left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 117px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Chemistry 2 Class 12" title="Chemistry 2 Class 12" src="images/rack1/Chemistry_2_Class_12_150x150.jpg" rel="book_thumb_13" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 122px; height: 38.40625px;"></div>
                <div class="caption-bottom" style="margin: -52px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Chemistry 2 Class 12 </a> </div>
              </div>
              </a> </div>
            </span> <span style="float:left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 97px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Flamingo English Class 12" title="Flamingo English Class 12" src="images/rack1/Flamingo_English_Class_12_150x150.jpg" rel="book_thumb_14" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 102px; height: 57.40625px;"></div>
                <div class="caption-bottom" style="margin: -71px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Flamingo English Class 12 </a> </div>
              </div>
              </a> </div>
            </span> <span style="float:left;padding:8px 0px 36px 0px;height:150px;display:block">
            <div style="float: left;"> <a href="#">
              <div class="caption-wrapper" style="overflow: hidden; padding: 0px; font-size: 0.1px; width: 111px; height: 150px; margin: 5px; border: 0px none rgb(0, 147, 204);"><img alt="Fundamentals of Human Geography Class 12" title="Fundamentals of Human Geography Class 12" src="images/rack1/Fundamentals_of_Human_Geography_Class_12_150x150.jpg" rel="book_thumb_15" class=" captify  book_thumb" style="border: 0px none; margin: 0px;">
                <div class="caption-bottom" style="margin: 0px; z-index: 1; position: relative; opacity: 0.7; width: 116px; height: 76.40625px;"></div>
                <div class="caption-bottom" style="margin: -90px 0px 0px; padding-top: 9px; position: relative; z-index: 2; background-image: none; border: 0px none; opacity: 1; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <a href="#" class="thumblink" style="margin: 0px;"> Fundamentals of Human Geography Class 12 </a> </div>
              </div>
              </a> </div>
            </span> </div>
        </div></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<div style="float: right"> </div>
</body>
</html>
                            

  Demo           Download


Comments

4 responses to “How to make Bookshelf page in website using Css”

  1. C Brandon Avatar

    Hello there,
    Really nice bookshelf. Can you tell me how to put pdf books or other files in the bookshelf instead of jpg images.
    Kind regards
    C brandon

  2. Vaibhav Singh Avatar
    Vaibhav Singh

    Nice Designing of CSS

  3. Nura Ahmad Avatar
    Nura Ahmad

    Nice design!

  4. Abhishek Jaguessar Avatar
    Abhishek Jaguessar

    Hello Sir,

    I need the code of the book shelf,
    I can purchase if needed

Leave a Reply

Your email address will not be published. Required fields are marked *