Sample: FAQ

Demonstration:

  1. What's this "CSS Repertoire" all about?

    A site demonstrating how developers can take advantage of CSS to improve the usability of their web applications.

  2. Who's behind the CSS Repertoire

    This content was developed by Eitan Suez, programmer, Austin, Texas.

  3. When's CSS3 coming out?

    Check out the CSS roadmap on the W3C web site

  4. What CSS resources do you recommend?

    For a CSS2 reference, I really liked the W3C's own: "Cascading Style Sheets, Designing for the Web" by Hakon Wium Lie and Bert Bos. A nice complement would be Eric Meyer's project-style books ("Eric Meyer on CSS" and "More Eric Meyer on CSS"). These two choices are by no means exhaustive.

  5. Can you point me to some CSS work you've done?

    Much of the content and samples in this site originated with a JSP web application I wrote originally called dbdoc, later open-sourced as project ashkelon (see 'ashkelon.sourceforge.net'). The project is a documentation reference for Java programmers. There was a time when I hosted a public instance of the web application as a service to anyone interested. At the moment, I am not aware of any public instances. Though look for a status update as I'm considering bringing it back online.

Description:

There's nothing really new here but the application of a different combination of techniques. When a question item is clicked, the display property of the corresponding answer is toggled between 'block' and 'none'. Most sites you'll see today make the question a link to another location in the document, so that there's a vertical distance between the "questions table" and the answer to each of these questions. This might be a more enjoyable alternative.

Note: This particular implementation is ideally suited to the HTML <dl> element, which contains a list of terms and their definitions. However I encountered an apparent bug in Mozilla that does not properly setup such lists as list-item's. Even if overridden in the stylesheet, the counter was incorrect (this worked fine for me in Safari). So I went with a simple ordered list instead, where each list items contains two paragraphs, the first being the term and the second the definition.

References

[tbd]