Beautiful Beta BLOGGER learning topics: A simple Photo Album

If you like to have a simple photo album on your blog, here is an easy to implement solution, without any javascript! It is just CSS, and a bunch of html-links to the pictures you want to display. I found this toy at Stu Nichols's CSSPlay, and wanted to share it with you.

Attention: if you add this to your Blog using the Blogger editor (as I did), Blogger adds
-tags where it sees new lines. These
-tags mess up the album when displayed with Firefox.

First, you have to add the following CSS to your style-sheet.

/* Photo album */
#album {
width:320px;
height:360px;
background:#eee url(deer.jpg) 0 40px no-repeat;
border:1px solid #aaa;
margin:0 auto;
text-align:center;
}
.gallery {
position: relative;
margin: 320px 0 0 0;
width: 320px;
padding: 0;
list-style-type: none;
}
.gallery img {
border: 0;
}
.gallery li {
float: left;
}
.gallery li a, .gallery li a:visited {
font-size:11px;
float:left;
text-decoration:none;
color:#000;
background:#fff;
text-align:center;
width:26px;
height:26px;
line-height:24px;
border:1px solid #444;
margin:2px;
}
.gallery li a img {
position:absolute;
top:-320px;
left:0;
visibility:hidden;
border:0;
padding:0;
}
.gallery li a img.landscape {
top:-280px;
}
.gallery li a img.portrait {
left:0;
border-left:40px solid #eee;
border-right:40px solid #eee;
}
.gallery li a:hover {
background:#ddd;
}
.gallery li a:active img, .gallery li a:focus img {
visibility:visible;
}
.gallery li a:active, .gallery li a:focus {
background:#444;
color:#fff;
}
*/ End photo album */

Second, find the a:link definition in your CSS, and add definitions for a:visited, a:hover and a:active. you can format these anyway you like, but they must be in your template for the photo-album to work correctly (because of a bug in IE).

Third, at the spot where you want the album to appear, add the following html: