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

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

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>

The main issue why right: 0px; (or maybe even right: -20px;) wouldn't work, is because you gave the img an absolute position.

Because of this, the surrounding li element doesn't get the same width as your image; and thus the -20% span gets positioned "wrongly" (maybe different is a better word). By simply removing the position:absolute from the img, and replacing left: 170px; with right: -20px; you get about the same result, but which will resize along to the right with the image size :).

@jitendra; ycheck this fiddle http://jsfiddle.net/sandeep/ANtfG/10/ right:-15px is works but your li is not taken the width & height of your img tag because it's absolute position .So, remove position:absolute from your img tag