How to Provide a Document Outline with CSS3

Using CSS3 to create a document outline is useful when a page contains a lot of material and you want the user to navigate it easily. The outline relies on the various tags you provide. The current method of creating a document outline is to use the <h1> through <h6> tags.

This approach works great when the material comes from the same page or you have control over the formatting of the content. It doesn’t work quite so well when the content comes from another location, which is why the standards groups had to come up with an entirely new way to do things.

The following procedure demonstrates a technique for adding an outline to a page that already contains a menu. You use the Navigation as a starting point.

  1. Open the Navigation.HTML file and add the following code to the end of the <body> section (after the existing menu).

    <div id="DocOutline">
     <ul>
     <li>
      <a href="Navigation.HTML#MainHeading1">
      Main Heading 1
      </a>
      <ul>
      <li>
      <a href="Navigation.HTML#SubHead1a">
       Sub Heading 1
      </a>
      </li>
      <li>
      <a href="Navigation.HTML#SubHead1b">
       Sub Heading 2
      </a>
      </li>
      </ul>
     </li>
     <li>
      <a href="Navigation.HTML#MainHeading2">
      Main Heading 2
      </a>
      <ul>
      <li>
      <a href="Navigation.HTML#SubHead2a">
       Sub Heading 3
      </a>
      </li>
      <li>
      <a href="Navigation.HTML#SubHead2b">
       Sub Heading 4
      </a>
      </li>
      </ul>
     </li>
     </ul>
    </div>
    <div id="DocContent">
     <br />
     <h1 id="MainHeading1">Main Heading 1</h1>
     <p>Introductory Material</p>
     <h2 id="SubHead1a">Sub Heading 1</h2>
     <p>Article</p>
     <h2 id="SubHead1b">Sub Heading 2</h2>
     <p>Article</p>
     <h1 id="MainHeading2">Main Heading 2</h1>
     <p>Introductory Material</p>
     <h2 id="SubHead2a">Sub Heading 3</h2>
     <p>Article</p>
     <h2 id="SubHead2b">Sub Heading 4</h2>
     <p>Article</p>
    </div>

    The entries consist of a document outline and the associated content. The outline specifically follows the <h1> and <h2> objects in this example. There are methods for generating this sort of content automatically, but all of them require coding.

    This is one case where using CSS does involve some manual coding that you wouldn’t have to perform when using other techniques, such as including JavaScript. However, the advantage is that the example will work fine with any browser that supports CSS.

  2. Save the HTML file.

  3. Open Navigation.CSS and type the following styles at the end of the file.

    #DocOutline
    {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     width: 145px;
     height: 800px;
    }
    #DocOutline ul
    {
     margin-bottom: 20px;
     list-style: none;
     margin-left: -40px;
    }
    #DocOutline ul ul
    {
     margin-left: -20px;
    }
    #DocContent
    {
     margin-top: -800px;
     margin-left: 150px;
    }

    The main focus is on the document outline where you need to provide formatted links to the content found on the remainder of the page. Notice that the outline is set to a specific height. The reason for this setting is to make it easier to position the document content once the links are displayed.

    The example sets the #DocOutline ul style list-style property to none. You could just as easily use numbers, letters, or any other outlining index you prefer.

    This list will automatically indent half of the distance of the individual menu elements you created earlier. In order to place the links at the left side of the page, you must reverse the list’s indentation by setting margin-left to -40px, which is half the 80px width of the individual menu elements.

    Each level will require some additional amount of indentation so the user can see the relative levels of each entry. The #DocOutline ul ul changes the indentation for the second-level headings. If you had a third level of headings, you’d create a #DocOutline ul ul ul style to format it.

    The document content will start after the document outline unless one of two things happens. First, you can use actual columns. However, this functionality requires CSS3. Second, you can use pseudo-columns. You set the margin-top property value equal to the height of the document outline.

    The technique shown in this example will work with any browser that fully supports CSS. Notice that you must also set margin-left to a value that equals the width of the document outline (plus a few pixels for spacing.

  4. Save the CSS file.

  5. Reload the Navigation example.

    You see the document outline and associated content. This outline actually works — you can click links to go to the various headers presented in the outline.

    image0.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.