how to put caption on picture

  • Thread starter Thread starter Huck Rorick
  • Start date Start date
H

Huck Rorick

I want to put a caption below a .jpg picture. How can I do that? I'd like
text to flow around the picture and the caption. I can get text to flow
around the picture. I get text to flow around a text box. But I can't find
a way to attach a caption to the picture and have text flow around. Any
help?

Thanks,

Huck
 
Huck said:
I want to put a caption below a .jpg picture. How can I do that? I'd like
text to flow around the picture and the caption. I can get
text to flow around the picture. I get text to flow around a text
box. But I can't find a way to attach a caption to the picture and
have text flow around. Any help?

Thanks,

Huck
Click to expand...

I think I understand what you want.
|----------|
| Picture |
| |
|----------|
|Caption | Text
---------- flows
around here.

If I do, then one way to do it would be to edit the picture in an image
editor, add 20 or so pixels to the depth, add a caption in that space, and
save it back to itself.

Another way may be to place the picture and caption in a cell of a table,
and put the text in an adjacent cell. That wouldn't cause the text to flow
around, e.g. both to the right and the bottom, but you could place it to the
right, the left, the top or the bottom.
 
Thanks Trevor. You understood my objective correctly. I was hoping for a
simpler solution. Editing the image with an image editor would get the
right result but is a bit cumbersome, especially if you decide to change the
caption at times (which I do when I'm drafting something or revising at a
later date).

Using a table also accomplishes the end result but, as you point out, is
quite awkward in flowing the text as this must be hand done each time there
is any change in the text.
 
Huck said:
Thanks Trevor. You understood my objective correctly.
Great

I was hoping for a simpler solution. Editing the image with an image
editor would
get the right result but is a bit cumbersome, especially if you
decide to change the caption at times (which I do when I'm drafting
something or revising at a later date).
Click to expand...

Yes, this thought occurred to me as well. One way of making it a bit easier
is to use .png format. This is available in Microsoft Picture It! which I
use as my major image editor. In this format, both parts - the image and the
caption - can be edited separately.
Using a table also accomplishes the end result but, as you point out,
is quite awkward in flowing the text as this must be hand done each
time there is any change in the text.
Click to expand...

Yes, I couldn't think of a way around this, either. I wonder can others !
 
Yes, I couldn't think of a way around this, either. I wonder can others !
Click to expand...

Or, instead of using adjacent cells in the same table, you could place
the picture and its caption in a separate table and use Float to align
the new table and its contents to right or left. The main text will
then wrap around and underneath the new table. Would that be what you
wanted?

A couple of things to watch when you first insert the new table:

1. It will first appear as a table occupying the full width, with
borders, cell spacing and all. Before you go into Table Properties to
get rid of the borders, type a couple of characters in the new table.
The reason: FrontPage will frustratingly prevent your placing the
cursor in the new table unless it has something in it!

2. When you go into the Table Properties dialog, set the Float to
left or right, then set the table width to the width of the picture
plus any cell padding you will be using.

3. The default value of Float is center. Text will wrap round the
table only when Float is set to right or left. If you have the new
table floated to the middle, a gap will appear in the text, then the
text will resume below the table. The text won't flow round both
sides.

HTH

fido
 
Put the picture and the caption in a <div>, e.g.,

<div><img><p>caption</p></div>

Use CSS to make the image display:block, e.g.,

<img style="display:block;"...>

That will drive the caption to the line below the image. Then use CSS to
make the wrapper div float left/right, e.g.,

<div style="float:left;">...</div>

and I think you are done.
 
This is a neat suggestion and it works pretty well, but it has one wierd
limitation. The text will flow around the table from the start of a
paragraph on. It will wrap around the right side (or left) and around the
bottom. But there does not seem to be anyway that it will wrap around the
top of the table (with the image & caption in it).
See diagrammatic examples below. I can acheive the first type of wrap, but
not the second. Do you know a way around this?

I---------I Text can
I I wrap around
I---------I a table like
this. But not like the
next example.


This is text and it is going
I---------I to wrap
I I around
I---------I the table
on both the top and
the bottom of the
table
 
Thanks Murray. I think this suggestion is a little beyond me as it seems to
require directly using html, which I have not done before. Is there any
other way to accomplish this other than direct html programming?

Huck
 
Is there any other way to accomplish this other than direct html
programming?
Click to expand...

Yes, but it's really SO simple to do, and getting your hands wet is always a
good idea.

Try it on a new page just to start.

1. Insert an image.
2. Add some caption content after it.
3. Go into code view, find the <img> tag, and insert the <div> tag in
front. Then find the ending </p> tag for the content you entered as a
caption, and insert the </div> tag after it.

Now you have an image and the caption wrapped in the <div>.

Then you can edit the tags to add the CSS I recommended.

Once you have that done, try adding some content after it - see how it
wraps?
 
Huck said:
This is a neat suggestion and it works pretty well, but it has one
wierd limitation. The text will flow around the table from the start
of a paragraph on. It will wrap around the right side (or left) and
around the bottom. But there does not seem to be anyway that it will
wrap around the top of the table (with the image & caption in it).
See diagrammatic examples below. I can acheive the first type of
wrap, but not the second. Do you know a way around this?

I---------I Text can
I I wrap around
I---------I a table like
this. But not like the
next example.


This is text and it is going
I---------I to wrap
I I around
I---------I the table
on both the top and
the bottom of the
table
Click to expand...

Hi Huck,
I read Murray's answer and said to myself: "of course". But then, he is more
expert than we :-)) .

Anyway, I think the answer is no, there is no way around it, You can either
float left or right, but not top, left and bottom all in one hit as in our
example. Well , not automatically anyway.

If you can, then maybe an expert can show us the magic needed.
 
If you have / want text above the Image....
Then put the text in first (before the image (<img ) tag.

<p>text before the image</p> (This is text above the image)
<div style="float:left;">
<img style="display:block;" border="0" src="images/Your Pic.jpg"
width="433" height="144">
<p> align="center">Caption</p>
</div>

<p>text around the image and below</p>

I think that is what you are talking about...

bob
| Huck Rorick wrote:
| > This is a neat suggestion and it works pretty well, but it has one
| > wierd limitation. The text will flow around the table from the start
| > of a paragraph on. It will wrap around the right side (or left) and
| > around the bottom. But there does not seem to be anyway that it will
| > wrap around the top of the table (with the image & caption in it).
| > See diagrammatic examples below. I can acheive the first type of
| > wrap, but not the second. Do you know a way around this?
| >
| > I---------I Text can
| > I I wrap around
| > I---------I a table like
| > this. But not like the
| > next example.
| >
| >
| > This is text and it is going
| > I---------I to wrap
| > I I around
| > I---------I the table
| > on both the top and
| > the bottom of the
| > table
|
| Hi Huck,
| I read Murray's answer and said to myself: "of course". But then, he is
more
| expert than we :-)) .
|
| Anyway, I think the answer is no, there is no way around it, You can
either
| float left or right, but not top, left and bottom all in one hit as in our
| example. Well , not automatically anyway.
|
| If you can, then maybe an expert can show us the magic needed.
|
| --
| Cheers,
| Trevor L.
| Website: http://tandcl.homemail.com.au
|
|
 
Bob said:
If you have / want text above the Image....
Then put the text in first (before the image (<img ) tag.

<p>text before the image</p> (This is text above the image)
<div style="float:left;">
<img style="display:block;" border="0" src="images/Your Pic.jpg"
width="433" height="144">
<p> align="center">Caption</p>
</div>

<p>text around the image and below</p>

I think that is what you are talking about...

bob
Click to expand...

Yeah, makes sense, Bob.
There was a small typo and I think you have to give the <div> a height.

This code works
<p>
text before the image<br>
text before the image<br>
</p>
<div style="float:left;" height="240">
<img style="display:block;" border="0"
src="images/04-05-30-168-approaching-dublin.jpg"
width="400" height="200">
<p align="center">Caption</p>
</div>

<p>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
text around the image and below<br>
</p>

But I think Huck doesn't want to have to actually split his text up but just
let it flow.
As I said , this would need some magic, and I don't think it is possible, do
you?

Still, this comes as near as anything ever will :-))
 
No magic!

To flow your text don't use <br>

Try something like this -----

<body>
<p>
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
<div style="float:left;">
<img style="display:block;" border="0" src="images/Your Pic.jpg"
width="433" height="144">
<p align="center">Caption</p>
</div>
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
</p>

</body>

Copy and paste that in a new page and see if that is what you are talking
about?

bob
| Bob wrote:
| > If you have / want text above the Image....
| > Then put the text in first (before the image (<img ) tag.
| >
| > <p>text before the image</p> (This is text above the image)
| > <div style="float:left;">
| > <img style="display:block;" border="0" src="images/Your Pic.jpg"
| > width="433" height="144">
| > <p> align="center">Caption</p>
| > </div>
| >
| > <p>text around the image and below</p>
| >
| > I think that is what you are talking about...
| >
| > bob
|
| Yeah, makes sense, Bob.
| There was a small typo and I think you have to give the <div> a height.
|
| This code works
| <p>
| text before the image<br>
| text before the image<br>
| </p>
| <div style="float:left;" height="240">
| <img style="display:block;" border="0"
| src="images/04-05-30-168-approaching-dublin.jpg"
| width="400" height="200">
| <p align="center">Caption</p>
| </div>
|
| <p>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| </p>
|
| But I think Huck doesn't want to have to actually split his text up but
just
| let it flow.
| As I said , this would need some magic, and I don't think it is possible,
do
| you?
|
| Still, this comes as near as anything ever will :-))
| --
| Cheers,
| Trevor L.
| Website: http://tandcl.homemail.com.au
|
|
 
Though I think this would look better....
I try to insert the image at a paragraph brake so it is aligned with the
text that would describe it.

Try this:

<body>
<p>
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below</p>
<div style="float:right;">
<img style="display:block;" border="0"
src="images/04-05-30-168-approaching-dublin.jpg"width="433" height="144">
<p align="center">Caption</p>
</div><p>
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
</p>

</body>



bob
||
--------------------snip------------------
|
|
 
Bob said:
No magic!

To flow your text don't use <br>
Click to expand...

Bob,
I understand and I don't want to seem to be flogging a dead horse, but with
this setup, you actually have to decide where to split the text between that
above the image and that beside and below it.

That is, where to stop typing the text in the all-embracing <p> (the one
that starts after "<body>") and add the <div>.

It is very small matter (miniscule even) and the OP may not even care.
 
Like I said in the second post I like to insert the Image at a paragraph
brake.

I must not be getting what you mean.....

It's late let me look at this again when I am more awake...

bob
| Bob wrote:
| > No magic!
| >
| > To flow your text don't use <br>
|
| Bob,
| I understand and I don't want to seem to be flogging a dead horse, but
with
| this setup, you actually have to decide where to split the text between
that
| above the image and that beside and below it.
|
| That is, where to stop typing the text in the all-embracing <p> (the one
| that starts after "<body>") and add the <div>.
|
| It is very small matter (miniscule even) and the OP may not even care.
| --
| Cheers,
| Trevor L.
| Website: http://tandcl.homemail.com.au
|
|
 
Bob said:
Like I said in the second post I like to insert the Image at a
paragraph brake.

I must not be getting what you mean.....

It's late let me look at this again when I am more awake...
Click to expand...

Yes, Bob
I am with you. It *does* make sense to manually split the text so that the
text above the picture is a heading and the rest is a more detailed
description.

In any case, I was second guessing what the OP wanted anyway.

BTW,
I think your solution is great. No need to look again tomorrow.

It is what I would use myself in the same situation. In fact I may consider
whether to alter how my pictures are displayed on my website.
 
That's invalid...

--
Murray
============

Bob said:
No magic!

To flow your text don't use <br>

Try something like this -----

<body>
<p>
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
<div style="float:left;">
<img style="display:block;" border="0" src="images/Your Pic.jpg"
width="433" height="144">
<p align="center">Caption</p>
</div>
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
text around the image and below
</p>

</body>

Copy and paste that in a new page and see if that is what you are talking
about?

bob
| Bob wrote:
| > If you have / want text above the Image....
| > Then put the text in first (before the image (<img ) tag.
| >
| > <p>text before the image</p> (This is text above the image)
| > <div style="float:left;">
| > <img style="display:block;" border="0" src="images/Your Pic.jpg"
| > width="433" height="144">
| > <p> align="center">Caption</p>
| > </div>
| >
| > <p>text around the image and below</p>
| >
| > I think that is what you are talking about...
| >
| > bob
|
| Yeah, makes sense, Bob.
| There was a small typo and I think you have to give the <div> a height.
|
| This code works
| <p>
| text before the image<br>
| text before the image<br>
| </p>
| <div style="float:left;" height="240">
| <img style="display:block;" border="0"
| src="images/04-05-30-168-approaching-dublin.jpg"
| width="400" height="200">
| <p align="center">Caption</p>
| </div>
|
| <p>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| text around the image and below<br>
| </p>
|
| But I think Huck doesn't want to have to actually split his text up but
just
| let it flow.
| As I said , this would need some magic, and I don't think it is
possible,
do
| you?
|
| Still, this comes as near as anything ever will :-))
| --
| Cheers,
| Trevor L.
| Website: http://tandcl.homemail.com.au
|
|
Click to expand...
 
It was late
I was tired...
You know what 2 tags to add.. Ha hahaha

Got to go to work,,,

bob
| That's invalid...
|
| --
| Murray
| ============
|
| | > No magic!
| >
| > To flow your text don't use <br>
| >
| > Try something like this -----
| >
| > <body>
| > <p>
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > <div style="float:left;">
| > <img style="display:block;" border="0" src="images/Your Pic.jpg"
| > width="433" height="144">
| > <p align="center">Caption</p>
| > </div>
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > text around the image and below
| > </p>
| >
| > </body>
| >
| > Copy and paste that in a new page and see if that is what you are
talking
| > about?
| >
| > bob
| > | > | Bob wrote:
| > | > If you have / want text above the Image....
| > | > Then put the text in first (before the image (<img ) tag.
| > | >
| > | > <p>text before the image</p> (This is text above the image)
| > | > <div style="float:left;">
| > | > <img style="display:block;" border="0" src="images/Your Pic.jpg"
| > | > width="433" height="144">
| > | > <p> align="center">Caption</p>
| > | > </div>
| > | >
| > | > <p>text around the image and below</p>
| > | >
| > | > I think that is what you are talking about...
| > | >
| > | > bob
| > |
| > | Yeah, makes sense, Bob.
| > | There was a small typo and I think you have to give the <div> a
height.
| > |
| > | This code works
| > | <p>
| > | text before the image<br>
| > | text before the image<br>
| > | </p>
| > | <div style="float:left;" height="240">
| > | <img style="display:block;" border="0"
| > | src="images/04-05-30-168-approaching-dublin.jpg"
| > | width="400" height="200">
| > | <p align="center">Caption</p>
| > | </div>
| > |
| > | <p>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | text around the image and below<br>
| > | </p>
| > |
| > | But I think Huck doesn't want to have to actually split his text up
but
| > just
| > | let it flow.
| > | As I said , this would need some magic, and I don't think it is
| > possible,
| > do
| > | you?
| > |
| > | Still, this comes as near as anything ever will :-))
| > | --
| > | Cheers,
| > | Trevor L.
| > | Website: http://tandcl.homemail.com.au
| > |
| > |
| >
| >
|
|
 
See:
http://www.ecom-data.com/Examples/Help/Tables.htm

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================
 
Back
Top