Wallpaper/Image Gallery Tutorial using HTML/CSS
One of the most important things ive learned while learning about html and css is the power of the unordered list. I was making a wallpaper gallery for my Death Note website and asked on Web Design Forums.net the best way to go about this. The answer I got changed the way I design and the way I layout my sites.
I'd like to thank Shadowfiend for showing me this technique. Learning it has changed the way i design. Check out his blog here: Shadowfiend | http://shadowfiend.posterous.com/
Unordered lists are a familiar topic of study in beginner html courses, however the markup often looks like
<h1>Fruits</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
However, this is not the only way to use them, nor is it the most powerful.
The unordered list is often used many times with Menus (both vertical and horizontal) as well as with image galleries.
I'm not going to show you the menu, because the wallpaper effect is harder, and if you learn it, you'll easily be able to make a menu.
For this, we are going to use any image. Find one on Google Images Search.
Alright now that we have our wallpaper, we will use a layout we created in my last post. If you want, you can go there and download layoutfooter.html, if you are comfortable with css you can just continue reading.
Now, between <div id="content"> we will add an unordered list as so...
<ul class="gallery">
<li>Image1</li>
<li>Image2</li>
<li>Image3</li>
</ul>
For now, dont use actual images, well use those after.
The first thing you may notice previewing these in your browser is that there are bullets. This is the default behavior of the unordered list.
We will take these off.
Between your <style> tags, add these rules:
ul.gallery{
width: 100%; /*this can be changed, its at 80% for better visualization at the moment*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
border: 1px solid blue; /*this helps us visualize while were laying out, this will be removed in the final product*/
}
Alright, now that we have styled our outer container, lets style our list items.
ul.gallery li{
border: 1px solid red; /*visualization*/
float: left; /* what this does is place each li out of normal flow, and as far left as it can. Since each li is floated left they will sit next to each other*/
width: 30%; /*set a width*/
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
}
Heres what you should have at the moment (your list items will be higher)
Wallpaper CSS Layout Tutorial 1
The list items are right next to each other. We can add a margin-left on the li items to solve this. Lets do that now.
ul.gallery li{
/* keep all existing rules */
margin-left: 2%;
}
You can work in px, or %. If your working in a fixed width layout, it does not really matter. If you refresh and take a look, you'll notice were looking a lot better. Now, lets add our actual images.
Your unordered list will now look like this:
<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper1"/></li>
<li><img src="wall.jpg" alt="Wallpaper2"/></li>
<li><img src="wall.jpg" alt="Wallpaper3"/></li>
</ul>
Dont worry about the images sticking out...we will fix this.
Ideally, you should have a full size image, and a thumbnail image. This allows for faster load times. By reducing the size of a pictures height and width in css, you do NOT reduce the load time, the full image is loaded, and then scaled, so best practice = have 2 sizes!
now we will add rules to style our image
ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}
You'll notice theres a little space beneath the image, dont get rid of it! We have plans for this 
. Also, a lot of the above was included because it looked nice. All of the above are optional, the image would just be aligned left with no padding/border.
Modify your markup so it looks like this
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
We will now style the p tag. Remember the margin-bottom on the img ? This will push this down 2pixels, so we have space 
ul.gallery li p{
margin: 0 auto; /* center the box*/
text-align: center; /* center the text within the box*/
width: 192px; /*set a width for our label*/
border: 1px solid #ccc;
}
Copy and paste the li's. So that you double/triple them, like so.
<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
</ul>
Here you'll notice that the spacing between rows is none.
We add this rule to ul.gallery li{ margin-bottom: 5px;}
Now, take out the borders from ul.gallery and ul.gallery li And were done
here is the full css
-------------------------------------------------------------------------
ul.gallery{
width: 100%; /*this can be changed*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
}
ul.gallery li{
width: 30%;
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
margin-left: 2%;
margin-bottom: 5px;
float: left;
}
ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}
ul.gallery li p{
border: 1px solid #ccc;
width: 192px; /*set a width for our label*/
text-align: center;
margin: 0 auto;
}
AND the final product:
CSS Wallpaper Tutorial
Hope you enjoyed.
Feel free to comment/make requests.
Download: wallpaper_tut.html
Right click and click Save Link As..to Download