Div Layout Problems...., General problems with DIVS Options

[shaistensmami76]

I'm having a hard time with my DIV layout. The coding seems correct and everything is in working order...but after positioning my transparent DIV box on my background image, when switching to full screen the DIV box seems to move upwards. Someone help me pls!!!!!

Here's my page: http://profile.myspace.com/index.cfm?fusea...endid=137530151

Here's my coding:

CODE

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>




<style type=text/css>

body {
background-color: 000000;
background-image: url("http://img144.imageshack.us/img144/8821/newdivlytworkingoncopypa5.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
scrollbar-arrow-color:000000;
scrollbar-track-color: 62fcae;
scrollbar-shadow-color: 62fcae;
scrollbar-face-color:62fcae;
scrollbar-highlight-color:ffffff;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:000000;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: transparent; background-color: transparent; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea
{font:normal 12px century gothic; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 10px century gothic; color:ffffff; font-weight:none; border:0px; text-transform: none; line-height:12px;}


{This is how all anchor points will be displayed; anchor points appear before all links.}
a{font-family:century gothic; font-size:10px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:century gothic; font-size:10px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}


{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:century gothic; font-size:10px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}

{Default Links}
a:link, a.man{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}
a:active{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:century gothic; font-size:12px; color:62fcae; font-weight:none;border:0px; text-transform: uppercase; }

</style>

<div class="content" style="position: absolute; left:255px; top:115px; width:489px; height:200px; overflow: auto;">
<center><img src="http://img521.imageshack.us/img521/1429/picture004sx4.jpg" alt="Image Hosted by ImageShack.us"/><br>
Who is this <b>mysterious</b> woman??? <u>Blessed</u> with them: My Big Daddy[[est. in 2005]] married 02.12.07]] and my litto boy Shaisten aka Beans[[03.10.06]]. Became a "military wife[[02.15.07]] && it feels like I'm <s>married to the mob</s>...Lol! My big 'ole teddy bear is currently in <s>Baghdad, Iraq</s> && Me n Beans is stuck in Louisiana[[surrounded by trees, trees and more tree..hehe.]]<br><br>
Wanna know more...hit up tha <b>inbox</b>...

<br>
♥Reeces Pieces♥</div>

[libertie]

Well, for future reference, here's what I usually go by when centering a div layer..

If I have a div that's 800px wide, and I want it to be dead center, I do the following:

#div1 {
position: absolute;
width: 800px; /* width of the div layer */
left: 50%; /* position the left side of the div dead center */
margin-left: -400px; /* this number is exactly half of the div's width. using this number and this principle (diving the div's width by half) will always position the div exactly in the center of the page. If I want it to be somewhere else, I can add to this number to move it left, or subtract to move it further right. */
top: 0px;
}

That part goes in between the <style> tags. Then the div looks like this:

CODE

<div id="div1"> content for the div here </div>

Using id="div1" calls the "#div1" section of the code that goes in the style tags.

In your case, we did it a little bit differently, but it's still the same principle. All of the code was encompassed in the actual div code rather than calling it from the stylesheet:

CODE

<div style="position: absolute; width: 800px; left: 50%; margin-left: -400px; top: 0px;"> content for the div here </div>

Glad I was able to help.