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]

Try changing your background code to 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;
}

I'm not exactly sure how far along you are on the layout, but at least this will make it align so that the top doesn't get cut off.

As far as the div box moving upward, when I change my window size it only shifts horizontally. I think maybe if you can be a bit more specific I can help out a little more (I don't think the background image was necessarily your problem).

edit; To get your div to stop shifting horizontally and stay centered, try this:

CODE

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

[shaistensmami76]

libertie I do believe you solved my problem. My div Box doesn't move anymore[on full screen or not]. I'm new to the DIV coding thing. How did you do it??? What do the above 2 codes break down to??? Thanks so much. You were a big help!!!!!

[shaistensmami76]

&&nd....i'm still trying to get what margins are???

[shaistensmami76]

okay i'm babbling...but, when the screen is on maximize, it now works...also DIV stays still in full screen[F11], but now when it's minimized[don't know how to put it...i guess the smallest screen size b4 pressing the maximize button on the top right of the computer navigation], My div box now moves to the right. I hope I worded that right. My "computer" lingo sucks. haha.

[shaistensmami76]

kay last reply...libertie, for the new background code...did you change my background image size??? What did you do. I need to know a good size to make my image size from now on! THANKS SOOOOO VERY MUCH!!!!

[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;
}

[shaistensmami76]

libertie...ur just fabulous. for future DIVS, are these codes the basis of everything involving coding and such??? If it is, I think I'm semi-getting what everything's meaning! I'm glad I found this sight. I love myspace but, the default layout sucks and I like personalization. Thanks so much for all of your help!! I truly appreciate it[not to sound corny...lol].

[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.