How do I make this title overlap the content area?

[sirflex10]

I'm trying to make the header <snip> overlap the div, I'd like for header to be placed on top of the div. What am I doing wrong?

Here's the site:
<snip>

And here's my code:
<style type="text/css">
<!--

body {
background-image: url(black.jpg);
background-repeat:
repeat;
background-attachment:
fixed;
margin:20px 0px 0px 0px; padding:0px;
text-align:center;
}

/* #content {
width:750px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #ff0000;

background-image: url(4viceroydamask.jpg);
}

*/

#content {
margin-left: auto;
margin-right: auto;
width: 600px;
text-align: left;
background-image: url(4viceroydamask.jpg);
z-index:2;
}

.barberpole { float: left; margin: 15px; }

.title { margin:300px 0px 0px 0px; z-index:2; position: relative;

}

.mainpic{ float: left; margin: 15px; padding:1px;
border:1px solid #021a40;
background-color:#FF0000;}

#apDiv1 {
position:absolute;
left:265px;
top:63px;
width:471px;
height:22px;
z-index:1;
}

img.lpole
{
position:absolute;
left:30px;
top:30px;
z-index:1;
}

img.rpole
{
position: absolute; right: 10px; bottom: 10px;
right:30px;
top:30px;
z-index:1;

}

img.toptitle
{
padding:0;
margin:0;
z-index: 2;

}

.style1 {color: #FFFFFF}

-->
</style></head>

Thanks in advance

[edited by: swa66 at 4:50 am (utc) on Sep. 4, 2009]
[edit reason] No promotion, see ToS and Forum Charter [/edit]

[sirflex10]

Also, how do I center text inside of a div? How do I center the copyright info at the bottom. Thank sin advance.

[D_Blackwell]

Pretty slick link drop with the text reference. Surprised it didn't get cut.
.....................

I can't tell from your CSS the best way make the "header overlap the div". The working code would influence the solution. z-index could be used to stack one div partially over another. Absolute positioning could be used for the same effect. Negative margin perhaps. Not enough information about the problem to be worth giving a lot of thought to a solution.
.....................

Centering text is usually done by adding the the text-align: property to the appropriate class or id and assigning a value of center, as with:

#footer {
text-align: center;
}

or

.centered-text{
text-align: center;
}

or shorthand by assigning multiple classes and/or IDs the same declarations as with:

#footer, .centered-text {
text-align: center;
}
.....................

More effective for a very common declaration, which is likely to be used again and again, is to set it up as a global and then call as needed by calling multiple classes in the HTML:

CSS
.center {
text-align: center;
}

HTML
<div class="class1 center">
Text
</div>