![[logo] US EPA](http://www.epa.gov/epafiles/images/logo_epaseal.gif){kind=logo}
Quick Finder
The Quickfinder is recommended for top-level pages. Examples include AA, RA and topic pages.
Here are some guidelines for you as you build your Quick Finder box:
- Quick Finder boxes must follow the look of the EPA Web standard, but it doesn't matter how you create them. Quickfinder standard - see the content and style section of the boxes standard.
- Used on any page, typically on a main page.
- Left aligned at the top of the page.
- Used to provide links to the most frequent or useful program or regional content.
When using a Quick Finder box, your Content and Infrastructure Coordinators may grant an exemption to the use of the style sheet if the style does not meet your page layout needs. Any custom coded Quick Finder must meet the following criteria:
- Located at the top of the content area.
- Left Aligned
- Include a green header bar (color 5A9263) with rounded upper corners.
- The box has no borders on the side, but may have one on the bottom.
- Include white header text "Quick Finder"
- Link text is blue, not underlined, and highlights on mouseover.
- Do not use boxes other than those in this standard.
Quick Finder Examples
Here's an example with a width of 50%.
Here's an example with the default width (100%).
Directions
Default Quick Finder
- Create a table and give it a class of "qfinder"
<table class="qfinder"> - To set a table width, use an inline style in the table tag. The wider example on this page is using the default 100%. No additional code needed.
- The smaller example, above, is using a 50% width.
<table class="qfinder" style="width: 50%;">
- The smaller example, above, is using a 50% width.
- Adjust the colspan attribute of the table header <th> to match the number of columns. Simiarly, divide 100% by the number of columns to get the cell <td> width. Examples:
- For a 4-column table, each cell is 25% (100/4=25), and the <th> is coded <th colspan="4">
- For a 5 column table, each cell is 20% (100/5=20), and the <th> is coded <th colspan="5">
- For a 6 column table, each cell is 16% (100/5=16.6; round down, not up, so the total is < 100%), and the <th> is coded <th colspan="6">
- The Quick Finder title must match the topic: "EPA Files Quick Finder" or "Mercury Quick Finder".
- If you have a "More…" link, give it a class of "more":
<a href="filename.html"class="more">More.</a>. The arrow (
) will be present.
Code for 4-column Quick Finder with 50% Width
Here's the code for the table with a 50% width and four columns.
<table class="qfinder" style="width: 50%;"> <thead> <tr> <th colspan="4"><a href="filename.html">EPA Files Quick Finder</a></th> </tr> </thead> <tbody> <tr> <td width="25%"> <a href="../index.html">EPA Files Home</a> <a href="../s/colors.html">Colors</a> <a href="../Library/">Code Library</a> <a href="http://yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/look-feel#exemptions">Exemptions</a> </td> <td width="25%"> <a href="../exit.html">Exit EPA Disclaimer</a> <a href="../gotchas.htm">Gotchas!</a> <a href="../docs/specification.html">High-level Specifications</a> <a href="../implementation.html">Implementation Schedule</a> </td> <td width="25%"> <a href="../s/">Master Styles</a> <a href="../outdatedpages.htm">Outdated Pages</a> <a href="../docs/checklist.html">Quick Checklist</a> <a href="../samples/">Sample Pages</a> </td> <td width="25%"> <a href="../searchcode.htm">Search Box</a> <a href="http://www.epa.gov/productreview/training/">Training</a> <a href="../docs/">Updating/Creating Web pages</a> <a href="filename.html" class="more">More…</a> </td> </tr> </tbody> </table>