Need help with centering my div overlay

Hi.

im creating my myspace music band page and have no prior knowledge of css/html

im hoping you can help me out.

im creating a div overlay to put in my page with some graphic

but the graphic doesnt seem to center itself on different sized monitors.

this is my site myspace.com/redheathers

this is the code im using for my div overlay
thanks much !


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

<style>
body {margin-top: 700px; }
</style>

<style>
.masthead {width: 920px; height: 540px;
position: absolute; margin-left: 35px; left: 0%; top: 10px;
background-image:url(linkhere);}

</style>

You could try the following:

* Add align="center" to your DIV tag; or

* Update your .masthead definition to include:

margin-left: auto;
margin-right: auto;

Using 'auto' for your left and right margins results in the values being equal (thus centering the content on your page).

thank you so much
whcih way would you recommend?

can you show me how i would update my code?

thic coding business scares me.. im used to dealing music production not css!

thanks so much .. and im sorry for asking yout o spell it out for me.

patrick

If you update the '.masthead' CSS definition (the second option mentioned) then the centering will be applied to all instances of '.masthead'.

I would suggest that you start by simply updating the DIV tag:

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

You would also need to remove any of the CSS definitions that relate to positioning for .masthead. The new definition could look as follows:

.masthead {
width: 920px;
height: 540px;
background-image:url(linkhere);
}

You could consider removing the width and height definitions too. If you apply the changes gradually though then you can assess the results of each change and find the format that suits you best.