Sentance or Caption Under Picture

[forex10]

Hello,
I have never had any trouble making web pages & overcoming a few html
challenges along the way. But I cannot figure out how to center a
sentance or title under a picture. Do I need to use <caption> within
the <table> tag? Thanks.

Joe L.

 

[Chris F.A. Johnson]

Hello,
I have never had any trouble making web pages & overcoming a few html
challenges along the way. But I cannot figure out how to center a
sentance or title under a picture. Do I need to use <caption> within
the <table> tag? Thanks.

Style the image as a block:

<http://cfaj.freeshell.org/testing/alpha.html>

 

[dorayme]

Hello,
I have never had any trouble making web pages & overcoming a few html
challenges along the way. But I cannot figure out how to center a
sentance or title under a picture. Do I need to use <caption> within
the <table> tag? Thanks.

Joe L.

Try

<td style="text-align:center"><img ....><br>caption</td>

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Hello,
I have never had any trouble making web pages & overcoming a few html
challenges along the way. But I cannot figure out how to center a
sentance or title under a picture. Do I need to use <caption> within
the <table> tag? Thanks.

Joe L.

No. Using a table for that is misusing table: it's bad semantic.

My recommendation:
<p style="text-align: center;"><img src="..." width="..." height="..."
alt="..."><br>Your sentence... </p>

For 2 examples:

http://www.mozilla.org/rhino/scriptjava.html#liveconnect

http://www.mozilla.org/rhino/scopes.html#namelookup

More info:
Interactive demo on CSS horizontal alignment and horizontal formating
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html

Gérard

 

[Jim Moe]

My recommendation:
<p style="text-align: center;"><img src="..." width="..." height="..."
alt="..."><br>Your sentence... </p>

For the caption to center properly the <p> must be given the same width
as the <img>.

 

[dorayme]

No. Using a table for that is misusing table: it's bad semantic.

And what information about the OP are you privy to?

<table>
<tr>
<td>Example of an image in table cell and caption default
aligned</td>
<td><img...><br>Caption</td></tr>
<td>Example of an image in table cell and caption centred</td>
<td style="text-align:center"><img...><br>Caption</td>
</tr>
</table>

Or a list of products or any number of other tabular data uses.

Why rush to High Priest spiel so fast?

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Chris F.A. Johnson wrote :

Style the image as a block:

<http://cfaj.freeshell.org/testing/alpha.html>

I disagree. An image is an inline element, just like text nodes. So,
best is to simply use text-align for aligning inline elements.

Centring using CSS: inline content
http://dorward.me.uk/www/centre/#inline

"text-align describes how inline content of a block is aligned."
http://www.w3.org/TR/2006/WD-CSS21-20060411/text.html#propdef-text-align
also
http://www.w3.org/TR/REC-CSS1#text-align

Using Web Standards in your Web Pages
http://developer.mozilla.org/en/doc...deprecated_elements_and_deprecated_attributes

Gérard

 

[dorayme]

For the caption to center properly the <p> must be given the same width
as the <img>.

Assuming the OP should not use a table setting:

A paragraph may not be the right way to go if it is not a
paragraph in the first place and just styled to get the text
aligned under the pic. A div could be one way to go, your point
being still good then, width needs setting. Other way to go:

<div style="width: 200px;"><img style="width:
200px;..."><br>Caption</div>

To <p> just the caption would be somewhat overkill, it is hardly
a paragraph anyway.

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

But I cannot figure out how to center a
sentance or title under a picture. Do I need to use <caption> within
the <table> tag?

You don't need to, but it's one possibility. Another possibility is to wrap
the image and the caption text inside a <div> element, making the caption
text an inner <div>, and then you set text-align: center in CSS or
align="center" in HTML for either the outer <div> element or the inner one,
depending on how you want the picture to appear.

There are actually "too many" alternatives to choose from, see
http://www.cs.tut.fi/~jkorpela/www/captions.html

 

[Neredbojias]

To further the education of mankind, (e-mail address removed) vouchsafed:

Hello,
I have never had any trouble making web pages & overcoming a few html
challenges along the way. But I cannot figure out how to center a
sentance or title under a picture. Do I need to use <caption> within
the <table> tag? Thanks.

Joe L.

Most of the replies I've read suggest using some kind of block element or
other, inserting both image and caption therein. The disadvantage to that,
of course, is the pics cannot then be displayed inline with "normal" flow.

Here's a link to a page I did about a year-and-a-half ago which does what
you want. It's not perfect, -there's a peculiarity with Opera, I think,
and it uses tables-, but it works:

http://www.neredbojias.com/alpha/ffem.html

 

[Joe (GKF)]

To further the education of mankind, (e-mail address removed) vouchsafed:

Here's a link to a page I did about a year-and-a-half ago which does what
you want. It's not perfect, ... and it uses tables-, but it works:

http://www.neredbojias.com/alpha/ffem.html

Here's an old one of mine which doesn't use tables. I think it works
everywhere.
http://graspages.cjb.cc/0gkf06/pics5.php

 

[Neredbojias]

Here's an old one of mine which doesn't use tables. I think it works
everywhere.
http://graspages.cjb.cc/0gkf06/pics5.php

Gotta be floated divs... I do something similar for my home-menu page.
Lookin' good.

(PS: You have some minor validation errors which are an easy fix.)

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Jim Moe wrote :

For the caption to center properly the <p> must be given the same width
as the <img>.

What do you mean by "properly"?

Imagine this:


x

y


The "x" character is centered and the "y" character is centered too.
They just happened to be centered in 2 paragraph blocks which have a
specific width.
In my example, the width was not defined or, if you prefer, the width
was "auto". So, it was using as much as its container width was
providing. That's a lot more useful than setting the width of a
paragraph block.

Gérard

 

[Moses]

http://0a26f4915c0e88b0f5df1593a37d8ff7-t.ghoiou0.info <a
href="http://0a26f4915c0e88b0f5df1593a37d8ff7-h.ghoiou0.info">0a26f4915c0e88b0f5df1593a37d8ff7</a>
http://0a26f4915c0e88b0f5df1593a37d8ff7-b1.ghoiou0.info
0a26f4915c0e88b0f5df1593a37d8ff7
http://0a26f4915c0e88b0f5df1593a37d8ff7-b3.ghoiou0.info
196c3da0ce3e9a23267e7eab02ad2b11