Unit 0 Contents

Header Buttons and Ordered List Styles

Here's the Explore header you saw on the first lesson page.

And here's another one! Just as a friendly note, if any of these image headers are followed directly by another image, the image will try to run up on the same line as the image header. This happens because images are inline elements, which means they float horizontally beside each other by default. To stop this, add some inline CSS to the header so it has the 'display: block;' property. You shouldn't have to do this very often.

1. So, here's a basic ordered list.
2. Nothing really special going on here.
3. But hey, let's put a fraction in this item. Why not? Fraction:

1. Here's an example of an ordered list with three more ordered lists nested inside it.
1. As you'll see if you look at the code, we closed up the list item that displays as Number 1, then started the nested ordered list that contains this list item.
2. Technically, this isn't good semantic HTML, but it's the only way we can get this layout to work correctly across browsers.
2. Why is that, you ask?
1. It's Internet Explorer's fault.
2. It's always Internet Explorer's fault.
3. “But I made a list that had <ol> tags nested directly inside <li> tags, and it looked just fine in IE9 when I previewed it,” you say.
1. Well, it won't when you build the next type of list we're going to look at.
2. It's so important that not only did I write up all this placeholder text warning you to build your lists exactly as shown here, but I also left you a comment in the code to remind you.

1. So, here we also have an ordered list with three more ordered lists nested inside it.
2. The difference is that the main list doesn't have any text of its own; all the text belongs to the nested list items.
1. Our client wants the nested lists' items to base-align with the list items from the main list.
2. We accomplish this by setting a negative top margin on the nested lists.
1. This solution will only render the same way consistently across browsers if you close the main list's list item first, then begin the nested list.
2. Trust me on this.

By the way, any direction lines you run across need to be set in bold type.

1. So, below this list item, there's a two-column horizontal list. Fancy, right? The text in the nested lists is just placeholder text, since this type of setup tends to contain short snippets of text.
1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups
2. Next, we have a three-column horizontal list. Pretty much the same as the two-column list, only with more columns (obviously).
1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups
3. Here's a four-column horizontal list.
1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups
4. And finally, here's a five-column horizontal list.
1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups

Check-In: Questions 0–0

Ahh, here's a check-in head! The CSS will handle the image for you; just set the correct class name.

This next list is just to show you what all the different horizontal lists look like when they need to base-align with the items in the main list. There wouldn't normally be this much variation in a single list, but since this is just a sample, I crammed them all in.

1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups
1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups
1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups
1. 2 cups
2. 4 cups
3. 6 cups
4. 8 cups
5. 10 cups
6. 12 cups