SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with a bit of tricky CSS

    Hi,

    I wonder if anyone could shed some light on the following issue. It's one of those that I just can't get my head around at the moment, even to the extent that I can guarantee its possible.

    I have a control (its a rating control) which I can however hover to display a rating. It's pure css so no javascript. The back end is database driven through asp .net but that's just for info.

    I have 5 rating images, when I move across the rating from left to right, more stars are highlighted. What I would like to also do is display some text, like this

    star star star star star rating text

    the html is quite simple:

    <div class="star-rating">
    <img class="star rating1">
    <img class="star-rating2">
    <img>
    <img>
    <img>
    </div>

    CSS

    .rating-control .star-ratings {float:left;position:relative;width:120px;height:20px;background:url(../images/rating_scale.png) no-repeat -120px 0;}
    .rating-control .star {position:absolute;z-index:100;width:24px;height:20px;outline:none;}
    .rating-control .star:hover {left:0;z-index:2;width:120px;height:20px;overflow:hidden;background: url(../images/rating_scale.png) no-repeat 0 0;}
    .rating-control .rating1 {left:0;}
    .rating-control .rating2 {left:24px;}
    .rating-control .rating3 {left:48px;}
    .rating-control .rating4 {left:72px;}
    .rating-control .rating5 {left:96px;}
    .rating-control .rating1:hover {background-position:-96px -20px;}
    .rating-control .rating2:hover {background-position:-72px -20px;}
    .rating-control .rating3:hover {background-position:-48px -20px;}
    .rating-control .rating4:hover {background-position:-24px -20px;}
    .rating-control .rating5:hover {background-position:0 -20px;}


    Thanks in advance.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, thanks for the link but the css I already have does this bit. It's the extra text i'm looking for.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by allthediscounts View Post
    hi, thanks for the link but the css I already have does this bit. It's the extra text i'm looking for.
    There's one easy cheaty way to do it, which is to make the star sprite wider and just put the text in the graphic alongside the relevant row of stars.

    Alternatively, you could use the technique from css/edge to absolutely position text to appear when you hover over different items.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •