css centering????? please help Options

[deejay21]

hello below is my css code on my page.. all i want to do is for the image to be center on any screen resolution... not sure how to do it..

CODE

<div class="masthead"><span></span></div>


<style>

body {margin-top: 180px; }

</style>
<style>

.masthead {width: 800px; height: 169px;
position: absolute; margin-left: 0px; left: 12%; top: 10px;
background-image:url(http://i1021.photobucket.com/Header.jpg);}


</style>

Reason for edit: Please use [codebox] tags when posting long codes. - Mike

[Mickey]

To center things for all screen resolutions, position the element(s) like this:

CODE

<div style="position:absolute; top:#px; left:50%; margin-left:-#px; z-index:9;">
Insert centered content here.
</div>

The top and margin-left attributes need to be replaced with appropriate values. For margin-left, the value must equal half the width of the content inside the container. Do not remove the minus symbol as it's there to pull the content to where it needs to be. Now, if you were to apply that method to the code you have now, this bit here:

CODE

.masthead {width: 800px; height: 169px;
position: absolute; margin-left: 0px; left: 12%; top: 10px;
background-image:url(http://i1021.photobucket.com/Header.jpg);}

Would instead look like this:

CODE

.masthead {width: 800px; height: 169px;
position: absolute; margin-left: -400px; left: 50%; top: 10px;
background-image:url(http://i1021.photobucket.com/Header.jpg);}

If you also wanted to center it horizontally, use the 50% method again but with the top attribute, so it'll look like this:

CODE

.masthead {width: 800px; height: 169px;
position: absolute; margin-left: -400px; left: 50%; margin-top: -84px; top: 50%;
background-image:url(http://i1021.photobucket.com/Header.jpg);}

I used 50% for top and -84px for margin-top because 84 is about half the height of your header (169px).