Text with automated line-breaks for a picture

Discussion in 'HTML' started by Herbert Gerstinger, Aug 7, 2005.

  1. 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.
     
    Herbert Gerstinger, Aug 7, 2005
    #1
    1. Advertising

  2. Herbert Gerstinger

    Neredbojias Guest

    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.
     
    Neredbojias, Aug 7, 2005
    #2
    1. Advertising

  3. Herbert Gerstinger

    Toby Inkster Guest

    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, Aug 8, 2005
    #3
  4. Herbert Gerstinger

    Jedi Fans Guest

    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!
     
    Jedi Fans, Aug 8, 2005
    #4
  5. 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 |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Aug 8, 2005
    #5
  6. 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.
     
    Herbert Gerstinger, Aug 8, 2005
    #6
  7. 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.
     
    Herbert Gerstinger, Aug 8, 2005
    #7
  8. Herbert Gerstinger

    Greg N. Guest

    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/
     
    Greg N., Aug 8, 2005
    #8
  9. Herbert Gerstinger

    Safalra Guest

    Re: Text with automated line-breaks for a picture

    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/
     
    Safalra, Aug 8, 2005
    #9
  10. 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/
     
    Benjamin Niemann, Aug 8, 2005
    #10
  11. On Mon, 08 Aug 2005 15:36:17 +0200, Benjamin Niemann <> wrote:

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


    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 |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Aug 8, 2005
    #11
  12. Herbert Gerstinger

    Guest

    Re: Text with automated line-breaks for a picture

    Herbert Gerstinger wrote:
    > 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.
     
    , Aug 8, 2005
    #12
  13. Herbert Gerstinger

    Greg N. Guest

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


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

    --
    Gregor's Motorradreisen:
    http://hothaus.de/greg-tour/
     
    Greg N., Aug 8, 2005
    #13
  14. Herbert Gerstinger

    Greg N. Guest

    Greg N. wrote:

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

    --
    Gregor's Motorradreisen:
    http://hothaus.de/greg-tour/
     
    Greg N., Aug 8, 2005
    #14
  15. Herbert Gerstinger

    Toby Inkster Guest

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


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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 8, 2005
    #15
  16. Herbert Gerstinger

    Toby Inkster Guest

    Herbert Gerstinger wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 8, 2005
    #16
  17. Herbert Gerstinger

    Jedi Fans Guest

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

    --
    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!
     
    Jedi Fans, Aug 9, 2005
    #17
  18. Toby Inkster wrote:

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

    HTML4
     
    Herbert Gerstinger, Aug 9, 2005
    #18
  19. Greg N. wrote:

    > Greg N. wrote:
    >
    >> 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;">
    >

    This works, but only when you know the width in advance :-(
     
    Herbert Gerstinger, Aug 9, 2005
    #19
  20. On Tue, 09 Aug 2005 08:21:11 +0100, Jedi Fans <"news[at]jedifans[-=dot=-]com">
    wrote:

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


    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 |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Aug 9, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lloyd Sheen

    Render text with line breaks

    Lloyd Sheen, Sep 22, 2004, in forum: ASP .Net
    Replies:
    7
    Views:
    647
    =?Utf-8?B?SmVyZW15IERhdmlz?=
    Sep 22, 2004
  2. David Blickstein

    Line breaks in text mode for XSLT

    David Blickstein, Jun 28, 2005, in forum: XML
    Replies:
    5
    Views:
    2,151
    Peter Flynn
    Jul 3, 2005
  3. bernadou

    Force multi line field value to output with line breaks?

    bernadou, Jan 22, 2006, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    360
    bernadou
    Jan 23, 2006
  4. Marek Stepanek
    Replies:
    12
    Views:
    416
    Peter J. Holzer
    Sep 2, 2006
  5. Replies:
    8
    Views:
    1,261
    Mick White
    Apr 19, 2005
Loading...

Share This Page