«

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.

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.

--
Neredbojias
Contrary to popular belief, it is believable.

Herbert Gerstinger wrote:

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Toby Inkster wrote:
> Herbert Gerstinger wrote:
>
>> <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>
>
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>

--
Hope This Helped and MTFBWY...
Kieren aka JediFans - <URL:http://jedifans.com/>
The Force Is With Me, SuSE Linux Professional 9.3, Mozilla Firefox
1.0.6, Mozilla Thunderbird 1.5 Alpha 2 and Revenge Of The Sith!

On Mon, 08 Aug 2005 09:56:20 +0100, Jedi Fans <"news[at]jedifans[-=dot=-]com">
wrote:

> Toby Inkster wrote:
>> <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>
>

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 |
`-------------------------------------------------- --<--@ ------------'

Neredbojias wrote:

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

Toby Inkster wrote:

> Herbert Gerstinger wrote:
>
>> <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>

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.

Jedi Fans wrote:
> Toby Inkster wrote:
>
>> Herbert Gerstinger wrote:
>>
>>> <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>
>>
> 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:

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

--
Gregor's Motorradreisen:
http://hothaus.de/greg-tour/

Herbert Gerstinger wrote:
> Toby Inkster wrote:
> > Herbert Gerstinger wrote:
> >> <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>
>
> 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.

--
Safalra (Stephen Morley)
http://www.safalra.com/hypertext/

Barbara de Zoete wrote:

> On Mon, 08 Aug 2005 09:56:20 +0100, Jedi Fans
> <"news[at]jedifans[-=dot=-]com"> wrote:
>
>> Toby Inkster wrote:
>>> <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>
>>
>
> 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?

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/