Thoughts from the abyss

I think I mentioned before I was taking an online O’Reilly class for HTML and CSS. Well today’s lesson was about CSS classifications and images, except the lesson didn’t mention adding captions to images on pages. I did some Googling and found about about a dozen different ways to do this, but I decided on the following being the easiest.

The CSS looks like this:

div.caption {
   float: right;
   width: 40%;
   border: none;
}

div.caption p {
   text-align: center;
   font-style: italic;
   font-size: smaller;
   text-indent: 0;
}

The HTML would then look like this:

<div class="caption">
   <p><img src="images/image.jpg" alt="MyImage" /></p>
   <p>Your Image Caption</p>
</div>

So this is what I learned today. Now there are all kinds of other ways to do this. For instance, you can do this using lists, or using tables, or spans, etc. I just thought this was the easiest way that I’ve seen. So there’s what I learned today…exciting stuff huh. One would think that there would be a “caption” option that you could use inside an img element, since it’s such a simple thing. I guess we’ll have to wait for the next XHTML.