Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Styles for Images, 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.

Graphics Standards

Please note that you no longer need to include border="0" for linked images. The style sheet manages that automatically.

Image (and Captions)

playground

Image without a caption, floated left. Your text will wrap automatically around the floated image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

playground

A Probabilistic Exposure Assessment for Children Who Contact CCA-treated Playsets and Decks Using SHEDS-WOOD Scenario - EPA/600/X-05/009. This final report discusses the assessment to determine potential health risks to children from contact with CCA-treated wood in playsets and home decks.

Image with a caption, floated right. Your text will wrap automatically around the floated image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Description

An image with a caption in a frame that floats right (or left). The width depends on the width of your image.

How-To

  1. Make a <div> and give it a class of "imgcontainer-l" (or "imgcontainer-r"). All the code for this image/caption must be within that <div>.
    • Example: <div class="imgcontainer-l">
  2. Add an inline style to account for the width of your image. In this case, the image is 209px wide.
    • Example: <div class="imgcontainer-l" style="width: 209px;"></div>
    • If you forget this step, your text will expand the box. (Try it and see!)
  3. Insert your image
    • Example: <img src="https://www.epa.gov/nerl/images/front/playset.jpg" width="209" height="144" alt="playground" />
  4. Add a paragraph (or a div) and give it a class of "caption"
    • Example: <p class="caption"><a href="https://www.epa.gov/heasd/sheds/cca_treated.htm">A Probabilistic Exposure Assessment ...</a>- EPA/600/X-05/009...</p>

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

Jump to main content.