473,385 Members | 1,707 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,385 software developers and data experts.

Align Text to Block

Hello, I have a question about text positioning in a table field.

In particular, I want to create a template which works with images
of unknown size.

There is a <table> field, in which I need to put:

* a <div> supplied to the template, that contains an image of unknown
size (this needs to be centered horizontally)
* a caption supplied to the template to put below the image
(_left_aligned_ with the image).

The field width (enforced by the rest of the table) may be larger than
the image, so a simple

<div ...>IMAGE
<div style="text-align:left;">caption</div>
</div>

won't work, as it will look like this:

+-------------------+ fig. 1
| +---------+ |
| | image | |
| | | |
| +---------+ |
|caption |
+-------------------+

and I want it like this:

+-------------------+ fig. 2
| +---------+ |
| | image | |
| | | |
| +---------+ |
| caption |
+-------------------+

Any ideas would be greatly appreciated!

TIA,
Stanislav

PS: code for fig. 1:

<table style="border: 1px solid;">
<tr><td style="text-align: center;">
<div style="background:lightgreen;">
<div><img style="border: 2px solid;" src="..." alt="IMAGE IS HERE"/></div>
<div style="text-align: left">caption</div>
</div>
</td></tr>
<tr><td>other field that makes table wide, quite wide in fact.</td></tr>
</table>
Jul 20 '05 #1
3 2671
I wrote:
Hello, I have a question about text positioning in a table field.

[...]

.... no answers, no flames :-). I'm going to reword my question in the
hope that it will be quicker to follow.

I'm looking for a way to align a caption to it's image. The image is
centered, the caption below should be left-aligned with the image.

Monospace illustration follows:

+-------------------+
| +---------+ |
| |~image~~~| |
| |~~~~~~~~~| |
| +---------+ |
| caption |
+-------------------+

We're in a table field, but that shouldn't matter.
Tricky part: we don't know the size of the image.

Anyone?

cheers,

--
Stanislav Traykov http://home.in.tum.de/~traykovs/
Jul 20 '05 #2
On Sat, 28 Aug 2004 22:42:56 +0000 (UTC), Stanislav Traykov
<ne**@tortoises.org> wrote:
I wrote:
Hello, I have a question about text positioning in a table field.

[...]

... no answers, no flames :-). I'm going to reword my question in the
hope that it will be quicker to follow.

I'm looking for a way to align a caption to it's image. The image is
centered, the caption below should be left-aligned with the image.

Monospace illustration follows:

+-------------------+
| +---------+ |
| |~image~~~| |
| |~~~~~~~~~| |
| +---------+ |
| caption |
+-------------------+

We're in a table field, but that shouldn't matter.
Tricky part: we don't know the size of the image.

If you're combining text and images, you more or less have to make some
sort of assumption about sizes. I don't know any layout that will look
good with a 100px image with a 100-word caption, and also look good with
a 600px image and a one-word caption.

Personally I would approach it as follows (though neither does what you
ask):

- if the caption is normally multiline: left align it within the table
cell and centre the image within the table cell;

- if the caption is normally shorter than the image: centre both the
image and caption within the cell.

If it is for some reason vitally important to do what you ask, I don't
see an alternative to using server-side processing to calculate and
insert a box-width at the moment the image size becomes known; something
like: width: 15em; min-width: 180px; (untested)

(and then work out how to get it looking reasonable in Internet
Explorer, which still doesn't support min-width ...)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #3
Stephen Poley <sb******************@xs4all.nl> wrote:
On Sat, 28 Aug 2004 22:42:56 +0000 (UTC), Stanislav Traykov
<ne**@tortoises.org> wrote:
+-------------------+
| +---------+ |
| |~image~~~| |
| |~~~~~~~~~| |
| +---------+ |
| caption |
+-------------------+

Personally I would approach it as follows (though neither does what you
ask): [1.] if the caption is normally multiline: left align it within the table
cell and centre the image within the table cell; [2.] if the caption is normally shorter than the image: centre both the
image and caption within the cell. If it is for some reason vitally important to do what you ask, I don't
see an alternative to using server-side processing [...]


#2 (center both) is what I currently do, but that is incompatible
with the site's convention for placing image lables. Server side
processing to obtain image width is impossible for various reasons. I
guess I will have to resort to a table for layout. (Pray for my soul
;-)

--
Stanislav Traykov http://home.in.tum.de/~traykovs/
Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Mikko Rantalainen | last post by:
See example at <URL:http://www.cc.jyu.fi/~mira/moz/formtest.php>. The problem is that the label of submit button is always centered on the button regardsless of 'text-align' property in CSS....
7
by: Robert Nicholson | last post by:
So I've got one page where I have an image inside a DIV with text-align: center and the image is correctly centered in that block. Making me think that text-align will center the contents of a...
10
by: Markus Ernst | last post by:
Hi I have a strange problem with vertical-align. The case can be viewed at http://www.brainput.info/geschichte.html. HTML code: <div id="bild"><img src="geschichte.gif" width="274"...
0
by: smr78 | last post by:
Hi, Up to now, I didn't find a solution to align text in the middle of a inline neither block box in the vertical direction. That's because the vertical-align property is not active for many...
3
by: smitb | last post by:
Hi, I am a CSS/HTML novice. Can anyone please answer my question. I am trying to insert a small image(an arrow) within an <li> tag. My problem is that I cannot right align the image. Here is...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.