1 reply [Last post]
holly89
holly89's picture
Offline
Regular
Last seen: 9 years 28 weeks ago
Timezone: GMT+1
Joined: 2010-10-01
Posts: 11
Points: 17

Hi,

I have a background which is centered in the middle of the page so that when the screen is resized the margin decreases to fit more of the background in, instead of keeping the same white space around the background. This is done by the following code:

.centered {
	background-image:url(Images/background.png);
	position: absolute;
        top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 750px;
	height: 500px;
	margin: auto;
}
 
[code]
 
 
Then i have some navigation buttons which i positioned using relative positioning, as so:
 
[code]
 
 
a.home {
	background: url("Images/home.png") no-repeat 0 0;
	width: 90px;
	height: 80px;
	display: block;
	position:relative;
	top:0px;
	left:920px;
}
 
a.home:hover { background:url("Images/homehover.png") no-repeat 0 0; }
a.home:active { background:url("Images/homeactive.png") no-repeat 0 0;}
 
[code]
 
But when i resize the window the buttons do not move relation to the background, is there a way to position either the background or the buttons so that they move together when the window is resized, but the margin still decrease aswell?
 
Thank you

holly89
holly89's picture
Offline
Regular
Last seen: 9 years 28 weeks ago
Timezone: GMT+1
Joined: 2010-10-01
Posts: 11
Points: 17

did it!

Dont worry guys, i worked it out:)

I put the HTML for the buttons inside the div for the background and now they move accordingly, giggles.

Sorry