Working with a Div Overlay, Positioning (w. picture&codes) Options

[lovelyfatale]

I just started making a new Div Overlay.. And I'm trying to re-position this table so it's in the dead center of the page. Here's what it looks like NOW:


And here are my codes so far...
ABOUT ME:

CODE

<hide comments/friends>
<style type="text/css">.comments {visibility:hidden;display:none;}</style>

<style type="text/css">
.Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;}
</style>

<style>
.content{
width:300px;
float:left;
padding:5px 5px 5px 7px;
margin:5px 0 0 5px;
border:3px solid;
}
</style>

I'D LIKE TO MEET:

CODE

<DIV class="Main"> <table style="width:800px; height:800px; cellpadding:0px; cellspacing:0px; border:2px solid silver; background-color:ffffff;}"> <tr> <td valign="top"><table style="width:300px; height:300px; cellpadding:0px; cellspacing:0px; border:2px solid black; background-color:cccccc;}"> <tr> <td valign="middle">UNDER CONSTRUCTION.</td> </tr> </table> </DIV>

[freeflow]

Make a new div for it and you have to position it to certain coordinates to where you want it.


So basically do
.divnamehere{
position: absolute;
width: #px;
height: #px;
left: #px;
top:150px;
}

add that inbetween style tags only edit where I put #. Put random numbers there till you get it centered.

For it to show you have to do
<div class="divnamhere"> content here</div>

[lovelyfatale]

Okay, but where do I put ..
<div class="divnamhere"> content here</div>


EDIT:
And is there something that it supposed to be put for the .divnamehere{
or do I just put anything for that?

[freeflow]

you put the <div class="namehere">contenthere</div>
in who'd I like to meet after the "> and before the ending of the hide your profile code.

Whatever name you put for .divnamehere{
is the same name you put for the content you want to be at those coordinates.
You make another
.divnamehere{
position: absolute;
width: #px;
height: #px;
left: #px;
top:150px;
}
for each div you need.

Ex say I had 2
.blogstuff{
position: absolute;
width: #px;
height: #px;
left: #px;
top:150px;
}
.ugly{
position: absolute;
width: #px;
height: #px;
left: #px;
top:150px;
}

wherever I wrote the blog stuff I would add <div class="blogstuff">blogstuff</div>

and for ugly stuff <div class="ugly">ugly stuff here</div>

Just wanted to explain more I didn't do as much in my above post.

So you put anything for div name here.

[lovelyfatale]

Okay I think I've almost got it. But which "> are you talking about? I don't think I'm putting it in the right place.

[freeflow]

<DIV class="Main"> <table style="width:800px; height:800px; cellpadding:0px; cellspacing:0px; border:2px solid silver; background-color:ffffff;}"> <tr> <td valign="top"><table style="width:300px; height:300px; cellpadding:0px; cellspacing:0px; border:2px solid black; background-color:cccccc;}">[<THAT ONE :) ] <tr> <td valign="middle">UNDER CONSTRUCTION.</td> </tr> </table> </DIV>

the bold.

Also make sure that you put the
.divnamehere{
blahblahblah;

with a } at the end like above(my post before this one). and inbetween style tags.

[lovelyfatale]

ehh, okay this is what my code looks like..

CODE

<DIV class="Main"> <table style="width:800px; height:900px; cellpadding:0px; cellspacing:0px; border:2px solid silver; background-color:ffffff;}"> <tr> <td valign="top"><table style="width:300px; height:300px; cellpadding:0px; cellspacing:0px; border:2px solid black; background-color:cccccc;}"><div class="firstcolumn">firstcolumn</div>
.firstcolumn{
position: absolute;
width: 300px;
height: 300px;
left: 150px;
top:150px;} <tr> <td valign="middle">UNDER CONSTRUCTION.<br>

Something's not right..

[freeflow]

take out
.firstcolumn{
position: absolute;
width: 300px;
height: 300px;
left: 150px;
top:150px;}

put in about me inbetween style tags.