Flexible news list
Time for yet another example of a “flexible boxes with rounded corners” technique. This time I’ve created a flexible news list by styling an unordered list, using partly the same method as 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 (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, and one for the hover state.
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 on the flexible news list demo page to see the XHTML and CSS used.
- Previous post: CSS teaser box revisited
- Next post: Flexible box with custom corners and borders