Displays on two lines, how to display on one line?

HTML & CSS
1

Hello,

On the first line I’ve got some text (Total Reviews) and on the second line an image. I’d like the image to display just to the right of the text.

Here is my css:


.rating_bar {
	width: 55px;
	background: url(/images/star_x_grey.gif) 0 0 repeat-x;
}
.rating_bar div {
	height: 12px;
	background: url(/images/star_x_orange.gif) 0 0 repeat-x;
}

Here is my html:

 
      Total Reviews:  <div class="rating_bar">
        <div style="width:50%"></div>
      </div>

What do I need to do?

Thanks in advance,

Tim

2

Tossed together a quick demo:

http://www.cutcodedown.com/for_others/TimMousel/template.html

I changed up the approach a bit, since the markup for them is now:


		<div class="ratingBar">
			Total Reviews:
			<span>10&#37;<span><span style="width:10%;"></span></span></span>
		</div>

Only need to use span there, the extras being present for images off and CSS off behaviors.

The CSS:


.ratingBar {
	vertical-align:middle;
}

.ratingBar span {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	overflow:hidden; /* just in case a value goes out of bounds */
	width:55px;
	height:12px;
	font:normal 10px/12px arial,helvetica,sans-serif;
	position:relative;
}

.ratingBar span span {
	position:absolute;
	top:0;
	left:0;
	background:#CCC url(images/stars.gif) 0 0 repeat-x;
}

.ratingBar span span span {
	background-color:#FB4;
	background-position:0 -12px;
}

Uses just one single image to do the job. (one less handshake is always good)

As you can see it has graceful degradation for images off and CSS off. Tested working perfect in IE 5.5, 6, 7 & 8, Opera 10.6, Firefox 2 & 3.5.4, and the latest flavors each of Safari and Chrome.

As with all my examples the directory:
http://www.cutcodedown.com/for_others/TimMousel

is unlocked for ease of access to the bits and pieces.

Hope this helps.

3

It will still drop in some browsers because it’s AFTER the text. By the specification, yes, it should ride up, but in practice, uhm… Thanks IE.

Because he probably has 20 of them in a row or something like that with each one having different values. This is one of like TWO circumstances in which the STYLE attribute would be appropriate to the markup since the width IS the content.

Stomme Poes hit it on the head, use span and B with inline-block.


<div class="ratingBar">
	Total Reviews: 
	<span title="60&#37; Rating"><b style="width:60%;"></b></span>
</div>

With this for the CSS:


.rating_bar span,
.rating_bar b {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
  height:12px; /* will NOT auto-shrink to sub-span in some browsers */
  vertical-align:middle; /* just in case Gecko decides to screw up */
  font-size:1px; /* fix IE minimum element height issue */
  background: url(/images/star_x_grey.gif) 0 0 repeat-x;
}

.rating_bar span {
  width:55px;
}

.rating_bar b {
  background:url(/images/star_x_orange.gif) 0 0 repeat-x;
}

Though - I’d seriously consider reducing those two images to one. Put the grey stars OVER the orange ones as a single .gif, then use this CSS:


.rating_bar span,
.rating_bar b {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
  height:12px; /* will NOT auto-shrink to sub-span in some browsers */
  vertical-align:middle; /* just in case Gecko decides to screw up */
  font-size:1px; /* fix IE minimum element height issue */
  background: url(images/ratingStars.gif) 0 0 repeat-x;
}

.rating_bar span {
  width:55px;
}

.rating_bar b {
  background-position:0 -12px;
}

That should do what you are asking for… though I’d also look into using some form of image replacement technique on it so people with images disabled have something to look at… much less people with CSS disabled… which SP also alluded to.

4

If you add {float:right;} to “.rating_bar div”, that should achieve the right effect.
But why have you set a width in the HTML? Better to set it in the CSS. And also have a think about the fact you’ve specified your rating bar as 55px, and the inner div at 50% of that. If it matters whether that rounds up to 28px or down to 27px (different browsers treat it differently), you need to either set the outer width to an even number, or specify the inner width in px.

5

What are these Total Reviews inside of? (what’s the surrounding HTML code?)

Divs are blocks and automatically make newlines. You could use inline elements, but you can’t set heights or widths on them (unless you make them blocks, which then have newlines). Or you could try display: inline block… with the hacks possibly required by FF2 and IE.

I assume you’re manually laying orange stars on top of grey ones? To me, star ratings are content, and here without images people can’t tell what the rating is. That means, the number of stars needs to be in the content. Either alt text or real text with images covering them up.

<p>Total reviews: <span>4 stars</span><b></b></p>
And then that p holds the grey stars image as a background image. The span takes the text and hides it behind the images (if there are images) using a negative z-index (this means it’ll have to be positioned). The b holds the golden stars image, and sits precisely on top of the p’s background image (likely using positioning).

Or, I’ve had some beers and this makes sense to me at the moment. There are likely lots of different ways to do this, but I’m assuming you’re using this combination of grey starts and orange stars, cause otherwise you’d have a single image in <img> tag with alt text that says “4 stars” etc. Which would be the easiest solution:
<p>Total reviews: <img src=“4stars.png” width=“” height=“” alt=“4 stars”></p>

6

Beautiful work, deathshadow. :slight_smile: