Part 4: The Content Div

• ✔ The home page will feature a gallery of small mug photos. We need a nested div to contain each mug and caption.
• ✔ 1 - Insert your cursor inside the content div. Go to Edit > Select All to select all the text in the content div. Then, hit Delete.
• ✔ With you cursor still planted inside the div, to to Insert > Layout Objects > Div Tag. Type "mugSmall" into the Class field.
• ✔ Don't click OK yet—click New CSS Rule. This will bring you to the New CSS Rule dialog, with the selector name already filled in for you.
• ✔ Box category
  • ✔ Width: Set the width to "200px".
  • ✔ Float: Set the div to float "left".
  • ✔ Padding: Uncheck "same for all" over padding. Add "10px" of top and bottom padding. Leave the left and right settings empty to avoid any box model issues.
  • ✔ Margin: Add a "10px" margin to create some space between the divs.
• ✔ Border category
  • ✔ Choose a border style, width and color.
• ✔ Click OK when you're done. Back in Design View, you'll see the new "mugSmall" div. However, something crazy has happened—the content div collapsed, and the footer div moved up in the layout.
• ✔ We need to force the content div to contain the floated "mugSmall" div. There are two ways to do it—add a "clearfloat" element inside the div, or set the div to overflow "hidden". I say, go with the overflow method, it is the simplest, and I don't anticipate any problems with overlapping elements in this layout.
• ✔ Edit the .content selector.
• ✔ Position category
  • ✔ Overflow: Set the overflow to "hidden".
• ✔ Box category
  • ✔ Width: Set the width to "100%" (Choose the % units from the dropdown menu to the right.) A width or height declaration is required to make the overflow property work in Explorer Windows and Opera).
• ✔ Problem solved—the content div now contains the floated div.
• ✔ 2 - Insert your cursor inside the "mugSmall" div. Go to Edit > Select All and hit Delete. Open the images_mugSmall folder in the Files panel. Select cartoons_gumby_small.jpg, and drag and drop into the div.
• ✔ Type the following caption into the div:
  • ✔ Gumby
  • ✔ Howdy Doody
  • ✔ $12.95
• ✔ When you type the caption, be careful not to hit your Return (or Enter) key. Hitting Return will wrap the text in paragraph tags, like this:
• ✔ Paragraphs have 15px of left and right padding, which is a lot of space in a small div.
• ✔ Instead, hit Shift-Return to create line-breaks, like this,
• ✔ The line breaks won't create any extra space inside the div.
• ✔ Okay, let's fix the alignment of the text and image. Using the CSS Styles panel, create a new style. Choose the Compound selector type. Enter .mugSmall img as the selector name.
• ✔ Box category
  • ✔ Float: Set the image to float "left".
  • ✔ Padding: Uncheck "same for all" over padding. Add "10px" of left and right padding.
• ✔ 3 - Select "Gumby" and type "cartoons.html" into the Link field in the Property inspector. This will turn the text into a link.
• ✔ 4 - Click the edge of the nested div to select it. You'll notice that the div is labeled <div.mugSmall> in the Tag selector. Go to Edit > Copy.
• ✔ Hit your right arrow key to move your cursor to the right, then Edit > Paste to paste a copy of the div.
• ✔ Edit > Paste again to create a third div.
• ✔ Repeat Edit > Paste until you have three rows of mugs.
• ✔ 5 - As much as we love Gumby, other mug motifs will be offered. Expand the images_mugSmall folder in the Files panel. Select the Gumby mug that you want to replace. Click the "Point to File" icon next to the Image Src field in the Property inspector.
• ✔ Drag to extend the blue line, pointing to the new image in the images_mugSmall folder in the Files panel. Use the table below as a reference.
• ✔ ROW 1
  • ✔ cartoons_gumby_small.jpg > Gumby > Howdy Doody > $12.95
  • ✔ music_hendrix_small.jpg > Jimi Hendrix > Mint > $8.95
  • ✔ tv_24_small.jpg 24 > New classic > $8.95
• ✔ ROW 2
  • ✔ tv_ilovelucy_small.jpg > I Love Lucy > Porcelain > $11.95
  • ✔ retro_pepsi_small.jpg > Pepsi > Extra-large > $10.95
  • ✔ tv_simpsons_small.jpg > Homer > The Simpsons > $8.95
• ✔ ROW 3
  • ✔ music_stones_small.jpg > The Stones > circa 1979 > $10.95
  • ✔ cartoons_bettyboop_small.jpg > Betty Boop > First Edition > $9.95
  • ✔ retro_cocacola_small.jpg > Coca Cola > from 1941 > $11.95
• ✔ Replace the captions. Link the name of each mug to the appropriate category. For example, "Jimi Hendrix" should link to the "music.html" file. "24" links to "tv.html", and so on.
• ✔ Depending on your font size, some of the longer captions might wrap to 4 lines, and the divs will stagger to different heights. If this happens, edit the .mugSmall style. In the Box category, set the height to 90 pixels. See how it looks, adjusting the height until it looks about right.
• ✔ 6 - One more image is missing here—if you refer back to the home page wireframe, you'll notice a long, narrow graphic on the right. This can be added to the content div as a background image.
• ✔ Edit the .content div.
• ✔ Background category
  • ✔ Background-image: Set the background-image to tv_blurb.gif. You'll find it in the images_logo folder.
  • ✔ Background-repeat: Set to "no-repeat".
  • ✔ Background-position (X): Set the horizontal position to "right" to align the image on the right side of the div.
  • ✔ Background-position (Y): Set the vertical position to "center".