I’ve written some PHP, HTML, and CSS to generate a graphical rating using images. I need to browser test this first, as it relies on the CSS overflow: hidden declaration to work. Also, I ended up using a table, as I couldn’t figure out how to get images, spans, margins and/or floats, to give me what I wanted. Feel free to try it out for yourself. It’ll take me some time before I incorporate into the site.
My apologies to Arthur C. Clarke.
3 Comments
Ah, what a clever way to do it, with the two pictures on the one with the fraction. Could you not reduce the markup a bit by doing something like this, though?
Then in the css, you have to float the two first-level spans, set the two star patterns to their backgrounds, and then set their widths based on the class of the parent div. Finally, for the nested span inside .stars, float it right and set it to the width of the star you want covered up…
Perhaps in the end, it’s so much CSS that it makes little difference. But thanks for sharing the trick.
Ack! It stripped all the markup instead of converting it. It looked like this:
(div class=”rating integerpart4 fractionalpart3″)
(span class=”stars”)(span)(/span)(/span)
(span class=”empties”)(/span)
(/div)
Hey, I’m willing to try anything to reduce markup. I always neglect to remember using background images. Definitely seems like a cleaner way to go. I’m still in that stage where CSS is trial and error for me. I see CSS as being a lot like XML Stylesheets: you can understand it in 5 minutes, but take a lifetime to master it. At least with CSS (unlike XSL), you can apply what you’ve learned to other problems. With XSL, I feel like I’m starting from scratch each time. It’s kind of a running joke among the programmers where we work.
Thanks for the tip.
Comments RSS feed.
Leave a comment