What's the neatest way to caption images on the web using the latest in HTML/CSS? Demo code please.
+7
A:
I couldn't explain it better than this article: http://www.cs.tut.fi/~jkorpela/www/captions.html
Jon
2009-04-14 13:52:19
I'd say the examples using tables in this link are wrong wrong wrong. Tables are supposed to be used for arranging data.
wheresrhys
2009-04-14 15:45:44
I agree with you... however the link also provides ways to format captions using pure CSS. The table layout examples are there to provide alternative ways to do this. I think it is a good idea to have many ways available. I highly suggest using DIV only layouts.
Jon
2009-04-16 12:49:51
I can already hear the CSS purists having a heart attack over this one...
Paolo Bergantino
2009-04-14 13:54:14
Well, I guess you could argue a table holding a single image solely for the caption aspect of it is flirting with the lines of "tables for layout" - you COULD say that, I'd use this :)
Paolo Bergantino
2009-04-14 13:56:21
+2
A:
I know I've seen a number of articles with some good code over at www.alistapart.com - but here's one to start you off: http://www.alistapart.com/articles/practicalcss/
AnonJr
2009-04-14 14:04:55
+6
A:
There are several semantic ways to markup an image and its caption.
Old school way
An old school method is to use HTML definition lists, see Image captions the semantic way. (There are other nice tutorials demonstrating this method.)
<dl>
<dt><img src="foo.jpg" /></dt>
<dd>Foo</dd>
</dl>
Microformat
There is also a figure microformat which applies on any regular markup:
<div class="figure">
<img class="image" src="foo.jpeg" alt="" />
<small class="legend">Foo</small><br/>
</div>
HTML5
And HTML5 now provides a clean straight method for images with captions through the <figure> and <figcaption> elements.
<figure>
<img src="foo.jpg" alt="">
<figcaption>Foo</figcaption>
</figure>
Török Gábor
2009-04-14 15:34:35
A:
This is what I would do
.img-container {position:relative;}
,img-container h4{position:absolute;bottom:0; left:0;height:Npx;line-height:20px; font-size:18px;}
.img-container img {margin-bottom:Npx;}
If there's a risk of the text running over more than one line you'll want to make the value of N bigger, otherwise 20px will do.
<div class="img-container">
<h4 class="caption">A picture of a dog</h4> //or h3, or h5 etc... - whichever is most appropriate given how you've used headings on your site
<img src,,,,>
</div>
Putting the caption before the image in the markup and making it a heading is I think as close as you can semantically get to saying "this is a picture of ..."
wheresrhys
2009-04-14 15:52:52
A:
It's hard to list all the details in a post here.
Here's a few links that discuss CSS Image Captioning in depth:
Semi transparent image captions using CSS
Semi transparent image captions using CSS and Javascript
CSS Image Captioning with Reusable Rounded Corners
and finally a standalone tool that generates the CSS code necessary to caption an image:
websea
2010-08-23 12:28:09