CSS star rating system
This is an archived, read-only copy of the United-TI subforum , including posts and topic from May 2003 to April 2012. If you would like to discuss any of the topics in this forum, you can visit Cemetech's Calculator Programming subforum. Some of these topics may also be directly-linked to active Cemetech topics. If you are a Cemetech member with a linked United-TI account, you can link United-TI topics here with your current Cemetech topics.

This forum is locked: you cannot post, reply to, or edit topics. General Coding and Design => Calculator Programming
CSS star rating system
United-TI Archives -> General Coding and Design
 
    »
» View previous topic :: View next topic  
Author Message
bananaman
Indestructible


Calc Guru


Joined: 12 Sep 2005
Posts: 1124
Posted: 20 May 2008 10:18:26 pm    Post subject:
I have been experimenting around with trying to create a rating system where it has a row of 5 stars and you click on them to rate an item. I created a blank image for the stars. And my goal was that when you hovered over the stars they would change colors. Red for a rating of 1, orange for 2, yellow for 3, light green for 4, and green for 5.

Here is my CSS and HTML. For some reason it is not respecting my width and height style and it is only displaying part of the stars.


Code:
a {
   text-decoration: none;
}

/* Rating Stars */
#rating {
   width: 300px;
   height: 100px;
   margin: 0;
   padding: 0;
}

a.rate1 {
   background: url("images/rate.png") no-repeat;
   width: 30px;
   height: 30px;
}

a.rate1:hover {
   background: url("images/rate1.png") no-repeat;
}

a.rate1 span {
   visibility: hidden;
   width: 30px;
   height: 30px;
}

a.rate2 {
   background: url("images/rate.png") no-repeat;
   width: 30px;
   height: 30px;
}

a.rate2:hover {
   background: url("images/rate2.png") no-repeat;
}

a.rate2 span {
   visibility: hidden;
}

a.rate3 {
   background: url("images/rate.png") no-repeat;
   width: 30px;
   height: 30px;
}

a.rate3:hover {
   background: url("images/rate3.png") no-repeat;
}

a.rate3 span {
   visibility: hidden;
}

a.rate4 {
   background: url("images/rate.png") no-repeat;
   width: 30px;
   height: 30px;
}

a.rate4:hover {
   background: url("images/rate4.png") no-repeat;
}

a.rate4 span {
   visibility: hidden;
}

a.rate5 {
   background: url("images/rate.png") no-repeat;
   width: 30px;
   height: 30px;
}

a.rate5:hover {
   background: url("images/rate5.png") no-repeat;
}

a.rate5 span {
   visibility: hidden;
}



Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>One Custom Shirt - Create your own unique t-shirt!</title>
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="stest.css" />
</head>

<body>
    <p><strong>BAD</strong>
    <a href="rate1.html"
             rel="self" class="rate1"><span>lots</span></a>
    <a href="rate2.html"
             rel="self" class="rate2"><span>lots</span></a>
    <a href="rate3.html"
             rel="self" class="rate3"><span>lots</span></a>
    <a href="rate4.html"
             rel="self" class="rate4"><span>lots</span></a>
    <a href="rate5.html"
             rel="self" class="rate5"><span>lots</span></a>
    <strong>GOOD</strong></p

</body>
</html>
Back to top
tr1p1ea


Elite


Joined: 03 Aug 2003
Posts: 870
Posted: 21 May 2008 12:40:08 am    Post subject:
You could try using a list perhaps?

EDIT - Something along the lines of:


Code:
ul.rating {
    left: 0px;
    margin: 0px;
    padding: 5px;
}

ul.rating li {
    display: inline;
}

ul.rating li a {
    background: url("images/rate.png") no-repeat;
    padding: 5px;
    text-decoration: none;
}

ul.rating li a span {
    visibility: hidden;
}

ul.rating li.rate1 a:hover {
    background: url("images/rate1.png") no-repeat;
}
ul.rating li.rate2 a:hover {
    background: url("images/rate2.png") no-repeat;
}
ul.rating li.rate3 a:hover {
    background: url("images/rate3.png") no-repeat;
}
ul.rating li.rate4 a:hover {
    background: url("images/rate4.png") no-repeat;
}
ul.rating li.rate5 a:hover {
    background: url("images/rate5.png") no-repeat;
}



Code:
<body>
    <ul class="rating">
        <li><strong>BAD</strong></li>
        <li class="rate1"><a href="rate1.html"><span>lots</span></a></li>
        <li class="rate2"><a href="rate2.html"><span>lots</span></a></li>
        <li class="rate3"><a href="rate3.html"><span>lots</span></a></li>
        <li class="rate4"><a href="rate4.html"><span>lots</span></a></li>
        <li class="rate5"><a href="rate5.html"><span>lots</span></a></li>
        <li><strong>GOOD</strong></li>
    </ul>
</body>


Last edited by Guest on 21 May 2008 12:51:49 am; edited 1 time in total
Back to top
Weregoose
Authentic INTJ


Super Elite (Last Title)


Joined: 25 Nov 2004
Posts: 3976
Posted: 21 May 2008 12:47:58 am    Post subject:
[font="courier new"]a is inline, so height and width won't work. Give it [font="courier new"]display: block; and [font="courier new"]float: left;.
Back to top
bananaman
Indestructible


Calc Guru


Joined: 12 Sep 2005
Posts: 1124
Posted: 21 May 2008 08:10:15 am    Post subject:
@tr1p1ea: I didn't try your idea b/c weregooses seemed like a similar idea and it worked, but thanks for your input. I may actually go to the list idea when I actually implement it into a webpage.

@weregoose: Thanks for being another pair of eyes to spot my simple mistake. It works fine now.
Back to top
Weregoose
Authentic INTJ


Super Elite (Last Title)


Joined: 25 Nov 2004
Posts: 3976
Posted: 21 May 2008 10:51:24 pm    Post subject:
bananaman wrote:
I may actually go to the list idea when I actually implement it into a webpage.
I would actually side with that. Smile
Back to top
bananaman
Indestructible


Calc Guru


Joined: 12 Sep 2005
Posts: 1124
Posted: 22 May 2008 01:32:36 pm    Post subject:
I experimented around with the list method, and I was able to come up with a method that allows all the stars to the left of the selected one to be highlighted as well. This involved creating a picture that had 6 different states. One for each possibility. Then shifting the background dependent upon which anchor was hovered.
Back to top
Weregoose
Authentic INTJ


Super Elite (Last Title)


Joined: 25 Nov 2004
Posts: 3976
Posted: 22 May 2008 10:13:16 pm    Post subject:
Sounded like fun, so I went with your description and came up with a version of my own:


Code:
<p class="rating">
  <a href="rate1.html"><span>1</span></a>
  <a href="rate2.html"><span>2</span></a>
  <a href="rate3.html"><span>3</span></a>
  <a href="rate4.html"><span>4</span></a>
  <a href="rate5.html"><span>5</span></a>
</p>



Code:
p.rating {
  background: url("images/rate.png");
  height: 30px;
  line-height: 30px;
  margin: 0;
  width: 150px;
}

p.rating:hover {
  background: url("images/rate.png") 0 30px;
}

p.rating a {
  float: left;
  text-decoration: none;
  width: 30px;
}

p.rating a:hover ~ a {
  background: url("images/rate.png");
}

p.rating a span {
  visibility: hidden;
}

Breaks in all IE versions. A "fix" would be to use conditional comments to point to a specialized style sheet for that browser.

Last edited by Guest on 23 May 2008 07:04:15 am; edited 1 time in total
Back to top
Display posts from previous:   
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
CSS star rating system
    »
» View previous topic :: View next topic  
Page 1 of 1 » All times are UTC - 5 Hours

 

Advertisement