Talk:Web Design/CSS challenges
Poetry is not an unordered list
The order of the lines in a poem is significant so the lists should be ordered rather than unordered.
A poem isn't really a list either. It is an example of preformatted text, where the user agent should honour the line breaks in the source. The
pre element is a better choice for marking up poetry. The example for the
pre element in the HTML 4.01 specification uses poetry .
I've changed the challenges to use the
The current draft of XHTML 2.0 introduces the
l element (), which is intended for marking up lines of verse amongst other things.
- Hi, thanks for all your help cleaning up some namespaces. You're right about the poetry being in <pre>, but the point of these first few challenges is to help people learn to style the basic elements such as paragraphs, headings and lists. Maybe a better solution would be to change the text of the challenge to a list of some sort, but either way, the images need to be updated at the same time, otherwise the challenges are broken (the image doesn't match the challenge.. for challenge 1 anyway) What do you think?
- I'll revert the change temporarily until a workable solution comes up! (as I've got students trying to do these challenges right now!)Michaelnelson 04:07, 5 September 2006 (UTC)
- Sorry about the images. If you particularly want to format lists in the first challenge I'd rather see a recipe with an unordered list of ingredients and an ordered list of instructions used as an example.
- I've added a recipe example to b:HTML Programming/Lists#Example. It might be suitable for the CSS challenges.
- Great idea! A recipe it is... I'll take a look at the example and update the challenges soon! Michaelnelson 23:07, 8 September 2006 (UTC)
Challenge #3 - margin/padding above the #wrap
First, I want to mention that in my challenges, I've changed all ID="" to class="" to follow CSSLint Disallow IDs in Selectors.
The question that I have is regarding the padding/margin above the .wrap selector. When I use normalize.css there is a gap above the .wrap; while when I choose <neither> for normalization, then the 20px gap disappears.