Caption beneath an image

[Wally]

I would like to have an image with a caption displayed below it. The
size of the image will vary. The caption should not extend beyond the
width of the image.

How can I cause the text of the caption to wrap so that it will stay
within the (varying) width of the image?

Any ideas?

[Brian]

Wally wrote:

I would like to have an image with a caption displayed below it. The
size of the image will vary. The caption should not extend beyond the
width of the image.

How can I cause the text of the caption to wrap so that it will stay
within the (varying) width of the image?

Put the image and caption in a div. Set the width of a div in pixels.
This might be a good use of inline style to set the width. You'll need
server side processing to accomplish this, e.g., a MySQL table with
image filename and width in pixels, and a php script to query the database.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Christoph Paeper]

*Wally* <Wa*************@epa.state.il.us>:

I would like to have an image with a caption displayed below it. The
size of the image will vary. The caption should not extend beyond the
width of the image.

<fig>
<img src="foo.img" alt="foo"><br>
<caption>Caption</caption>
</fig>

fig {display: inline-table; table-layout: fixed;}
fig>img, fig>caption {display: table-cell;}

or

<fig>
<img src="foo.img" alt="foo">
<caption>Caption</caption>
</fig>

fig {display: inline-table; table-layout: fixed; caption-side: bottom}
fig>img {display: table-cell;}
fig>caption {display: table-caption;}

As this list is not about HTML I won't give you advice which elements or
attributes to use. Yes, it does not work as intended in IE.

--
"We know it's summer when the rain's a wee bit warmer."
cab driver in Glasgow

[Harlan Messinger]

Christoph Paeper <ch**************@nurfuerspam.de> wrote:

*Wally* <Wa*************@epa.state.il.us>:

I would like to have an image with a caption displayed below it. The
size of the image will vary. The caption should not extend beyond the
width of the image.
<fig>
<img src="foo.img" alt="foo"><br>
<caption>Caption</caption>
</fig>

[more code snipped]
As this list is not about HTML I won't give you advice which elements or
attributes to use. Yes, it does not work as intended in IE.

More specifically, in case it wasn't clear to the OP, the above is not
HTML and won't help you if HTML is what you're writing. In that case,
you can use DIVs instead, with distinctive class names to attach the
styles to.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[Christoph Paeper]

*Harlan Messinger* <hm*******************@comcast.net>:

Christoph Paeper <ch**************@nurfuerspam.de> wrote:

<fig>
<img src="foo.img" alt="foo"><br>
<caption>Caption</caption>
</fig>

As this list is not about HTML I won't give you advice which elements or
attributes to use.

More specifically, (...), the above is not HTML

Actually it was inspired by the HTML 3.0 working draft, where it would have
been

<fig src="foo.img">
<caption>Caption</caption>
<p>Foo</p>
</fig>
and won't help you if HTML is what you're writing.
In a browser that styles arbitrary elements, too, it would, though.
In that case, you can use DIVs instead,

Depending on actual case, 'span' instead of 'fig' and maybe 'cite' for
'caption' would be appropriate. Perhaps with "span {display: inline-block}".
I wanted to spare us that discussion.

P.S.: br {display: $almost_anything} makes Opera 7.5 crash.

--
The Hitchhiker's Guide to the Galaxy:
"The Universe, as has been observed before, is an unsettlingly big place,
a fact which for the sake of a quiet life most people tend to ignore."

[Neal]

On Wed, 19 May 2004 03:42:27 +0200, Christoph Paeper
<ch**************@nurfuerspam.de> wrote:

*Wally* <Wa*************@epa.state.il.us>:

I would like to have an image with a caption displayed below it. The
size of the image will vary. The caption should not extend beyond the
width of the image.
<fig>
<img src="foo.img" alt="foo"><br>
<caption>Caption</caption>
</fig>

fig {display: inline-table; table-layout: fixed;}
fig>img, fig>caption {display: table-cell;}

Are you trying to deliberately confuse poor Wally? For those readers who
are weaker in HTML, there certainly is no element <fig>. (In XML we might
see <pudding type="fig"> perhaps.)
As this list is not about HTML I won't give you advice which elements or
attributes to use. Yes, it does not work as intended in IE.

Are you then trying to say that it cannot be done in IE? Seems Brian
preceded you in this *list* with a solution that could.

[Haines Brown]

Without claiming this is the best approach, at least it works. Here I
presume a float right; when I want to center the image, I comment the
float statement.

.caption-container {
text-align: center;
margin-top: 0.3em;
line-height: 9pt;
}
.caption {
font-size: smaller;
font-family: sans-serif;
}
#image-name {
background-color: transparent;
width: NNNpx;
height: NNNpx;
}
#image-container {
width: NNNpx;
margin-top: 0.3em;
margin-left: 0.3em;
float: right;
}
<div id="image-container">
<img id="image-name" src="NNN.png"
alt="[text identifier]" />
<div class="caption-container">
<span class="caption">
Caption text
</span>
</div>
</div>

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

[Christoph Paeper]

*Neal* <ne*****@yahoo.com>:

On Wed, 19 May 2004 03:42:27 +0200, Christoph Paeper

<fig>
<img src="foo.img" alt="foo"><br>
<caption>Caption</caption>
</fig>
Are you trying to deliberately confuse poor Wally?

No. I was just trying to show a more general approach. A quick and dirty
solution was already there---the <br> is of course dirty, too. Usenet is
about discussing things, ending each thread after the first more or less
appropriate answer is not it.
For those readers who are weaker in HTML,
there certainly is no element <fig>.
As I said, it was in the HTML 3.0 draft. I used it as a stand-in for
something like "<div class="captioned-image">" and could have also called it
'foo'. Depending on context it doesn't have to be a 'div' or 'span' in HTML,
that's why I didn't use it.

If you want it to, it can be added with XHTML Modularization, though (<br>
becoming <br/>).

Yes, it does not work as intended in IE.

Are you then trying to say that it cannot be done in IE?

Not this approach, at least not in current versions of that µsoftware. Maybe
I should have written something like: "IE does not support the CSS used
above."
Seems Brian preceded you in this *list*
This is Usenet, not a list.
with a solution that could.

Wally didn't say he wanted a solution that works in IE. He didn't even say
he wanted a solution in HTML+CSS (let alone saying what he already tried). I
didn't say there was no way to achieve the desired rendition in IE6 or other
CSS1 browsers.
OTOH Brian's solution required adding image meta information (width in
pixels) to the mark-up either by hand, which he didn't mention, or by a
server-side script, which he unnecessarily restricted to PHP+DB.
A third, even dirtier but better supported, approach was an HTML table,
which would be off topic on ciwas.

--
"Music is essentially useless, as life is."
George Santayana

[Neal]

On Mon, 24 May 2004 14:24:45 +0200, Christoph Paeper
<ch**************@nurfuerspam.de> wrote:

*Neal* <ne*****@yahoo.com>:

Seems Brian preceded you in this *list*

This is Usenet, not a list.

You've missed the joke. In your previous post you wrote "As this list is
not about HTML I won't give you advice which elements or attributes to
use." (However, it could be argued that CSS begins with good markup, so
HTML is on-topic in that way...)