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_imag e_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="Appropriat e text" width="nnn"
height="nnn" /><br>This is Caption
</span>
blah blah blah blah blah blah blah blah blah blah </p>

<snip>
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.

--
-bts
-This space intentionally left blank.

[Jeff Thies]

>

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

<snip>
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

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="Appropriat e text" width="nnn"
height="nnn" /><br>This is Caption
</span>
blah blah blah blah blah blah blah blah blah blah </p>

<snip>

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.

--
-bts
-This space intentionally left blank.

[Chet]

"Jeff Thies" <no****@nospam. net> wrote in message
news:XU******** *********@newsr ead1.news.atl.e arthlink.net...
| 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_imag e_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/s...ge_caption.htm

hth
--
Chet
ng******@NOchar terSPAM.net (remove NO.....SPAM)

[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_imag e_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

http://webpages.charter.net/rwtest/s...ge_caption.htm

hth
--
Chet
ng******@NOchar terSPAM.net (remove NO.....SPAM)

[Leif K-Brooks]

Jeff Thies wrote:

What's the level of support for <object data="some_imag e_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>Followin g text

[Toby A Inkster]

Jeff Thies wrote:

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
<div> though.
What about inserting the image (and caption) into the flow of the
paragraph? Aren't block level elements not allowed in paragraphs?
You can set 'display:inline-block' on the <div>, but AFAIK that only works
in Opera.
What's the level of support for <object data="some_imag e_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>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

[Lauri Raittila]

In article Chet wrote:

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/s...ge_caption.htm

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.

[Chet]

"Lauri Raittila" <la***@raittila .cjb.net> wrote in message
news:MP******** *************** *@news.cis.dfn. de...
|
| 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/s...ge_caption.htm

hth
--
Chet
ng******@NOchar terSPAM.net (remove NO.....SPAM)

[Lauri Raittila]

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/s...ge_caption.htm

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

--
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.