Summer trip to Yuba Pass (A)

Use this template for stories. You'll notice that the menu bar has the word "Classes" highlighted. To produce this effect, the <a> tag of the "Classes" item in the menu must include: class="active". That changes backround and text colors.

Body text needs a "class" applied

All text on story pages must be limited in width to prevent it running across the entire page. To do this, you need to add another class rule to the paragraph tags: class="half". That makes the width paragraphs 360 pixels.

If you're story is longer than the vertical height of the picture column, and you want the text to wrap under the last picture, then omit class="half" in that paragraph.

The class="half" rule will also work on headlines, but since headlines won't be that wide anyway, it's not necessary.

Pictures before text in the code

In the code, pictures need to occur before the story text. However, the H1 headline should occur before the pictures, to get proper top alignments.

Crop pictures to size in Photoshop

I recommend you crop pictures to size in Photoshop (rather than using the height and width attributes in the image tags, which directs the browser to size them for you. That way you can use much smaller files for quicker downloads.) Pictures on this page are: 105 px wide (3 across), or 165 px wide (2 across), or 338 wide (1 across).

Pictures have built-in margins

The pictures all sit inside an invisible box (#picset) that is 350 pixels wide. As long as the combined width of the pictures, including a 10 pixel wide margin, doesn't exceed 350, they will pack together as shown on the right.