Figures & captions

Thursday, May 26, 2011

HTML doesn't have an element that allows to insert a figure with a caption. It was once proposed (see HTML3), but never made it into HTML4. Here is one way to simulate such a figure element:

Eiffel tower

Scale model of the
Eiffel tower in
Parc Mini-France


Then in the style sheet you use the class "figure" to format the figure the way you want. For example, to float the figure to the right, in a space equal to 30% of the width of the surrounding paragraphs, these rules will do the trick:

div.figure {
float: right;
width: 30%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}

In fact, only the first two declarations (float and width) are essential, the rest is just for decoration.

0 comments:

Post a Comment

 
rama 8log's © 2011 | Designed by Interline Cruises, in collaboration with Interline Discounts, Travel Tips and Movie Tickets