How to insert a photo and caption

in a basic html page

[reddevil]

Lets say I have a basic one row, one cell page with lots of text that I want to make into a template page.

What is the best way to insert a photo with a caption (sometimes 2 or 3 photos per page)?

My only criteria is that it should be easy to do on all pages and should look good in Netscape 6, IE6 and Firefox.

Thanks.

[dickbaker]

Just insert this into your text: <img src="myphoto.jpg" width="175" height="126" align="right" alt="my photo">.

As for the caption, make it part of the photo. In other words, add a white area underneath the photo (in Photoshop or another imaging program) and then type in your caption there.

[iamlost]

Other than incorporating the caption into the image you can:

Place both within a <div> i.e.

HTML:

<div class="image-div">
<img src="an-image.png" alt="" />
<p>An Image</p>
</div>

CSS:

* {padding: 0; margin: 0;
}
.image-div {width: 10em; height: 11em; background: #ffd;
}
.image-div img {width: 10em; height: 10em; vertical-align: bottom;
}
.image-div p {background: #ddf; text-align: center;
}

Use a <dl> [definition list] i.e.

<dl>
<dt><img src="an-image.png" alt="" /></dt>
<dd>An Image</dd>
</dl>

CSS:

* {padding: 0; margin: 0;
}
dl {width: 10em; height: 11em; background: #ffd;
}
dt img {width: 10em; height: 10em; vertical-align: bottom;
}
dd {background: #ddf; text-align: center;
}

Note that you can use px in place of em if preferred.
Note that padding/margin can be adjusted as wanted.

Which method is easiest is personnel preference and requirements.

[encyclo]

You can do this with CSS - check out this recent thread in our CSS forum:

[webmasterworld.com...]

In particular msg #6 by SuzyUK. Could be just what you're looking for. :)

[reddevil]

thanks for your responses...and to encyclo for the link - this should be exactly what I am looking for as long as it works in the major browsers.
Cheers.