a href moves with zoom in and out - html

Question

I have a webpage written in dreamweaver. I have my buttons as part of the background image and use a href to provide functionability to those buttons. However when I zoom in or out with my browser those a tags move and the buttons in the background no longer align with teh a href tag. Is there any way around this?
Thanks

Answer 1

You need to slice those image buttons seperately, whether it's using Photoshop, GIMP or whatever you want and save them in your images folder. Then you can either use the <img> tag or have a <div> with a background using that image and set the "a href" on that.
So you could do either of these:
<img src="url" alt="some_text"/>
OR
html:
<div id="image"></div>
css:
div#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
To have them placed where you want on the page, you would have to place them in a div and then use css to add a margin or padding to be placed where you need it to be. So if you use the first option and you want it to be on the bottom right of a specific div, you would do this:
html:
<div id="specific_div">
<div id="image">
</div>
</div>
css:
#specific_div{
height: 400;
width: 400;
}
#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
#specific_div #image{
/* placement on page */
float:right;
margin-top: 150px;
}