Account services

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
Bridge
The Ponte Vecchio bridge over the Arno river in Florence, Italy

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>
Girls

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.

Building in York
<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.