Skip to content

New Markup (and CSS) for Thumbnail-Galleries

First…

The old , the old CSS

<div class="thumb">
  <a href="img.jpg"><img src="t_img.jpg" alt="" /></a>
  <br />
  Description
</div>
.thumb{
  width:158px;
  float:left;
  margin-top:3em; margin-right:1em;
  border:1px solid #ccc;padding:3px;
  line-height:1em;text-align:center;font-size:smaller;font-weight:lighter;
  color:#666;}
.thumb a img{border:1px solid black;}
.thumb img {
  margin-bottom:5px;
  width:150px;}

So each thumb is contained by a div. The thumb is 150px wide. There is nothing special to the CSS except that the divs are floated.

The new way I do it: markup and CSS

The new markup uses lists to group the thumbnails. I think this is more semantic than my old way of doing it. Additionally it causes less markup if used with more than one thumb. (as in this example ;-))

markup
<ul class='thumbGallery'>
  <li>
    <a href="img.jpg"><img src="t_img.jpg" alt="" /></a>
    <br />
    Description</li>
</ul>
CSS
ul.thumbGallery{
  list-style:none;
  padding:0;margin:0;  /* different browsers style this different so go for sure */
  line-height:1em;text-align:center;font-size:smaller;font-weight:lighter;
  color:#666;}
ul.thumbGallery li{
  float:left;
  border:1px solid #ccc;padding:3px;
  margin-bottom:3em;margin-right:1em;
  width:152px; /* 150px thumb + 2px border around image */}
ul.thumbGallery a img{
  border:1px solid black;
  margin-bottom:5px;}

There is some additional styling for the list but the rest stays the same – if smallified the parts that didn’t change much. The amount of CSS for both solutions is probably the same, so I like the new way of marking thumb-galleries up better…

You can see the new markup in action in the post right before this one. The CSS might have some more tweaks, though.

{ 4 } Comments

  1. Joe Clark | 2004/8/23 at 10:00 | Permalink

    Have you tried getting a definition list to work?

  2. Steffen | 2004/8/23 at 11:22 | Permalink

    In a private email Joe Clark pointed me to Creating an image gallery with definition lists.

    Well, using definition lists is at least cooler. And more difficult to style:

    It seems the most semantically correct way to display a list of thumbnails and links. The big problem is that definition lists are hard to style as they are couplets, unlike unordered lists. The gallery version only works if each thumbnail and associated content is a separate definition list – not ideal semantically.

    Definition lists for image gallery gives the markup and CSS. And this Photo Gallery uses it quite nicely.

    During the litte research done for this reply I stumpled over the text that got me into using my old thumbnail-markup: Practical CSS Layout Tips, Tricks, & Techniques from AListApart.

  3. Ove Klykken | 2004/10/1 at 07:48 | Permalink

    I love the idea of using a bulletlist for the thumbnail gallery. I currently have one version of thumbnails with CSS that looks more like your old css and html using nested divs.

    It doesn’t seem to me that using definition lists would be more semantically correct. If we look upon the thumbnail gallery as a list of thumbnails, it would probably be better to use something like

    ul
     li
      dl

    ?

  4. Steffen | 2004/10/5 at 12:21 | Permalink

    In my opinion you are right, Ove.
    Furthermore using ul has much less weight (in means of markup) than using dls which – as we have learned – would require a new list for every image.

{ 1 } Trackback

  1. […] New Markup (and CSS) for Thumbnail-Galleries […]

Post a Comment

Your email is never published nor shared. Required fields are marked *