Web Cash

While working on a new site (Rolling Horde), I decided to include a small image gallery. I randomly display four images from a flickr album in the sidebar.

The pictures are presented in the mark-up that flickr creates, and I used the styling that came with the template I was working from. It creates a simple two by two square of photos, with a slight gap in between them.

Although I like the way they are presented, I’m not sure I like the mark-up that flickr creates. What would be the simplest, semantic way to mark-up and style images in a small album like this?

Semantic Mark-up: An Unordered List

Flickr places all of the photos in divs. These are then styled to float next to each other or appear however you like.

In my opinion, the most semantic way to mark-up photos like this would be to create an unordered list. A photo album is essentially a list of photos.

This could be an ordered list if the photos were intended to be sequential – like a photo essay or a comic book – but the average photo album is just a collection of pictures.

The mark-up would look something like this.

<ul id="images">
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
</ul>

The images would then be displayed in a long, vertical list.

Styling – Making the List Inline

In the end, we’d like to have the images sit side by side. Ideally, they’d form a rectangle of either 2 x 3 pictures, or 3 x 2.

The first thing we want to do, then, is remove the list style type, clear the padding/margins of the list, and make the images appear next to each other. The last bit we can achieve by giving the list items the “display: inline” css declaration.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
#images li {
  display: inline;
}

This would create a simple horizontal list, like this…

Width: Restricting the Number of Columns

Notice how the list terminates at the end of its container div and continues on a second line?

Without a width declaration, the unordered list expands as large as wide as it can. When that width limit is hit, it starts a second line, and continues until all of the list items have been displayed.

We can use this to our advantage by setting a width declaration. This allows us to limit the number of images to be displayed in each row.

If our images are 75px square, and we want to display three images across, we can set our width to be about 250px. The extra space can be used later for paddings and margins – but the images will appear left justified within the list container.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 250px;
}
 
#images li {
  display: inline;
}

This would create a list like this…

Finishing Touches: Padding and Borders

With the basic structure complete, we can add a few finishing touches.

First, we might we to add a little padding to the images. This would space them out a few pixels from each other so that they don’t appear so cramped.

#image img {
  padding: 4px;
}

Adding this line to the css file would change the image album to this.

Finally, a cool effect for images is to add a border around the image. If you include a padding value for the img tag, the border is placed 2-3 pixels away from the edge of the picture. It gives a nice framing effect.

#image img {
  padding: 2px;
  margin: 2px;
  border: thin solid black;
}

This final change would look something like this.

By using an unordered list to mark-up your image collection, you end up with semantically correct and simple to style content. Much better, in my opinion, than a string of divs.

Tags: css, html, Images, Markup, style