How to display figures

This technique uses ideas from A list apart: CSS Drop Shadows

The best size for an image for the web is about 300 pixels wide. If you need more detail, make it clickable and link to the larger size.

Fig 1: Ponte Vecchio, Florence

The Ponte Vecchio bridge over the Arno river in Florence, Italy

Source: Cepolina Photos

The full package is the image thumbnail inside a container with title, note and source copyright. The container is sized to fit 33% of the workarea, and the picture is scaled to fit inside the container. For this a thumbnail size of a width of 250-300 pixels gives the best result. The little icon under the image automatically appears when you put an <a> around the image. You can only link to a larger version of the image.

<div class="figure-plus-container figure-left">
  <div class="figure-plus">
    <div class="figure-title">
      <span class="figure-nr">Fig 1:</span> Ponte Vecchio, Florence</div>
    <div class="figure-image">
      <a href="pontevecchio"><img src="pontevecchio-300x225.jpg"
         alt="Bridge" width="300" height="225" class="scaled"/></a>
    </div>
    <div class="figure-note">
      The Ponte Vecchio bridge over the Arno river in Florence, Italy
    </div>
    <div class="figure-source-copyright">
      Source: <a href="http://www.cepolina.com/freephoto/">Cepolina Photos</a>
    </div>
  </div>
</div>

Simple figure with drop-shadow. The size can be any size (within reason). This figure has a special feature. It will zoom in the same page if you click on it. If you have no JavaScript it will show the larger picture on a new page. Code is shown below. You only need the JavaScript once if you have several popup images

<div class="figure figure-right" style="clear: both">
    <div class="figure-image">
      <a href="girlseurope.jpg"><img src="girlseurope-200.jpg" class="mouseclickpop"
         alt="Girls" width="200" height="150"/></a>
    </div>
</div>

<script src="scripts/PopBox.js"  type="text/javascript"></script>
<script type="text/javascript">
        var popclickpop = {
         'onclick' : function() { Pop(this,-50,'PopBoxImageLarge'); },
         'pbShowPopBar' : false,
         'pbShowPopImage' : false,
         'pbShowPopText' : false,
         'pbShowRevertImage': false,
         'pbShowPopCaption' : true
        };
        PopRegisterClass('mouseclickpop', popclickpop);
	popBoxShowPopBar = false;
</script>

Centered figure without drop shadow

It isn't possible to use a drop shadow and also center the image because when you float a box to the left or to the right, the webbrowser automatically calculates the smallest size of the surrounding box. There is nothing to do this and also center the image. If you want a centered image, you can have a border, that's it. The classes can only be used directly on the <img> tag.

<img src="yorkbuilding-615.jpg" width="615" height="410" alt="Building in York"
 class="border centered"/>

Text boxes with shadows

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut blandit, felis quis faucibus euismod, nisi massa iaculis velit, ac accumsan pede risus at erat. Aenean eleifend leo non velit.

You can also add a drop shadow to a <div> Since there is no natural width for just text, you must set the width manually. Try a width of 33%.

<div class="dropshadow figure-right" style="width: 10em">
  <div class="shadowed">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Ut blandit, felis quis faucibus euismod,
nisi massa iaculis velit,
ac accumsan pede risus at erat.
Aenean eleifend leo non velit.
  </div>
</div>

Meaning of class names

figure-left: Outer frame that floats a figure to the left.
figure-right: Outer frame that floats a figure to the right.
figure-image: <div class="figure-image"> wraps around the <img> element.
figure-title: <div class="figure-title"> wraps around the image caption. Can be used both above or below the image.
figure-nr: <span class="figure-nr"> to be used if you number your figures.
figure-note: <div class="figure-note"> wraps around the image note.
figure-source-copyright: <div class="figure-source-copyright"> wraps around the copyright notice of the image. Right-aligns the text.
figure-plus-container: <div>that creates a box 33% the width of the page with a shadow. Must be used in combination with figure-left or figure-right
figure-plus: <div>that creates an inner box for the shadow effect.
scaled: Makes an image take all the available space, scaling up or down as needed. Can only be used directly on the <img> tag. On IE6, there are some sideeffects if you refresh the browser.
centered: Centers an image. Can only be used directly on the <img> tag.
border: Puts a border around an image. The border is 5 pixels wide incl. the padding. Can only be used directly on the <img> tag.

Local navigation

Find a person

Account services

How to display figures

Centered figure without drop shadow

Text boxes with shadows

Meaning of class names