captioning images

[Jeff Thies]

I'd like to place a "caption" under an image and insert both into the flow
of text.

I'm thinking of something like this:

(Styles shown inline for readability, they would be defined as classes)

<div style="float: left; padding: 10px"><img src="some_image.jpg"><div>my
caption/credit</div></div>
<p> enough content to flow around the image....</p>

Perhaps the image container should have a margin set rather than padding,
but padding doesn't break badly in old broken browsers like NS4.

Seems like there should be a better way to do this. This is such basic
stuff!

What about inserting the image (and caption) into the flow of the paragraph?
Aren't block level elements not allowed in paragraphs?

What's the level of support for <object data="some_image_path"
type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores the image and
my Opera 7 and NS7.1 both ignore any text following the object. Haven't
checked Mac. But that doesn't seem right. I used the example here:
<http://www.w3.org/TR/html4/struct/objects.html>

And, no, I don't want to add the "caption" with photoshop!

I wasn't quite sure where to post this, I hope 3 groups isn't overkill!

Jeff

 

[Beauregard T. Shagnasty]

Quoth the raven named Jeff Thies:

I'd like to place a "caption" under an image and insert both into the flow
of text.

I'm thinking of something like this:

(Styles shown inline for readability, they would be defined as classes)

<div style="float: left; padding: 10px"><img src="some_image.jpg"><div>my
caption/credit</div></div>
<p> enough content to flow around the image....</p>

Here's what I use.

..imgleft, .imgright {
float: right;
font-size: 90%;
font-style: italic;
padding: 1em;
position: relative;
text-align: center;
}
..imgleft {
float: left;
}
..imgright {
float: right;
}


<p>Blah blah blah blah blah blah blah blah blah blah blah
<span class="imgright">
<img src="../pathto/image.jpg" alt="Appropriate text" width="nnn"
height="nnn" /><br>This is Caption
</span>
blah blah blah blah blah blah blah blah blah blah </p>

I wasn't quite sure where to post this, I hope 3 groups isn't overkill!

The stylesheet group would have been enough, I suppose.

 

[Jeff Thies]

Here's what I use.

.imgleft, .imgright {
float: right;
font-size: 90%;
font-style: italic;
padding: 1em;
position: relative;

Well that was easy enough! Why the position: relative?

Jeff

 

[Chet]

| I'd like to place a "caption" under an image and insert both
into the flow
| of text.
|
| I'm thinking of something like this:
|
| (Styles shown inline for readability, they would be defined as
classes)
|
| <div style="float: left; padding: 10px"><img
src="some_image.jpg"><div>my
| caption/credit</div></div>
| <p> enough content to flow around the image....</p>
|
| Perhaps the image container should have a margin set rather
than padding,
| but padding doesn't break badly in old broken browsers like
NS4.
|
| Seems like there should be a better way to do this. This is
such basic
| stuff!
|
| What about inserting the image (and caption) into the flow of
the paragraph?
| Aren't block level elements not allowed in paragraphs?
|
| What's the level of support for <object data="some_image_path"
| type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores
the image and
| my Opera 7 and NS7.1 both ignore any text following the object.
Haven't
| checked Mac. But that doesn't seem right. I used the example
here:
| <http://www.w3.org/TR/html4/struct/objects.html>
|
| And, no, I don't want to add the "caption" with photoshop!
|
| I wasn't quite sure where to post this, I hope 3 groups isn't
overkill!
|
| Jeff
|

Jeff,

Why don't you just place a <br> between the image and caption and
get rid of the caption div? It worked for me on a sample I did.
It also validates strict 4.01 and looks ok in my browsers (IE6,
NN7.1, Moz1.4, & Opera 7.11).

http://webpages.charter.net/rwtest/stuff/image_caption.htm

hth

 

[Jeff Thies]

| I'd like to place a "caption" under an image and insert both

into the flow
| of text.
|
| I'm thinking of something like this:
|
| (Styles shown inline for readability, they would be defined as
classes)
|
| <div style="float: left; padding: 10px"><img
src="some_image.jpg"><div>my
| caption/credit</div></div>
| <p> enough content to flow around the image....</p>
|
| Perhaps the image container should have a margin set rather
than padding,
| but padding doesn't break badly in old broken browsers like
NS4.
|
| Seems like there should be a better way to do this. This is
such basic
| stuff!
|
| What about inserting the image (and caption) into the flow of
the paragraph?
| Aren't block level elements not allowed in paragraphs?
|
| What's the level of support for <object data="some_image_path"
| type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores
the image and
| my Opera 7 and NS7.1 both ignore any text following the object.
Haven't
| checked Mac. But that doesn't seem right. I used the example
here:
| <http://www.w3.org/TR/html4/struct/objects.html>
|
| And, no, I don't want to add the "caption" with photoshop!
|
| I wasn't quite sure where to post this, I hope 3 groups isn't
overkill!
|
| Jeff
|

Jeff,

Why don't you just place a <br> between the image and caption and
get rid of the caption div? It worked for me on a sample I did.
It also validates strict 4.01 and looks ok in my browsers (IE6,
NN7.1, Moz1.4, & Opera 7.11).

Thanks Chet. I think I did that so I could set the margin between the image
the caption. But thinking of that now, I realize I can just set the margin
on the image!

Cheers,
Jeff

 

[Leif K-Brooks]

What's the level of support for <object data="some_image_path"
type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores the image and
my Opera 7 and NS7.1 both ignore any text following the object. Haven't
checked Mac. But that doesn't seem right. I used the example here:
<http://www.w3.org/TR/html4/struct/objects.html>

You need to end your object element, text inside it is treated something
like the alt attribute of the image element. For instance:
<object data="foo.jpg" type="image/jpeg">Alternate
text</object>Following text

 

[Toby A Inkster]

I'd like to place a "caption" under an image and insert both into the flow
of text.

<div style="float: left; padding: 10px"><img
src="some_image.jpg"><div>my caption/credit</div></div>
<p> enough content to flow around the image....</p>

That's more or less what I'd do. You probably want to set a width on the

What about inserting the image (and caption) into the flow of the
paragraph? Aren't block level elements not allowed in paragraphs?

What's the level of support for <object data="some_image_path"
type="image/jpg"> ? (or is that jpeg).

Good in most browsers, bad in IE/Win.

And yes, it should be 'image/jpeg'. The list of all registered media types
is here: http://www.iana.org/assignments/media-types/

My IE5 (win 98) ignores the image and

.... see!

my Opera 7 and NS7.1 both ignore any text following the
object.

And so they should. The <object> element works like this:

<object data="blah" type="foo/bar">
<p>This stuff is only displayed if the object can't be loaded.</p>
</object>

 

[Lauri Raittila]

Jeff,

Why don't you just place a <br> between the image and caption and
get rid of the caption div? It worked for me on a sample I did.
It also validates strict 4.01 and looks ok in my browsers (IE6,
NN7.1, Moz1.4, & Opera 7.11).

http://webpages.charter.net/rwtest/stuff/image_caption.htm

And if you want to change it later so that image is centered and caption
left-aligned?

 

[Chet]

|
| And if you want to change it later so that image is centered
and caption
| left-aligned?
|
| --
| Lauri Raittila <http://www.iki.fi/lr>
<http://www.iki.fi/zwak/fonts>
| Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on
yksityinen
| tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
|

Lauri,

I updated my sample with the captions aligned center, left and
right for you.

http://webpages.charter.net/rwtest/stuff/image_caption.htm

hth

 

[Lauri Raittila]

Lauri:

Chet:

I updated my sample with the captions aligned center, left and
right for you.

http://webpages.charter.net/rwtest/stuff/image_caption.htm

And did you use <br> between image and caption?
</question class="rhetorical">

 

[Chet]

| Chet wrote:
|
| > > > Why don't you just place a <br> between the image and
caption and
| > > > get rid of the caption div?
|
| Lauri:
|
| > > And if you want to change it later so that image is
centered and caption
| > > left-aligned?
|
| Chet:
|
| > I updated my sample with the captions aligned center, left
and
| > right for you.
| >
| > http://webpages.charter.net/rwtest/stuff/image_caption.htm
|
| And did you use <br> between image and caption?
| </question class="rhetorical">
|
| --
| Lauri Raittila <http://www.iki.fi/lr>
<http://www.iki.fi/zwak/fonts>
| Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on
yksityinen
| tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
|

In the sample as it is now, No, I didn't use the <br>. When I
first posted it with the captions centered, yes I did.

Chet

 

[Jeff Thies]

| Chet wrote:
|
| > > > Why don't you just place a <br> between the image and
caption and
| > > > get rid of the caption div?
|
| Lauri:
|
| > > And if you want to change it later so that image is
centered and caption
| > > left-aligned?
|
| Chet:
|
| > I updated my sample with the captions aligned center, left
and
| > right for you.
| >
| > http://webpages.charter.net/rwtest/stuff/image_caption.htm
|
| And did you use <br> between image and caption?
| </question class="rhetorical">
|
| --
| Lauri Raittila <http://www.iki.fi/lr>
<http://www.iki.fi/zwak/fonts>
| Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on
yksityinen
| tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
|

In the sample as it is now, No, I didn't use the <br>. When I
first posted it with the captions centered, yes I did.

I rather like the idea of the caption in the paragraph. Perhaps
syntactically more meaningfull than a div.

I also like Beauregard's idea of a floated span so that it can be embedded
anywhere inside the paragraph (good for multiple images in long paragraphs).
I had thought of floating an inline element, but I guess images are inline
and they can be floated.

Cheers,
Jeff

 

[Blinky the Shark]

.imgleft, .imgright {
float: right;
font-size: 90%;
font-style: italic;
padding: 1em;
position: relative;
text-align: center;
}
.imgleft {
float: left;
}
.imgright {
float: right;
}

Trying to understand this kind of styling...

Since you first specify float: right for both classes, is it necessary
to respecify it, below, for .imgright, again, or could you just specify the
"exception" -- the left float for .imgleft.

Separate question: with both left and right floats specified per class,
below, could float be left out of the joint specification, above?

(The way you have it is more clear for human viewers, I'd say -- so I'm
wondering if that's why you did it that way, rather than it being
technically necessary.)

 

[Beauregard T. Shagnasty]

Quoth the raven named Blinky the Shark:

Trying to understand this kind of styling...

Me too...

Since you first specify float: right for both classes, is it necessary
to respecify it, below, for .imgright, again, or could you just specify the
"exception" -- the left float for .imgleft.

Separate question: with both left and right floats specified per class,
below, could float be left out of the joint specification, above?

Yes, either way. I've cleaned that up since. You don't need the first
float and use both separate floats, or keep the first and eliminate
the imgright { float: right; } The position: relative isn't needed,
either.

(The way you have it is more clear for human viewers, I'd say -- so I'm
wondering if that's why you did it that way, rather than it being
technically necessary.)

Thanks for pointing that out so others don't necessarily bloat their
float.