Bookshelf

Welcome to my bookshelf! Truth be told I don't do a lot of reading, so this place serves as a display for trinkets representing the stuff that I like. If you'd like to learn more about an item, click it and see where it leads! (Some items may also just be for decoration, oops!)

If there's something you'd like for your own shelf, feel free to take something from here! (Credit is not needed but always appreciated)

Credits

This is where I'd put bookshelf items made by other people... If only I were aware of other items people made!!

Making a bookshelf

If you want to make a bookshelf like this one, here are the steps and things I considered in order to make mine.

To make a shelf like I did, you need two things, 1) the images for your bookshelf and 2) the background image that will contain your shelf. You should decide what height you want all of your shelf items to be that way it will play nicely with the background image. For the background image, the width does not matter, but the height should be the height of your shelf items + the desired thickness of your shelves in pixels. In my case, all of my shelf items are 125 pixels tall, and I wanted to make my shelves 15 pixels thick. With that in mind, that'd make my shelf background image 140 pixels tall, with the bottom 15 pixels dedicated to the shelf.

After you have the needed images, the rest is done in code. Make a div that will encompass all of your shelf items and give it a class (what you name it is up to you). Throw in your shelf images into that div and give them their own class. We now bring in CSS to help us getting these looking like a shelf. You could make a new CSS file for these, but if you know a shelf will just be a one-off thing for you I'd recommend putting your CSS into some <style> tags (like how I did for this page).

For your shelf item class, set your desired height and set the bottom margin to be (shelf thickness - 4) pixels. For the div surrounding all the shelf items, set its background image to be the shelf image you created, and if you want your items to be centered, add 'text-align: center;'.

If all goes well and if I was good at explaining things, you should have an easy shelf on your hands. If not, you're always free to inspect this page and study the code.