Text with automated line-breaks for a picture

[Herbert Gerstinger]

Hi,

I've got a problem that looks trivial but is quite tricky:

I have several pictures with different widths with corresponding describing
texts with different lengths.

The question is, how do I display this text under the picture, so that:

- it's centered under the picture
- the text does never, ever take more width than the picture
- the line-breaks are added automatically

Of course the most straightforward thing to do would be

<div>
<img src="pic.jpg">
<br><div align=center>My very long text</div>
</div>

or simply

<div align=center>
<img src="pic.jpg">
<br>My very long text
</div>

The problem is that the text is not broken (at least not in the browsers I
have tested) and the whole text is just displayed in a single line.

 

[Neredbojias]

With neither quill nor qualm, Herbert Gerstinger quothed:

Hi,

I've got a problem that looks trivial but is quite tricky:

I have several pictures with different widths with corresponding describing
texts with different lengths.

The question is, how do I display this text under the picture, so that:

- it's centered under the picture
- the text does never, ever take more width than the picture
- the line-breaks are added automatically

Of course the most straightforward thing to do would be

<div>
<img src="pic.jpg">
<br><div align=center>My very long text</div>
</div>

or simply

<div align=center>
<img src="pic.jpg">
<br>My very long text
</div>

The problem is that the text is not broken (at least not in the browsers I
have tested) and the whole text is just displayed in a single line.

You must set a width for the div.

 

[Toby Inkster]

<div align=center>
<img src="pic.jpg">
<br>My very long text
</div>

<div class=picturediv style=width:200px>
<img src=my_picture.jpeg alt='My Picture' width=200
height=160>
<p>This is a caption for the picture above.
</div>

 

[Jedi Fans]

<div class=picturediv style=width:200px>
<img src=my_picture.jpeg alt='My Picture' width=200
height=160>
<p>This is a caption for the picture above.
</div>

in proper html this would be:
<div class="picturediv" style="width:200px;">
<img src="my_picture.jpeg" alt="My Picture" width="200" height="160">
<p>This is a caption for the picture above.</p>
</div>

 

[Barbara de Zoete]

in proper html this would be:
<div class="picturediv" style="width:200px;">
<img src="my_picture.jpeg" alt="My Picture" width="200" height="160">
<p>This is a caption for the picture above.</p>
</div>

That all depends on which DTD you use for your html document. With transitional
the "" are not needed, neither is the close tag for the paragraph element.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Herbert Gerstinger]

You must set a width for the div.

I tried that too. Works only when some other thing competes for horizontal
space. (For example a text beside the picture)

If the picture stands alone, the text underneath is still not broken.

 

[Herbert Gerstinger]

<div class=picturediv style=width:200px>
<img src=my_picture.jpeg alt='My Picture' width=200
height=160>
<p>This is a caption for the picture above.
</div>

As I said in the other comment, that doesn't work either. (I tried width:
0px)

It only works when something competes for space (like some text beside the
picture)

If the picture stands alone, the width is ignored (at least with Mozilla and
Konqueror) and the text still has just one single line.

 

[Greg N.]

in proper html this would be:
<div class="picturediv" style="width:200px;">
<img src="my_picture.jpeg" alt="My Picture" width="200" height="160">
<p>This is a caption for the picture above.</p>
</div>

I think the quotes are only needed around strings with non-alphanumeric
stuff. Iirc, this passes as strict:

 

[Safalra]

As I said in the other comment, that doesn't work either. (I tried width:
0px). It only works when something competes for space (like some text
beside the picture). If the picture stands alone, the width is ignored
(at least with Mozilla and Konqueror) and the text still has just one
single line.

Are the pictures appearing side-by-side or in a column? If it's the
former you can float all the <div>s to one side and clear whatever
comes afterwards (giving the necessary 'competition for space'). Note
that this will look strange if the images are different heights - in
this case wrap each <img> in another <div> whose height is set to the
height of the highest image - this way the captions for all the images
will line up.

 

[Benjamin Niemann]

That all depends on which DTD you use for your html document. With
transitional the "" are not needed,

This has nothing to do with strict vs. transitional. You can always omit the
quotes around attribute values (in HTML not XHTML), if the value only
contains characters a..z, A..Z, 0..9, and -_.:
See http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2

neither is the close tag for the paragraph element.

Which is true for HTML 4.01 strict, too.

Are you confusing HTML strict with XHTML?

 

[Barbara de Zoete]

This has nothing to do with strict vs. transitional. You can always omit the
quotes around attribute values (in HTML not XHTML), if the value only
contains characters a..z, A..Z, 0..9, and -_.:
See http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2


Which is true for HTML 4.01 strict, too.

Are you confusing HTML strict with XHTML?

No, I'm not. It was only an example. Not a comparison.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[cwdjrxyz]

Hi,

I've got a problem that looks trivial but is quite tricky:

I have several pictures with different widths with corresponding describing
texts with different lengths.

The question is, how do I display this text under the picture, so that:

- it's centered under the picture
- the text does never, ever take more width than the picture
- the line-breaks are added automatically

Of course the most straightforward thing to do would be

<div>
<img src="pic.jpg">
<br><div align=center>My very long text</div>
</div>

or simply

<div align=center>
<img src="pic.jpg">
<br>My very long text
</div>

The problem is that the text is not broken (at least not in the browsers I
have tested) and the whole text is just displayed in a single line.

I usually handle this type of problem using an image tool such as
PaintShop. It is very fast to add descriptive text in any style and
position you wish in relation to the image. When satisfied, you output
the composite image-text in the size and image format that you wish.
Then when you want to use a labeled image again, you just have to use
the composite labeled image you created. This can save much time,
especially if you have a complicated page and if you want to use the
images on pages in the future.

 

[Greg N.]

I tried that too. Works only when some other thing competes for horizontal
space. (For example a text beside the picture)
If the picture stands alone, the text underneath is still not broken.

Maybe you had a typo somewhere. It works for me, with Firefox and IE.
See this sample:

http://coolhaus.de/misc/line-brk.htm

This is the html:
-------------------------------------------------
<html>
<body>
<p>
<div style="text-align: center;">
<div style="width:298px; margin-left:auto; margin-right:auto;">
<img src="http://coolhaus.de/misc/troll1.jpg" alt="My Picture" width=346
height=418>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos.
</div>
</div>
</html>

 

[Greg N.]

This is the html:
-------------------------------------------------
<html>
<body>
<p>
<div style="text-align: center;">
<div style="width:298px; margin-left:auto; margin-right:auto;">
<img src="http://coolhaus.de/misc/troll1.jpg" alt="My Picture" width=346
height=418>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos.
</div>
</div>
</html>
---------------------------------------------------

There is a minor error there, the line
<div style="width:298px; margin-left:auto; margin-right:auto;">
should read:
<div style="width:346px; margin-left:auto; margin-right:auto;">

 

[Toby Inkster]

in proper html this would be:
<div class="picturediv" style="width:200px;">
<img src="my_picture.jpeg" alt="My Picture" width="200" height="160">
<p>This is a caption for the picture above.</p>
</div>

Excuse me? Mine was very proper HTML 4.01 Strict.
http://validator.w3.org/check?uri=http://examples.tobyinkster.co.uk/proof

 

[Toby Inkster]

As I said in the other comment, that doesn't work either. (I tried width:
0px)

Should work, but quirks mode may break things in IE. What DOCTYPE are you
using?

 

[Jedi Fans]

Excuse me? Mine was very proper HTML 4.01 Strict.
http://validator.w3.org/check?uri=http://examples.tobyinkster.co.uk/proof

style=width:200px would choke quite a few browsers

 

[Herbert Gerstinger]

Should work, but quirks mode may break things in IE. What DOCTYPE are you
using?

HTML4

 

[Herbert Gerstinger]

There is a minor error there, the line
<div style="width:298px; margin-left:auto; margin-right:auto;">
should read:
<div style="width:346px; margin-left:auto; margin-right:auto;">

This works, but only when you know the width in advance :-(

 

[Barbara de Zoete]

style=width:200px would choke quite a few browsers

That has to do with the browser. Not with the html code.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'