By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

captioning images

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
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>

<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.
Jul 20 '05 #2

P: n/a
>
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="Appropriate 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.

Jul 20 '05 #3

P: n/a

"Jeff Thies" <no****@nospam.net> wrote in message
news:XU*****************@newsread1.news.atl.earthl ink.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_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/s...ge_caption.htm

hth
--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)
Jul 20 '05 #4

P: n/a
> | 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

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

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

Jul 20 '05 #5

P: n/a
Jeff Thies wrote:
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
Jul 20 '05 #6

P: n/a
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_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>

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

Jul 20 '05 #7

P: n/a
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.

Jul 20 '05 #8

P: n/a

"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******@NOcharterSPAM.net (remove NO.....SPAM)
Jul 20 '05 #9

P: n/a
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="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.

Jul 20 '05 #10

P: n/a

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.cis.dfn.de...
| 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="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
Jul 20 '05 #11

P: n/a

"Chet" <ng******@NOcharterSPAM.net> wrote in message
news:10*************@corp.supernews.com...

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

Chet

Jul 20 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.