In this post I'm going to show you how to stylize a simple Flickr gallery with CSS. We'll use floats and image resizing to get the desired effect. Additionally, we'll use some background images in order to add some extra nice touches to our gallery. First of all, we need a markup to start with. Here's a sample:
<div id="gallery"> <ul> <li><a href="#"><img src="flickr-gallery/gallery/1.jpg" alt="" /></a></li> <li><a href="#"><img src="flickr-gallery/gallery/2.jpg" alt="" /></a></li> <li><a href="#"><img src="flickr-gallery/gallery/3.jpg" alt="" /></a></li> <li><a href="#"><img src="flickr-gallery/gallery/4.jpg" alt="" /></a></li> <li><a href="#"><img src="flickr-gallery/gallery/5.jpg" alt="" /></a></li> <li><a href="#"><img src="flickr-gallery/gallery/6.jpg" alt="" /></a></li> <li><a href="#"><img src="flickr-gallery/gallery/7.jpg" alt="" /></a></li> <li><a href="#"><img src="flickr-gallery/gallery/8.jpg" alt="" /></a></li> </ul> </div>
We have a container and an unordered list which, in turn, contains images and their parent links. In this example we don't use the alt attribute on each image, but you're strongly encouraged to do so for accessibility reasons. Now let's move to CSS:
#gallery {
margin: 0 auto;
width: 640px;
padding: 0 0 0 55px;
background: url(flickr-gallery/flickr.png) no-repeat 0 0;
}
#gallery ul {
width: 500px;
margin: 0;
height: 100%;
overflow: hidden;
padding: 0;
list-style: none;
}
#gallery ul li {
width: 120px;
height: 100px;
float: left;
padding-top: 55px;
background: url(flickr-gallery/item.png) no-repeat 50% 0;
}
#gallery ul li a {
display: block;
width: 100%;
height: 100%;
}
#gallery ul li a img {
border: none;
width: 100%;
height: 100%;
display: block;
}
The main container has a background image showing the Flickr logo, so we've added some left padding to insert it properly. The unordered list will contain floated elements, so we clear and contain them using the overflow property. As you can see, all list items are floated and have a background image (a marker) on their top. This image is horizontally centered. Finally, links and images have their dimensions expressed in percentages so that they scale along their containers. You can see this demo here.