Css Learning Media

How to make Bookshelf page in website using Css

Written by Aman yadav
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

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="http://blog.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

A2hosting
Uptime
Features
Support
Overall

Pros

  • Best Support
  • Low Price
  • 100% Uptime
  • Fast Speed Server

Cons

  • No Cons For this

About the author

Aman yadav

Article writer @ Liveurlifehere Blog : I am writing on Top trending article on web,technology-how to,entertainment,top n category post .I am always try to reach you diffrent & good quality content then ever.

2 Comments

Leave a Comment