This is a styled unordered list, based partly on the method used in the CSS Teaser Box demo. The list was designed to display links to recent news, but there are plenty of other uses for something like this.
Each list item will expand vertically to contain any amount of text. It will take either an extremely large font size or a heading that is several lines long to break the effect. Increasing the height of the background image will let the heading grow taller before problems occur.
No extra markup is needed. There are two versions of the list items. The version which doesn't have an arrow in its left border needs only a single image (box.gif, not counting the arrow in the ”Read more”-link). For the version with the arrow in the border, two more images are needed: one for the normal state (edge.gif), and one for the hover state (edge-h.gif).
Hover state? Yes, in browsers which support :hover on any element, the border will change colour when the list item is hovered over. To do that, the position of the background image is shifted horizontally, and the border colour is changed. The arrow version is slightly more complicated; instead of just changing the border colour, a different background image is displayed. It's possible to use the same one-image technique that is used for the top and bottom of the box, but doing so will increase file size. I'll leave it to you to decide which is better: a larger file size or an additional server hit.
View source to see the XHTML and CSS.
Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula.
Read moreNullam adipiscing dui blandit ipsum.
Read moreVivamus convallis tempus ante.
Read moreVivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum.
Read more
