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.

View the flexible news list demo 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.

Posted on June 20, 2004 in CSS

Comments

  1. Clever idea! I like the use of percentage in the background-position too.

  2. Everytime I visit this site I’m gobsmacked. Clever stuff, but I’ve come to expect that!

  3. I have allready seen many solution for boxes. But this solution is the best. It’s very easy to impliment and looks very nice ;-) Today I visit your site for the first time. Now your URl is in my favorits. Thank you for your good content.

  4. I have been attempting to implement your news item code in a static page on my blog. so far I have had no luck because it breaks the CSS code for the rest of the page.

    The main index is here http://cranialcavity.net/fullthrottle/wp/index.php. That gives an idea how the page should look. The static page that breaks is here http://cranialcavity.net/fullthrottle/wp/template.php

    I plan on using these “news item” boxes to insert RSS news feeds into if that helps you in any way. Thanks

  5. January 14, 2005 by Roger Johansson (Author comment)

    Marc: I had a quick look at your CSS and HTML, and my guess is that at least one of the rules in your external CSS file is clashing with those used for the box (which actually isn’t the one described in this post, but in Flexible box with custom corners and borders ).

    One that looks especially suspicious is this:

    div#content p { margin-left: 50px; margin-right: 220px; }

    The id selector will make that rule have a higher priority than .box p. To fix this, try changing it to div#content .box p.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.