Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Text with automated line-breaks for a picture

Reply
Thread Tools

Text with automated line-breaks for a picture

 
 
Herbert Gerstinger
Guest
Posts: n/a
 
      08-07-2005
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.


 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      08-07-2005
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.
 
Reply With Quote
 
 
 
 
Toby Inkster
Guest
Posts: n/a
 
      08-08-2005
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

 
Reply With Quote
 
Jedi Fans
Guest
Posts: n/a
 
      08-08-2005
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!
 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      08-08-2005
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 |
`-------------------------------------------------- --<--@ ------------'

 
Reply With Quote
 
Herbert Gerstinger
Guest
Posts: n/a
 
      08-08-2005
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.




 
Reply With Quote
 
Herbert Gerstinger
Guest
Posts: n/a
 
      08-08-2005
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.


 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      08-08-2005
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/
 
Reply With Quote
 
Safalra
Guest
Posts: n/a
 
      08-08-2005
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/

 
Reply With Quote
 
Benjamin Niemann
Guest
Posts: n/a
 
      08-08-2005
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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with picture on SD card - can't delete bad picture Harlen Ng Digital Photography 8 11-11-2005 08:47 PM
Printing file number and picture number with picture Ace Digital Photography 2 09-17-2005 09:15 AM
Need opinions - good picture - bad picture utseay@aol.com Digital Photography 22 03-17-2005 08:01 AM
automated picture package pshaw@emmet.com Digital Photography 2 12-24-2004 06:09 AM
Help taking a picture of a glossy picture (Q-60 profiling) Fanta Digital Photography 3 08-31-2003 09:27 PM



Advertisments