> That's one possible approach, putting the image and the caption
inside a
> div element and setting the width of the element containing the
caption to
> match the width of the image. There are many other ways to attach
> captions to images; for some of them, see
> approaches, see http://www.cs.tut.fi/~jkorpela/www/captions.html
>
Yep. That's where I got the approach that I used.
> You could set the padding in pixels and subtract it from the width
value
> that you set for the content of p.imgcaption.
Too clumsy.
>You could use markup like
> <div class="imgcaption"><div>caption text</div></div>
> and set
> div.imgcaption { width: 200px; }
> div.imgcaption div { padding: 0 0.75em; }
> (instead of the style="width: 200px" attribute).
The trouble with this is that pictures across multiple pages will have
unpredictable widths, so there's no way to set it in the stylesheet.
> There are probably easier ways too. If you rely on browsers applying
> "shrink-to-fit" width to floated elements by default (and you
probably
> could), you could leave div.imgcaption width unspecified and just set
the
> padding.
If I leave the width unspecified then there's no way to ensure that it
stays within the width of the image.
I've used the table approach before. In many ways it's simpler, but I
was trying to get it accomplished with styles. Someone else suggested
making a container div just for the image caption. I'm going to try that
next.
Jukka, your page on captions is very helpful. I don't seriously expect
you to rewrite it, but one thing that's of great help to us mere mortals
is having examples of When Things Go Wrong. Or trade-offs, so we can see
what happens if we use approach A versus approach B. Yeah, I know: why
don't I write it myself....
--
Skip Knox
Boise State University
[EMAIL PROTECTED]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
