Captions under images

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

 I am preparing a family history site with a fair few images and have
tried several methods of using CSS to get a caption under images.
These are images floated left and right as well as images centred by
enclosing them in p tags. A typical page is:

 At the moment I am depending on title tags alone on the images as
most of the methods I have tried and read about are cumbersome and
convoluted or depend on images being all the same size on a page.

A great example is: /

which starts simply and becomes more and more complex, leading to his
question: 'So now we have a bunch of nested DIVs. How is this any
better than the nested tables they replace?' Which he answers
beautifully of course :-)

 Can anybody suggest a straightforward way to put captions under all
these images using CSS?

                    Thanks for your trouble,


PS I have an unkind thought that this could actually be done fairly
easily using tables :-). Hmmmmm.....

Re: Captions under images

To further the education of mankind, declaimed:

Quoted text here. Click to load it

Considering browser vagaries/differences and positioning, there is none.  
The best pragmatic way I've found for image-captions is inline tables.  
Typically, however, there is an issue with inline vs. inline-block and
Opera vs. other browsers.

Apprentice Learner

Re: Captions under images

Quoted text here. Click to load it
Quoted text here. Click to load it

" ">
<meta http-equiv=3D"content-type" content=3D
"text/html; charset=3Dwindows-1252">
<style type=3D"text/css">
border:solid brown 0.1em;
margin: 5px 0 5px 0;
padding: 1px;
.img p{
margin:1px 0 0 0;
.img span{
<!--[if IE]>
<style type=3D"text/css">
.img span{
<div class=3D"img" style=3D"width:100px">
<img src=3D"image1.gif" style=3D"width:100px;height:100px;" alt=3D
"image 1"><br>
<p><span>caption 1</span></p>
<div class=3D"img" style=3D"width:150px">
<img src=3D"image2.gif" style=3D"width:150px;height:100px;" alt=3D
"image 2"><br>
<p><span>caption 2</span></p>
<p><span>A second paragraph.</span></p>
<div class=3D"img" style=3D"width:200px">
<img src=3D"image3.gif" style=3D"width:200px;height:100px;" alt=3D
"image 3"><br>
<p><span>caption 3 with a longer caption that may

BootNic   Monday, April 03, 2006 11:00 AM

There is no such thing as an underestimate of average intelligence.
*Henry Adams*

Re: Captions under images wrote:
Quoted text here. Click to load it

<style type="text/css">

    float: left;
    margin: .5em;
    border: 1px solid black;
    padding: .5em;
    color: #000;
    background-color: #ccc;
    text-align: center;

.pixbox IMG {
    display: block;
    margin: 0 auto;
    border: 1px solid black;
    padding: 0;


<div class="pixbox">
    <img src="image1.jpg" alt="my image 1">
    My caption for image 1
<div class="pixbox">
    <img src="image2.jpg" alt="my image 2">
    My caption for image 2
<div class="pixbox">
    <img src="image3.jpg" alt="my image 3">
    My caption for image 3

Take care,

Re: Captions under images wrote:

Quoted text here. Click to load it

There are several straightforward ways, with or without CSS. None of them is
the correct one, since there is no markup designed for image captions, sadly
enough. It's up to your taste and style as well as the context.

For example, you could put each image in a single-cell table with a <caption>
element and use an HTML attribute and/or some CSS to make the caption appear
under the cell. This would work both for isolated images and (using
<table align="left"> or <table align="right">) for floated images. More info:

Yucca, /
Pages about Web authoring:

Re: Captions under images wrote:
Quoted text here. Click to load it

If there are multiple image-caption pairs
they _do_ qualify as tabular data -- so long as you
keep all the images in one row/col, and all the captions
in another row/col.  This is not so good if there are enough
images with captions _under_ them to wrap   or cause
horizontal scrolling.  That's a reason to put the captions
in one column _beside_ the images in a second column,
if you are using a table.

But if the  captions must be under the images
and there are enough to wrap or cause horizontal
scrolling, then I would
agree that the data should be represented in divs.

Here's a good article on div representation:
mbstevens (tabular labels/images)

Re: Captions under images

Quoted text here. Click to load it

How about putting the image and caption in the same cell, separated by a
carriage return (or paragraph delimiter)?  This should have the effect
of keeping the two together, while putting the caption below the
picture.  Some may argue that it's not really a "table" with just one
column; but I'd say it's a degenerate table and if that's what must be
done to get around the lack of a caption element, so be it.

Nothing takes longer than a shortcut.
for Email, make the obvious change in the address.

Re: Captions under images

Jose wrote:
Quoted text here. Click to load it

In that case, there is no association of data down rows or across
columns.  You no longer have semantic markup.  I would just use a div,
which is _made_ for use as a kind of bag into which associated data
can be placed.

Quoted text here. Click to load it

Re: Captions under images wrote:
Quoted text here. Click to load it
  See also
< .

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Captions under images wrote:
Quoted text here. Click to load it

Well, there are complex issues here. For a start, this reference
uses pics all the same size and so will be no help on this
particular variable. But it is a nice example of some things, one
of them being that it does separate style from content which
should by now obviously be a good thing (whether over-riding is
another matter).

And it has the nice advantage of wrap. This is a very great
advantage for a page chock full of thumbnails. You won't get this
in tables, you will get scrollbars!

As for tables being easier to write up, yes, probably. But only
if you are judging crude looks. More subtle ones to accomodate
different sized thumbnails to line up nicely in some way and it
gets trickier even in tables.  

Quoted text here. Click to load it

Well, he did! It was simple enough? You break, you text-align and
that is that. By the way, if you don't like the large space
between the pic and the caption, add a zero or smaller
line-height (assuming the caption is _not_ going to go on and on
to wrap)

If you are just captioning larger pictures, instead of your <p
class="centre"><img src="images/headstone.jpg" title="Headstone
of Joseph Strong" alt="Headstone of Joseph Strong" width="510"
height="283" /></p> use a div, style it to centre and so on. (i
am surprised,  given you are using a centered p, that you did not
just go on and simply use a break and caption text in the p?


OT: (was Re: Captions under images)

While the city slept,
( feverishly typed...

Quoted text here. Click to load it

Hello again,

So, you are still subjecting the legitimate owners of to ironic
spam, despite my previous message (backed up by others on the group)

Again, I ask, are you the legitimate owner of, or have they
allowed you to use the domain as a reply-to address? The domain is
registered, so if you are using it without their permission, they may have
reasonable grounds to be rather annoyed -- especially if your posts to
usenet are causing more spam to arrive on their servers.


Nigel Moss
Mail address will bounce. | Take the DOG. out!
"Your mother ate my dog!", "Not all of him!"

Re: OT: (was Re: Captions under images)


 Ooooops, sorry about that!!! I will change,


On Thu, 6 Apr 2006 01:15:31 +0100, "nice.guy.nige"

Quoted text here. Click to load it

Re: OT: (was Re: Captions under images)

Hi Again!,

 That should be better?


On Thu, 06 Apr 2006 10:32:13 +1000, wrote:

Quoted text here. Click to load it

Re: OT: (was Re: Captions under images) wrote in

Quoted text here. Click to load it

Now would you change your top posting behavior to in-line?

Stan McCann, "Uncle Pirate" /
Webmaster, NMSU Alamogordo /

Re: OT: (was Re: Captions under images)

Hi Stan,

Thanks for your reply:

Quoted text here. Click to load it

 Should I also change my will to include you :-)


Site Timeline