473,324 Members | 2,581 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

captioning images

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
11 1761
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
>
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

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

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

"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

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Wayne | last post by:
I have a script that uses filesystemobject that reads files from a given path, in my case images. It is running on a server that is 2000 adv svr w/ all current patches. The script prior to some...
11
by: Jeff Thies | last post by:
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)...
3
by: Wraith Daquell | last post by:
Hello all! I'm trying (read: becoming frustrated) to write a DVD viewer in VB.NET. I can embed the DVD picture using DirectX technology, but it seems to be impossible to obtain closed captioning...
3
by: Simon | last post by:
This problem has been driving me mad for months.... Seen a few posts on forums about it but no answers... No mention on MSDN etc. XP Pro SP1, VS.NET (c#) .Net framework 1.1, IIS 5.1. In a...
2
by: Clancy | last post by:
Hello to all. I just finished my first web development class so now I have a little knowledge and could be considered dangerous. I have no real clue on how to make this idea work but it sure...
4
toxicpaint
by: toxicpaint | last post by:
Hi, can anyone give me a hand. I'm currently displaying 4 random images at the top of a page. I did this using an array of 35 pictures and then writing them to page. The problem I have is that in...
0
by: PulkitZery | last post by:
Hi all, I have a question about windows media encoder (WME) closed captioning. Does WME maintains the Line-21 closed captioning? In other words, does windows media encoder pulls closed captioning...
3
by: PulkitZery | last post by:
Hi All, I am trying to get the Closed Captioning (if available) from the Windows media player and display it in my little dialog box. Can some one give me an example or point me to any...
5
by: remon87 | last post by:
I need some help. I have javasript that creates the submenu but it works if I have a text with css. I need it to do the same with a roll over images. so when I click on the image the submenu...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.