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  element is a better choice for marking up poetry. The example for the  element in the HTML 4.01 specification uses poetry.

I've changed the challenges to use the  element.

The current draft of XHTML 2.0 introduces the  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 &lt;pre&gt;, 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 HTML Programming/Lists. 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.

Here is my code pen for challenge 3

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 for normalization, then the 20px gap disappears.

I generally use normalize.css when building, but this has me stumped. --Pdkennelly (discuss • contribs) 20:00, 13 January 2015 (UTC)