hey,

i've ran into a problem with a site i'm working on. this is actually just the temporary "simple" page while i work on the actual site. i have the background image set to 100% of the screen width so it always stays at the full width of the screen. the problem is that i have 3 buttons with hover states that rollover that i can't seem to figure out how to keep them positioned and it proportion with the background image.

not sure what the best way is to do this but i feel that if i could figure this out it would be a huge huge advantage for me and a lot of people when designing sites.

here is the site: www.frankywhite.com it looks perfect on my 22" monitor but anything smaller and the buttons look huge and out of place. i want the buttons div to site about 30 pixels below the white box on the background image and in line with it from the left side of the screen.

here's the html:

Code:
<body>



<img id="background" alt="background" src="frank-white-website-background.jpg" />



<div id="links">



<div id="social">

<a id="facebook" href="https://www.facebook.com/officialfrankwhite" target="_new"><span>facebook</span></a>

<a id="reverbnation" href="http://www.reverbnation.com/frankyblanco59" target="_new"><span>reverbnation</span></a> 

<a id="youtube" href="http://www.youtube.com/officialfrankwhite" target="_new"><span>youtube</span></a>



</div><!-- end social-->



</div><!-- end links-->

 

</body>


here's the css:

Code:
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	background-color: #ffffff;
	font-family:Verdana, Geneva, sans-serif;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  padding-top: 0px;
  top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  left: 0px;
}

#background {
  width: 100%;
  height: auto;
}

/*end reset*/



p{
 font-size:31px;	
 padding: 0px 0px 0 0px;
 color: #f47821;
}



/** navbar **/

#links{
	position:absolute;
	width:20%;
	bottom:30%;
	left:5%;
	height:auto;
	border:none;
}

#social{
	position:absolute;
	width:auto;
	height:auto;
	top:0px;
	left:0px;
	border:none;
	z-index:1;
}

#facebook {
	display: block;
	width: 260px;
	height: 260px;
	background:url(button-facebook.png) no-repeat 0 0;
	position: absolute;
    top: 0px;
    left: 0px;
	border: none;

}

#facebook:hover {
	background-position: 0 -260px;
}

#facebook span{
	display: none;
}


#reverbnation {
	display: block;
	width: 260px;
	height: 260px;
	background:url(button-reverbnation.png) no-repeat 0 0;
	position: absolute;
    top: 0px;
    left: 275px;
	border: none;

}

#reverbnation:hover {
	background-position: 0 -260px;
}

#reverbnation span{
	display: none;
}


#youtube {
	display: block;
	width: 260px;
	height: 260px;
	background:url(button-youtube.png) no-repeat 0 0;
	position: absolute;
    top: 0px;
    left: 550px;
	border: none;

}

#youtube:hover {
	background-position: 0 -260px;
}

#youtube span{
	display: none;
}
thanks in advance this has been driving me crazy and i need this page to be up by tomorrow. gotta love last minute jobs.