Please help me!, My div overlay is messed... Options

[Nina-Williams]

I made a div layout 800x1200.
So, it would scroll. But when I added my two boxes, one about me and the other for some marquee icons, they were moving like the scrollbar. I think it is the position?

[nikx618]

maybe a link to your profile would help?

[Nina-Williams]

There... If you scroll at the right, the boxes are coming to the right too...

[nikx618]

yeah, the box that has the marquee in it is just mis aligned.
all you have to do is align, just like how you did with the about me.

[Nina-Williams]

I know, but it is not that...
You see, I want to 'seperate' the scrolls of the boxes from the div one.
I think it is moving cause the position is absolutely, or not?

[nikx618]

im confused at what you are trying to do.
&what browser do you use. i use FF 3.

[Nina-Williams]

I use Opera...
The problem is, when I scroll the layout towards the right, the box & the marquee are coming towards the right, like changing the position.
Ex.
First:
http://i37.tinypic.com/2j18x2x.jpg

And look now how it turns when I scroll towards the left...

http://i34.tinypic.com/mhwz2a.jpg

The marquee and the box is coming along too while I want them immovable.

[nikx618]

ohh, i seee. that doesnt happen on my browser. maybe you should just position them correctly for now, until you find someone that know how to fix that. because im not familiar with opera. &i havent really seen that happen before, the moving of the box. but i think you should just reposition it to its place.

[Nina-Williams]

Oh, it's okay.
Umm, just... On the position, where it is absolutely, can I add something else?
Isn't absolutely when it can moving?

[schizo]

Part of the problem is that you're using percents. You should just use left:50% and position with margin-left:#px;. All the percentages you have going on with make things go a little funky.

[Nina-Williams]

Doesn't work...
It happens only with the down scroll for the width...

[schizo]

Well, it should. You must not be doing it right. Did you change every div section so that the only positioning codes were the left:50% and margin-left:#px;?

[Nina-Williams]

Wait, I should do this on this part?


.aboutme {
background-color:transparent;
width: 300px;
position:absolute;
z-index:2;
top:-20%;
margin-top:360px;
left: 33%;
margin-left: -270px;
text-align:justify;
visibility:visible;
font-size: 8pt;
overflow:auto;
height: 250px;}




Or this?

<div class="aboutme">

[schizo]

Change that to this:

CODE

.aboutme {
background-color:transparent;
width: 300px;
position:absolute;
z-index:2;
top:360px;
left: 50%;
margin-left: -270px;
text-align:justify;
visibility:visible;
font-size: 8pt;
overflow:auto;
height: 250px;}

Just may have to adjust the -270 for the margin a bit, but that's about all your positioning sections like that should be set up. Don't change the 50%.

Reason for edit: Use a codebox. :3 - Cristy

[Nina-Williams]

Again the same...
I think it has to do with the .div...

CODE

.div {
background:none;
overflow:auto;
position:absolute;
z-index:2;
top:2;
left: 38%;
margin-left: -380;
text-align:left;
visibility:visible;}

[schizo]

You have to change that one just like I showed you with the left:50% and all that. So it should look like this:

CODE

.div {
background:none;
overflow:auto;
position:absolute;
z-index:2;
top:2;
left: 50%;
margin-left: -380px;
text-align:left;
visibility:visible;}

[Nina-Williams]

I did... But still, the scrolls are joined...
Isn't any code to add in order to 'seperate' them?
I am sorry for the bother, it is just it never had happened before.

[schizo]

Well, everything is aligned correctly now, so at least that problem is fixed.

I don't really understand what you're talking about, though. What's joined?

[Nina-Williams]

It is not about the aligned of the boxes, that is not that hard.
The problem is that the down scroll--When I click on it and it directs at the right, the marquee along with the 'about me' box is coming too, even if I have set that alignement.
It is like the down scroll is moving the marquee and the 'about me' box, like they are joined.
I hope I became understandable.

[schizo]

I know the alignment wasn't what you were asking for help with, but it was messed up.

Nothing is moving for me when I scroll, but I did notice you added percents to other positioning codes again. Keep ALL your sections in the EXACT format I gave you. Do not change the percents. Only change the numbers that have px after them.

[Nina-Williams]

I would, but again it doesn't fit.
When you gave me the .div one with the 50% left, the div moved at the left and there was the background visible from the right side.
Yeah I know, it is weird.

[nikx618]

seems like this problem is complicated. sorry i couldn't help you out.
but gabi there is a genius. haha

[Nina-Williams]

Aww, don't worry.
I was looking some layouts around that are similiar and this for example:

http://www.createblog.com/layouts/preview.php?id=30734

It doesn't has that problem! XD

[schizo]

That's what you change the margin for, not the percent. By changing the 270 or whatever number you have in margin-left:270px;, the layer will move.

Edit:
If you can't get it, I positioned it for you. If you want to make minor adjustments, make sure you only change the number after margin-left, NOT THE PERCENTS.

CODE

<style>div[id="googlebar"],
div div select{
opacity:0;
filter:alpha(opacity=0);
display:none !important;
position:absolute !important;
bottom:2000px !important;}
div div select, div div form, div div input{display:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}

body {
background: url();
background-position:no repeat;
background-color:300070;
line-height: 10px;
cursor: default;
color:333;
scrollbar-arrow-color:FF80E5;
scrollbar-face-color: black;
scrollbar-3dlight-color: black;
scrollbar-darkshadow-color:darkviolet;
scrollbar-shadow-color: black;
scrollbar-highlight-color: black;
scrollbar-track-color: black;
}


.profileInfo, .contactTable, .userProfileURL, .interestsAndDetails, .userProfileDetail, .userProfileNetworking, .userProfileSchool, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .blurbs td.text, .orangetext15, .friendSpace, .friendsComments, table div, .profile, div div table div ul, div div table div { display:none!important; } div table div, table table div, .clearfix, div div table div div { display:block!important; }
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;}
img { border:0;}

.aboutme {
background-color:transparent;
width: 300px;
position:absolute;
z-index:2;
top:200px;
left: 50%;
margin-left: -550px;
text-align:justify;
font-size: 8pt;
overflow:auto;
height: 250px;}

.maiden {
background-color:transparent;
width: 300px;
position:absolute;
z-index:2;
top:710px;
left: 50%;
margin-left: -550px;
text-align:justify;
font-size: 8pt;
overflow:auto;
height: 250px;}

.div {
background:none;
overflow:auto;
position:absolute;
z-index:2;
top:2px;
left: 50%;
margin-left: -600px;
text-align:left; }

div.nav a {
text-align: center;
font: 12px times;
letter-spacing:2;
display:inline;
padding:0px;
margin-right: 5px;
line-height:12px;
}

div.nav a:link,.nav a:visited, div.nav a:active {
color:490E99;
display:inline;
font-style:normal;
background:none;}

div.nav a:hover {
color:ffb0cd;

}

font, td, a, table, td, li, p, div, textarea, li, h1, h2, p, br {
font-family:tahoma;
font-size: 8pt;
color:ffb0cd;
font-weight: normal;
text-decoration: none;
letter-spacing: 0px;
padding: 0px;
line-height: 17px;}

h1 {
font: 9pt tahoma;
text-align: center;

margin:ffb0cd;
border-bottom:1px solid;
border-bottom-color:370080;
font-weight:italic;}

div.title {
font: 15pt "tahoma";
text-align: right;
letter-spacing: 2px;

position:absolute;
z-index:2;
top:0;
margin-top:423px;
left: 50%;
margin-left: -100px;
color:ff328b;
width:400px;}



a:link, a:visited, a:active {color:ff328b; text-decoration: none; font-weight:bold;}
a:hover {cursor: ne-resize; color:000000; text-decoration: none;}


</style>
<table><tr><td><table><tr><td><table><tr><td>

That's only the About Me part. I didn't edit anything in the second half, so just keep it the same.

[Nina-Williams]

It's okay, problem solved!
Thanks!