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]

In the first bit of code, this is what I changed:

body {
background-color: 000000;
background-image: url("http://img144.imageshack.us/img144/8821/newdivlytworkingoncopypa5.jpg");
background-position: top 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;
}

By aligning it "top center" instead of just "center", the position of the background image is aligned to the top of the page rather than the center.

The second bit, with the alignment, this is what it amounts to:

<div class="content" style="position: absolute; left:50%; margin-left: -245px; top:185px; width:485px; height:200px; overflow: auto;">

This is the code I always use to center a div. First of all is position: absolute; which you've already got. Then, left: 50%; - what this does is put the left side of the div precisely in the middle of the page. No matter what size the window is, the left side of the div will ALWAYS be in the center. However, the actual div is not, so you have to move it to the left a bit. The margin-left: -285px; part moves the layer to the left 285 pixels. Make sense? xD

However, you seem to have removed the rest of the div and you still have the code in your "Who I'd like to meet" section.. I would just choose where to put it and make sure it looks like this:

CODE

<div class="content" style="position: absolute; left:50%; margin-left: -245px; top:185px; width:485px; 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>

As for the other div (the one in the bottom left), change only the part in the first line from this:

CODE

<div class="content" style="position: absolute; left:215px;  top:490px; width:215px; height:215px; overflow: auto;">

to this:

CODE

<div class="content" style="position: absolute; left: 50%; margin-left: -287px; top:480px; width:210px; height:215px; overflow: auto; overflow-x: hidden;">

I didn't actually change the size of the background image. :) The size seems okay. :3

Also, underneath the code for your background image you can add code to make the page stretch larger, so it would look like this:

CODE

body {
background-color: 000000;
background-image: url("http://img144.imageshack.us/img144/8821/newdivlytworkingoncopypa5.jpg");
background-position: top 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;
}

div {
    height: 170px;
}