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)
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.
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
- 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">
- Example:
- 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!)
- Example:
- Insert your image
- Example:
<img src="https://www.epa.gov/nerl/images/front/playset.jpg" width="209" height="144" alt="playground" />
- Example:
- 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>
- Example: