Math Trailblazers

Highlighter

Notes

Yellow

Green

Blue

Red

Magenta

Remove

Create a New Note

Cancel

Select All

Unordered Lists

Unordered lists are pretty simple, really.
Pop 'em in and go.

For good measure, though, here's an unordered list nested inside an ordered list.

You'll note we have to specify type="disc" when we nest unordered lists. Otherwise they'll show hollow bullets.
Nested lists don't have the same problem when they stand on their own.

Just treat it like you would a nested ordered list. See? Easy!

Definition Lists

Mr. Moreno:: Here is a Definition List inside an Audio Div
Jacob:: Padding can be added to the <dd> tags (style="padding-left: 120px") if the content on the left side is longer than this example.
Mr. Moreno:: Here is a fascinating sentence about math.
Jacob:: The left side content is automatically set as bold.

Definition List without an Audio button

Mr. Moreno:: Here is a Definition List inside a class="list-item" Div
Jacob:: Here is another fascinating sentence about math and its mathematical mathyness.

Workshop Ordered Lists: An update (Chuck's notes, here...)

As an update, there will be times where you would need to place these icon charts to the left of an ordered list. This update will now address that. These images are set using a class called “i class”. If you look at the code, I will attempt to show you the variety of images at your disposal! For example, the image to the left shows all icons. code: 
This would be for a solitary square icon... code: 
...and this would satisfy your single circle requirements. code: 
And here is that single triangle instance. code:

One thing to note- you will have to close out that “i class” with a code, or your page will get all "wonky", using the technical term here... (not sure if everyone would have made that error as I did).

At any rate, here's a “circle-square”... code: 
...a “triangle-square”... code: 
...and finally, a “triangle-circle”. code: 
I neglected to place the two box examples: code: 
code: 
code: 
code: 
code: 
code:

Image Styles

Let's quickly go over some basic image styles so you have them handy.

The yellow box uses a new class, 'float-left.' It does exactly what the name implies—it floats the image left. It also adds a 20px right margin and 10px bottom margin to the image, to shove the text away from it, and it sets a small negative top margin to align the image to the top of whichever paragraph follows it.

If you look at the code, you'll see a div with class 'clear' after this paragraph. This clears the float and stops other content from floating to the right of this image.

The blue box uses a class named 'float-right,' which replaces the 'wrap-image' class we used in Grades 3 and 4. In addition to floating its images right, the 'wrap-image' class applied a border with rounded edges to the image, which we constantly had to cancel out with the 'no-border' class. For Grade 5, I decided I'd had it with that nonsense. The 'float-right' class just floats the image right, sets a 20px left margin and 10px bottom margin to shove the text away from it, and sets a small negative top margin to align it with its corresponding paragraph.

The magenta image below is centered on the page. It uses class 'center-image.'

This stops us from having to use awful, deprecated <center> tags or lots of inline CSS to get our images to center correctly.

Depending on what your markup looks like, you may need to manually tweak the margins of your images to get them to position correctly. This is both OK and expected for this project.