I'm trying to position an IMG (.gif). It is a "Buy Now" image and I want it placed in the bottom right corner of a DIV that I have. I need to set the bottom and right margins to 5px.
I've tried a couple of things:
1. I had an image tag and set the CSS to position: absolute; and right: 5px; and bottom: 5px;. This positioned the image perfectly, but when I wrapped an <A> tag around it, it wouldn't like to to the page.
2. I tried setting the z-index to 99 of this IMG tag but it didn't change anything.
3. I tried putting the <A> and <IMG> tags inside of a DIV and then instead of positioning the IMG or A tags absolutely, I positioned the whole DIV absolutely. Still didn't link to the page for me.
The only thing that worked is when I removed the absolute positioning. The problem is that I need the absolute positioning to ensure that the image is in the bottom right hand corner.
The next thing that I tried was to create and image map to cover the whole image of the .gif file. However, it didn't work at all (but I have never done an image map before so I may have done it wrong).
Here is what I had for the image map:
Code:
<div class="buy">
<map name="map1">
<area shape="rect" coords="0,0,49,26" href="cart.php" />
</map>
<img src="images/buy.gif" alt="" usemap="map1" border="0" height="26" width="49" />
</div>
<!-- end div.buy -->
|
