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.
Keywords
CSS, cascading style sheets, stylesheets, styles, styling, XHTML, HTML, definition lists, floats, floating, thumbnails, two columns
