css positioning buttons for different computer resolutions - css

Question

this is my code for my buttons that i have on my page, with my desktop the buttons turn out pretty much where i want them to, but when i get on a laptop the buttons move down the page further and further depending on the computer resolution..
my background image is set up to fit the screen no matter what size they have there resolution at or how they resize there browser to keep it from distorting the picture but i just can't seem to get the buttons to show in the same spot for all resolutions.. or if there was a way to get the buttons to move with the background image for its position that's pretty much what im looking for and i have tried % also but here is the code below
a.button {
position:absolute;
display:block;
}
a.button.testing-link {
width:250px;
height:87px;
background:url(http:);
top:753px;
left:750px;
}
a.button.testing2-link {
width:250px;
height:87px;
background:url(http:);
top:753px;
left:180px;
}
a.button.testing3-link {
width:250px;
height:89px;
background:url(http:);
top:753px;
left:465px;
}

Answer 1

This is because you need to make your css responsive. Here's a cheat sheet.
http://webdesignerwall.com/tutorials/css3-media-queries
But basically you would have something like this:
#media screen and (max-width: 600px) {
a.button {
//your rules for that
}
}
#media screen (min-width: 600px) and (max-width: 800px) {
a.button {
//your rules for that
}
}
and so on.
Answer in english: Your desktop's resolution is not the same as the laptop you viewed, therefore those rules you set for it are still applied on the laptop, it looks different because of the resolution.
Also, a mistake I ran into as a novice web developer was positioning how you are, I would suggest not positioning that way, look up on google examples of good positioning methods, perhaps using percents instead of static values in pixels.

Answer 2

this is what i have came up with .. let me know what you think ?
a.button {
position:absolute;
display:block;
margin-left:auto;
margin-right:auto;
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing-link {
width:250px;
height:87px;
background:url();
top:753px;
left:750px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing2-link {
width:250px;
height:87px;
background:url();
top:753px;
left:50px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing2-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing3-link {
width:250px;
height:87px;
background:url();
top:753px;
left:340px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing3-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}