Page 1 of 5 They don't have a standard name, but they're all over the web. I'm talking about those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed. Here are a few examples:
Image 1: List of features from AT&T
Image 2: List of sections from Autism
Victoria
Image 3: List of portfolio pieces from Stopdesign
I'm going to call these types of lists "teaser thumbnail lists." Since they come in so many shapes and serve so many purposes, they can be built in dozens of different ways. However, many of the ways that such lists are built are not as flexible and accessible as they could be. This tutorial will go over one way to structure the XHTML and CSS to create such a list that maximizes flexibility for the site owner and accessibility for the end user.
In order to fully understand this tutorial, you should have a good understanding of how floats work. Float: The Theory by John Gallant and Do You Want To Do That With CSS? – Floating Clear by Holly Bergevin and John Gallant are both good prerequisite reading.
The teaser thumbnail list we will build in this tutorial will be a list of content categories for CMX, illustrated in Image 4 below.
Image 4: Our completed teaser thumbnail list.
This is an updated version of the original tutorial published in March 2006. The CSS used to create the teaser thumbnail list has been slightly modified to allow the list to accept text that is very short or images that are very tall without overlaps occurring. Fortunately, the CSS required for this enhancement is not significantly more than the CSS required for the first version, so even if you don't anticipate having short text or tall images, it's best to use this new version from now on.
Keywords
CSS, cascading style sheets, styling, styles, definition lists, thumbnails, icons, images, floats, floating, clears, margins, teaser thumbnail lists
