Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Quick Finder, Template 4

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

Note: These styles apply to Template 4 pages.

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 white header text "Quick Finder"
  • Link text is blue, not underlined, and underlines on mouseover.

Quick Finder Examples

Here's an example with a width of 50%.

Area Name Quick Finder A-Z Index
EPA Files Home CSS Code Library Exemptions Exit EPA Disclaimer Gotchas! High-level Specifications Master Styles Outdated Pages Quick Checklist Sample Pages Search Box Training Updating/Creating Web pages More…

Here's an example with the default width (100%). Note, as well, that the "A-Z Index" link has been removed.

EPAFiles Quick Finder
EPA Files Home CSS Code Library Exemptions Exit EPA Disclaimer Gotchas! High-level Specifications Master Styles Outdated Pages Quick Checklist Sample Pages Search Box Training Updating/Creating Web pages More…

Top of Page

Directions

Default Quick Finder

  1. Create a table and give it a class of "qfinder"

    <table class="qfinder">

  2. 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%;">

  3. 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">
  4. The Quick Finder title must match the topic: "EPA Files Quick Finder" or "Mercury Quick Finder".
  5. 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.

Top of Page

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/index.html">CSS</a>
				<a href="../Library/">Code Library</a>
				<a href="#">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>

Top of Page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.