keep a fixed div centered on window resize??

daxilic · 08-17-2010, 01:45 AM

OK so I've got a header/banner thats 2000x100 px - 2000px width to ensure the header will always be visible regardless of what resolution your monitor is. At the moment I've got the header as the background of a div in fixed position to get rid of the scroll bars, but I want it to always be centered when the window is resized, How do I do this?

Heres a test I did:

http://www.polygoncube.co.uk/test/headertest2.html

I want the 'HEADER TEST' text to always be centered when you resize the window.

Thanks in advanced

Aple · 08-17-2010, 01:50 AM

Make your width: 100%

Welcome in advance

ch4sethe5un · 08-17-2010, 02:05 AM

Welcome to CF!

This is an over-complicated way that can be applied to different scenarios. I dont know how useful it will be though..

You can do it with two backgrounds. One that is attached to the <body> and one that is attached to the div#apDiv1.

This method also guarantees that someone who does have a resolution over 2000px still gets a complete header.

Repeat the green part down the x-axis.

Code:

body {
background:url("green-part") repeat-x top;}

Then the div#apDiv1 can center the black part over the green part.

Code:

#apDiv1 {
background:url("black-part") center top no-repeat;
height:100px;
margin:0 auto; <---centers
width:1000px; <---new width for the black part
}

http://www.bluerobot.com/web/css/center1.html

daxilic · 08-17-2010, 02:49 AM

OMG changing it to 100% did the trick! cant believe it was just that lol. thanks so much that was driving me up the wall

but doing that would mean if someone had a resolution over 2000px then the header would stretch to fit it? though dont think that would matter anyway.

thanks ch4sethe5un

that sounds like a good way, though that header test was just block colours the green has no actual relevance, the final thing will be one long image so with your method I guess you would see the seams, but I still wanted to know how to do it so thanks anyway lol

Aple · 08-17-2010, 03:26 AM

Quote:

Originally Posted by daxilic

thanks so much that was driving me up the wall

Been there.