how to centre images in browser despite screen size change

[jeret]

Hi, im trying to set an image of white box horizontaly in the middle of the browser.
As you can see on 1024x768 it's set properly in the middle but when i view it in 1280x1024 the white box has moved up almost to the top.

Please help...thanks.

*screen capture included*

my css :
#content {
background-image: url(content.png);
background-repeat: no-repeat;
position: absolute;
top: 120px;
width: 100%;
height: 320px;
border-top-width: 0.5px;
border-right-width: 0px;
border-bottom-width: 0.5px;
border-left-width: 0px;
border-top-style: dotted;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
background-position: center;
}

 

[Phreaddee]

Aah the old vertical alignment issue, good luck with that.
For what its worth youve set is as position:absolute; & top:120px
Do you really expect it to magically "move" anywhere but 120px from the top of your viewport?
it is doing exactly what you are telling it to do...

 

[PixelPusher]

Yeah couple things here:

1. Why would you set your main content container to absolute position?
2. Dont use decimal values for pixel units
3. Use css shorthand

Now being that you have defined the height of your container, there is a way to reliably center this element on the page. Now bare in mind, if you take away the height property, you will need to use js to determine height and then set the appropriate top margin value. In the meantime, try this:

#content {
position:absolute;
top:50%;
margin-top:-160px;
width:100%;
height:320px;
border-width:1px 0;
border-style:dotted;
border-color:#999;
background:transparent url(content.png) center no-repeat;
}

 

[WebSquad]

Absolute 0 homie

 

[jeret]

PixelPusher, thank you that worked well.

 

[PixelPusher]

Absolute 0 homie

Dont know what this means??

PixelPusher, thank you that worked well.

Np jeret, your welcome.