Question

What is preferred way to add discount tags over some product image using css?

My current implementation is this http://jsfiddle.net/ANtfG/7/

Html

<ul>   
    <li class="save_money">
        <img src="http://lorempixum.com/200/200/food" />
        <span class="twenty-percent"  /></span>
    </li>   
</ul>

CSS

.save_money{position:relative;float:left;margin:15px;background:yellow;display:inline}
.save_money img{position:absolute;}
.twenty-percent{background:url(http://canadianneighborpharmacy.net/images/cnp/discount_20.png);position:absolute; left:170px; top:-2px; width:45px; height:45px}

I want to improve these two restriction in my current implementation or tell me the better way to achieve this

1. How to align discount tag to right, not using left:170px? right:0
   doesn’t work. and width of product images can be changed sometime
   then left:170px will not be flexible to width.
2. I’m using a Blank span element in mark-up I would like to know if
   there is another way to do it. Why I used span over <img> because I
   have different tags for 20%, 30%, 40% discount. SO i thought instead
   using <img> it would begood to add a span with classes like
   .twenty-percent, .thirty-percent, .forty-prcent

Answer 1

How to align discount tag to right, not using left:170px? right:0
doesn’t work. and width of product images can be changed sometime then
left:170px will not be flexible to width.

Use right: -15px. That way, when you adjust the width, the “discount tag” will still be positioned correctly. position: absolute on the img must be removed, because with it the li has no width or height. I added display: block to remove the ~4px of yellow space underneath the img caused by the img being display: inline.

See: http://jsfiddle.net/thirtydot/ANtfG/9/

I’m using a Blank span element in mark-up I would like to know if
there is another way to do it. Why I used span over because I
have different tags for 20%, 30%, 40% discount. SO i thought instead
using it would begood to add a span with classes like
.twenty-percent, .thirty-percent, .forty-prcent

That’s fine. The only other option would to omit the span and use :before – but of course, that won’t work in older browsers such as IE7 (and it won’t quite work in IE8 due to an IE8 bug).

See: http://jsfiddle.net/thirtydot/ANtfG/11/

---

You should fix this:

<span class="twenty-percent"  /></span>

to this:

<span class="twenty-percent"></span>