Coding the Sidebar

General Information

The sidebar must be coded in a particular way to produce the standard sidebar link appearance and also function in browsers that do not support style sheets. Some HTML editors might not display the sidebar properly, but browsers will.

Specifically, sidebar links are white, have a small left margin, are not underlined. The style sheet produces the look.

Normal Link

The basic rule is: replace the link text and the destinations, but do not modify the styles or any other code in this section of the page. Dropping or changing any other code will change how the sidebar appears.

Keep all code for a given link within a single <div></div> combination. The style sheet provides blank vertical space between <div> tags; the spacing is sized between that provided by <br> and <p>.

For example, if you were creating a link to a regulations page, you'd change the items in bold
<div><a href="part1.htm" class="epaSideBarLinks">Part 1</a></div>

to
<div><a href="regs.htm" class="epaSideBarLinks">Regulations</a></div>

When creating new sidebar links, ensure that you copy the full line of code for each link.

Long Link Text

If a sidebar link is too long to fit on one line, insert a line break and two non-breaking spaces (&nbsp;) before the second line, keeping everything within the link text:

<div><a href="../part2.htm" class="epaSideBarLinks">Part 2 appearing on<br />&nbsp;&nbsp;2 lines like it is here</a></div>

You can see this two-line example in the sidebar on the basic sample page.

Hierarchical Links

To create a hierarchy in the sidebar:

• keep each heading and its associated items within the same <div></div>
• separate each item with a <br>
• indent each item two spaces using &nbsp; codes
• link each heading to a page providing context for the items with it

<div><a href="recycling.html" class="epaSideBarLinks">Recycling</a><br>
&nbsp;&nbsp;<a href="glass.html" class="epaSideBarLinks">Glass</a><br>
&nbsp;&nbsp;<a href="aluminum.html" class="epaSideBarLinks">Aluminum</a></div>

Example Sidebar

Combining the examples above with some others to show how the spacing works results in the following. Note that these links are only samples to show how the code appears in a browser; they don't go anywhere.

EPA Home | Privacy and Security Notice | Contact Us