Adding a DIV overlay to your MySpace page is an excellent way to customize the entire set up. You can use a DIV to customize only a specific portion of your MySpace profile or the entire set up. This is a great way to add your own personal style to your MySpace page. A DIV overlay is a stack of layers on top of each other. This effect is created by entering a CCS code into the About Me Page.

The CCS code you need to enter is:

<style type="text/css">
.main {
position: absolute;
left: 50%;
top: 125px;
width: 800px;
z-index: 1;
margin-left: -400px;
}
</style>

Pay close attention to the top margin and the left margin set up. You can change the top margin entry to place the layout vertically if you wish. The more you reduce the number, the closer the overlay will be to the top of the page. You will need to place the following HTML code into your I’d Like to Meet section if you want to have a choice of colors. The code is:

<div class="main">
<table style="width: 800px;
height: 800px;
cellpadding: 0px;
cellspacing: 0px;
background-color: FFFFFF;">
<tr><td valign="top">
INSERT CONTENT AND ADDITIONAL DIVS
</td></tr></table></div>

Creating the base layer will be accomplished with these two codes. This will help you to build the foundation for additional layers to be added. Make sure you have the entire default layout covered with a solid table. The text needs to include the words “Additional DIVS, content, and images go here. It is essential that you remove any other codes you may have previously inserted before you begin creating the DIV overlay.

There are three additional layers you need to consider adding to your MySpace page.
To create the navigation bar, content area, and the side bar, you will need to add these two codes. The first one needs to be added below the I’d Like to Meet Section:

<div class="main">
<table style="width:800px;
height:800px;
cellpadding:0px;
cellspacing:0px;
background-color:FFFFFF;">
<tr><td valign="top">
<ul class="navigation">
<li><a href="http://">Link1</a></li>
<li><a href="http://">Link2</a></li>
<li><a href="http://">Link3</a></li>
<li><a href="http://">Link4</a></li>
<li><a href="http://">Link5</a></li>
</ul>
<br />
<div class="content">
MAIN CONTENT AREA
</div>
<div class="sidebar">
SIDEBAR CONTENT
</div>
</td></tr></table></div>

The second code you need to add goes In the About Me section:

.navigation{
border-bottom:1px solid;
border:1px solid;
}
.navigation li{
display:inline;
list-style-type:none;
padding:0 20px 0 0;
}
.navigation a:link, .navigation a:visited{
font-family:arial;
font-size:11px;
padding:3px;
}
.navigation a:hover{
text-decoration:none;
padding:3px;
}
.content{
width:525px;
float:left;
padding:5px 5px 5px 7px;
margin:5px 0 0 5px;
border:1px solid;
}
.sidebar{
width:210px;
float:right;
padding:5px 5px 5px 7px;
margin:5px 5px 0 0;
border:1px solid;