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: Statistics defence
- Next post: Keyboard Usage and Tabindex
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Clever idea! I like the use of percentage in the background-position too.
Everytime I visit this site I'm gobsmacked. Clever stuff, but I've come to expect that!
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.
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
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.
Sorry, comments are closed for this post.