Simple div / overlay tutorial

MySpace Website Tutorials | Submited Nov 16, 2007

Written by: John

I'll start off with a small code that will hide everything on your profile. Theres a bunch of different ways to do this, so this is just one of them. You'll need to hide a lot of sections when creating an overlay.

To hide everything on your profile

.text, .contactTable, .profileInfo, .userProfileURL, .interestsAndDetails, .userProfileDetail, table div div, table div font {display:none;}
table table div div, table table div font {display:inline;}

Next will also go inbetween your style tags, and then I'll tell ya what each element means. I named this layer background but you can change that name to whatever you would like. This is how most of your layers would look.

.background {position:absolute;
left:50%;
margin-left:-400px;
top:125px;
width:800px;
height: 900px;
background-color:black;
overflow:none;}

ok, so that would be the basic background for your whole layer. and this is what each element means

position:absolute;

means that it is positioning this layer exactly where you tell it too.

left:50;

means that it will be from the center of the page, this is so it will look good in all browsers and screen size resolutions, DO NOT CHANGE THIS unless you absolutely KNOW what you're doing. and even then I dont think you would need to be reading this.

margin-left:-400px;

means that it will be -400 pxs from the center of the page (400 pixels to the left). I have it at -400px so it will look good in all screen size resolutions. If someone has the 800 x 600 resolution and views your page, then if you have that number even smaller they will not see whats on the far left side of your page. If you want to move the layer to the right more, increase the number.

top:125px;

means that this layer will be 125 pixels from the top of the page, with this setting, it will cover the existing navbar. If you dont want to cover it then increase the number to move it down some.

width:800px;

means that this layer will be 800 pixels wide, you can change it to whatever number you feel would be necessary.

height: 900px;

means that this layer will be 900 pixels high, you can change this to whatever you would like.

background-color:black;

well yeah. you prolly know what background-color: means but I put this here because you need a background-image or color on your main layer or else everything else behind it will show through (unless you hide everything with the code below.

overflow:none;

this tells the browser not to apply a scrollbar to that layer, if you would like a scrollbar on there just change it to auto instead of none.

Uou can put whatever you would like between the curly brackets {}, but be aware whatever you put there will be applied to what is on that layer. This includes color:color_code; to pick out what color your text will be for that layer.

so now we're going to have to call on that layer and put it within your profile. To do that you would use something like this.

<div class="background">
EVERYTHING ON THAT LAYER
</div>

I will suggest to apply everything you want on your page within that div code or it could alter how your page then looks.

You can then make new divs to put on that layer using the same procedure on naming a class and putting what you would like for that class between the brackets.
--------------------------------------------------------

I wrote this tutorial over 2 years ago, and had it in a tester account on myspace ever since. It was a lot longer then, but the manual submit isnt needed on myspace anymore