CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

Image captioning techniques

Up until a few months ago I had been actively avoiding image captions, until I was on a project where it was required. So I sat down and thought up a few ways to caption an image...and...well, here they are:

Using div tags

This is a method I've seen that uses div tags, personally I don't care for it, because I think it promotes the over use of the div element. But it's an option, so here it is:

HTML

<div class="image_caption left">
<img src="image_example.jpg" alt="test image"/>
<p>this is a caption for the bananas</p>
</div>

CSS

div.image_caption{text-align:center;border:1px solid #444;}
div.image_caption img{border:1px solid #ccc;padding:1px;margin:10px;}
div.image_caption p{font:.7em Verdana, Arial, Helvetica, sans-serif;padding:5px;}

view the example

Using an unordered list

This method uses a <ul> to mark up the image and caption, this is what I use. However, I think this method uses a little extra XHTML & CSS (very little amount, but still).

HTML

<ul class="image_caption left">
    <li><img src="image_example.jpg" alt="test image"/></li>
    <li>this is a caption for the bananas</li>
</ul>

CSS

ul.image_caption{text-align:center;border:1px solid #444;list-style:none;}
ul.image_caption li img{border:1px solid #ccc;padding:1px;margin:10px;}
ul.image_caption li{font:.7em Verdana, Arial, Helvetica, sans-serif;padding:5px;}

view the example

Either one these methods is fine, I've also see one with 3 div tags (a container, one for the image, and one for the caption), but I think that's a bit much. I just use the UL version because I think it's clean and easier to work with. I also attach a second class to the DIV or UL to float left or right.

That's all for now.

With_ease,
Tim

<dl class="image_caption">
  <dt><img src="image_example.jpg" alt="test image"/></dt>
  <dd>this is a caption for the bananas</dd>
</dl>

dl.image_caption{text-align:center;border:1px solid #444;}
dl.image_caption dd{border:1px solid #ccc;padding:1px;margin:10px;}
dl.image_caption dl{font:.7em Verdana, Arial, Helvetica, sans-serif;padding:5px;}