Web Design in a Nutshell, 3rd Edition

Fancier Boxes

If your design calls for more graphical embellishments on the edges of the box, yet you still need the box to be expandable, then a slightly different approach is in order. This example produces the expanding box style shown in Figure 24-10.

Figure 24-10. Fancier box edges

To achieve graphic effects on all four sides of the box, we start with the set of images shown in Figure 24-11.

Figure 24-11. Image elements for the fancier box

In this example, the markup must provide five hooks for background image styles. Instead of all divs, this time, we’ll take advantage of the existing h2 and p elements in the markup and add divs only as needed. This is the markup used in the example.

<div class="sidebar">      <h2>Sidebar Title</h2>
     <div class="content">
        <p>This is the content of the sidebar</p>
     
        <p>And a little more<br />content for good measure.</p>
      </div>
     
      <div class="footer">
      <p>A paragraph containing author information</p>
      </div></div>

The style sheet that pulls it all together applies images to the divs, the h2, and the paragraph (p) in the article footer. The style sheet also includes 2 em vertical margin shifts to compensate for a gap inserted by carriage returns in paragraphs. This measurement may need to change based on the font size and line height in your content, so be sure ...