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

[ffreino]

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

 

[dorayme]

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.

 

[Ben C]

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.

 

[dorayme]

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.

 

[Joel Shepherd]

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.

 

[Ben C]

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.

 

[Jukka K. Korpela]

Scripsit Joel Shepherd:

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.

 

[Ben C]

Scripsit Joel Shepherd:


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?

 

[Jukka K. Korpela]

Scripsit Ben C:

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

 

[ffreino]

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.