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 [1].

I've changed the challenges to use the pre element.

The current draft of XHTML 2.0 introduces the l element ([2]), 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.

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 <neither> 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)