images always in the same line (like word-wrap)

Discussion in 'HTML' started by ffreino@gmail.com, May 4, 2007.

  1. Guest

    Hi,
    This is a tricky problem (at least for me) I would like to print a
    movie title and then its score using stars (img tags)

    For example ( where * stands for <img src='...'> ) :

    Spiderman 3 * * * * *
    The Shining * * *

    The problem arise when there is no width enough to print the whole
    line, so it prints:

    Spiderman 3 * * *
    * *
    The Shining * * *

    How can I keep several images in the same line?

    Thanks.

    PS-. Those scores aren't real :B
    , May 4, 2007
    #1
    1. Advertising

  2. dorayme Guest

    In article
    <>,
    wrote:

    > Hi,
    > This is a tricky problem (at least for me) I would like to print a
    > movie title and then its score using stars (img tags)
    >
    > For example ( where * stands for <img src='...'> ) :
    >
    > Spiderman 3 * * * * *
    > The Shining * * *
    >
    > The problem arise when there is no width enough to print the whole
    > line, so it prints:
    >
    > Spiderman 3 * * *
    > * *
    > The Shining * * *
    >
    > How can I keep several images in the same line?
    >


    Make them smaller so they fit on the line? Have small margins and
    padding? What are you really asking? You can't get ten elephants
    in a tent with room for only five.

    --
    dorayme
    dorayme, May 4, 2007
    #2
    1. Advertising

  3. Ben C Guest

    On 2007-05-04, <> wrote:
    > Hi,
    > This is a tricky problem (at least for me) I would like to print a
    > movie title and then its score using stars (img tags)
    >
    > For example ( where * stands for <img src='...'> ) :
    >
    > Spiderman 3 * * * * *
    > The Shining * * *
    >
    > The problem arise when there is no width enough to print the whole
    > line, so it prints:
    >
    > Spiderman 3 * * *
    > * *
    > The Shining * * *
    >
    > How can I keep several images in the same line?


    Just set style="whitespace: no-wrap" on the container.
    Ben C, May 4, 2007
    #3
  4. dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article
    > <>,
    > wrote:
    >
    > > Hi,
    > > This is a tricky problem (at least for me) I would like to print a
    > > movie title and then its score using stars (img tags)
    > >
    > > For example ( where * stands for <img src='...'> ) :
    > >
    > > Spiderman 3 * * * * *
    > > The Shining * * *
    > >
    > > The problem arise when there is no width enough to print the whole
    > > line, so it prints:
    > >
    > > Spiderman 3 * * *
    > > * *
    > > The Shining * * *
    > >
    > > How can I keep several images in the same line?
    > >

    >
    > Make them smaller so they fit on the line? Have small margins and
    > padding? What are you really asking? You can't get ten elephants
    > in a tent with room for only five.


    Sorry, now I see what you want... as Ben C says I guess.

    --
    dorayme
    dorayme, May 5, 2007
    #4
  5. In article <>,
    Ben C <> wrote:

    > On 2007-05-04, <> wrote:
    > > Hi,
    > > This is a tricky problem (at least for me) I would like to print a
    > > movie title and then its score using stars (img tags)
    > >
    > > The problem arise when there is no width enough to print the whole
    > > line, so it prints:
    > >
    > > Spiderman 3 * * *
    > > * *
    > > The Shining * * *
    > >
    > > How can I keep several images in the same line?

    >
    > Just set style="whitespace: no-wrap" on the container.


    Or, alternatively, use one image with five stars, one image with 4
    stars, etc. If you use "*" as alt text, you might still want to use the
    CSS hint, but the image itself won't be wrapped across lines.

    --
    Joel.
    Joel Shepherd, May 5, 2007
    #5
  6. Ben C Guest

    On 2007-05-05, Joel Shepherd <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> On 2007-05-04, <> wrote:
    >> > Hi,
    >> > This is a tricky problem (at least for me) I would like to print a
    >> > movie title and then its score using stars (img tags)
    >> >
    >> > The problem arise when there is no width enough to print the whole
    >> > line, so it prints:
    >> >
    >> > Spiderman 3 * * *
    >> > * *
    >> > The Shining * * *
    >> >
    >> > How can I keep several images in the same line?

    >>
    >> Just set style="whitespace: no-wrap" on the container.

    >
    > Or, alternatively, use one image with five stars, one image with 4
    > stars, etc. If you use "*" as alt text, you might still want to use the
    > CSS hint, but the image itself won't be wrapped across lines.


    You might end up with

    Spiderman 3
    * * * * *

    in that case.
    Ben C, May 5, 2007
    #6
  7. Scripsit Joel Shepherd:

    >>> How can I keep several images in the same line?

    >>
    >> Just set style="whitespace: no-wrap" on the container.

    >
    > Or, alternatively, use one image with five stars, one image with 4
    > stars, etc.


    That's the best approach, because it lets you use good alt texts that
    correspond to the _meaning_ of images, such as <img src="stars5.gif"
    alt="excellent">. Surely it is better to hear "excellent" than e.g.
    "asterisk asterisk asterisk asterisk asterisk" (or even "star star star star
    star").

    But if you use copies of the same image, then the _correct_ CSS rule is
    white-space: nowrap
    (The use of hyphens is surely significant in CSS property and value names,
    and partly rather illogical.)

    Alternatively, <nobr>...</nobr> could be used. It will make people who swear
    by standards upset, and it will make browsers honor the request not to break
    the line, even when CSS is disabled.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 5, 2007
    #7
  8. Ben C Guest

    On 2007-05-05, Jukka K. Korpela <> wrote:
    > Scripsit Joel Shepherd:
    >
    >>>> How can I keep several images in the same line?
    >>>
    >>> Just set style="whitespace: no-wrap" on the container.

    >>
    >> Or, alternatively, use one image with five stars, one image with 4
    >> stars, etc.

    >
    > That's the best approach, because it lets you use good alt texts that
    > correspond to the _meaning_ of images, such as <img src="stars5.gif"
    > alt="excellent">. Surely it is better to hear "excellent" than e.g.
    > "asterisk asterisk asterisk asterisk asterisk" (or even "star star star star
    > star").
    >
    > But if you use copies of the same image, then the _correct_ CSS rule is
    > white-space: nowrap


    Oops, yes it is "white-space" and "nowrap", not "whitespace" and "no-wrap".

    [...]
    > Alternatively, <nobr>...</nobr> could be used. It will make people who swear
    > by standards upset, and it will make browsers honor the request not to break
    > the line, even when CSS is disabled.


    In that case why not go back to <font>, <center> etc. for when CSS is
    disabled?
    Ben C, May 5, 2007
    #8
  9. Scripsit Ben C:

    >> Alternatively, <nobr>...</nobr> could be used. It will make people
    >> who swear by standards upset, and it will make browsers honor the
    >> request not to break the line, even when CSS is disabled.

    >
    > In that case why not go back to <font>, <center> etc. for when CSS is
    > disabled?


    Because writing <font face="Constantia, Georgia, sans-serif">...</font>
    inside each block in each document where you wish to use it is more
    cumbersome than writing, say, body { font-family: Constantia, Georgia,
    sans-serif; } just once in a stylesheet. Compare this with the difference
    between
    <nobr>A-1</nobr>
    and
    <span style="white-space: nowrap">A-1</span>
    (where the author misspells white-space or nowrap every other time :) ).

    Similarly, using h1 { text-align: center; } in a site-wide style sheet is
    just _simpler_ than using <center><h1>...</h1></center> or even <h1
    align="center">...</h1>.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 5, 2007
    #9
  10. Guest

    Thanks a lot (I wrote a message two days ago but it wasn't send it, I
    don't know why)
    <nobr> and style="whitespace: no-wrap" are really good.
    'stars3.jpg, stars4.jpg, stars5.jpg' was a good idea but a php loop is
    better than a mspaint session.

    Thanks.
    , May 7, 2007
    #10
    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. Jason Coyne  Gaijin42

    Word wrap line break code and algorithm for c#

    Jason Coyne Gaijin42, Apr 8, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    24,141
    Jason Coyne Gaijin42
    Apr 8, 2004
  2. name

    Line/word wrap program.

    name, Aug 19, 2004, in forum: C Programming
    Replies:
    11
    Views:
    559
    CBFalconer
    Dec 9, 2004
  3. Frost
    Replies:
    8
    Views:
    501
    Vladimir S. Oka
    Feb 10, 2006
  4. Aaron Fude

    To wrap or not to wrap?

    Aaron Fude, May 8, 2008, in forum: Java
    Replies:
    12
    Views:
    680
    Chronic Philharmonic
    May 10, 2008
  5. Art Werschulz

    Text::Wrap::wrap difference

    Art Werschulz, Sep 22, 2003, in forum: Perl Misc
    Replies:
    0
    Views:
    215
    Art Werschulz
    Sep 22, 2003
Loading...

Share This Page