Div MySpace Overlay Layouts

You are free to use our premade layout codes for your profile, however please leave our link information in the code and on your profile. After all we are hosting the image for you..

Div Overlay Layouts are very advanced! however they look great and very unique. Edit the code to use any background image you want in this type of custom div overlay. There is three sections of code to copy into Interests, I'd Like to Meet and Music on your profile. Change the background image and a few lines by adding your profile ID and your picture link then away you go... just add the text and graphics you want into the 4 div sections.

Top Myspace profiler's may find this div overlay layouts generator helpfull.

PLACE BELOW THIS LINE INTO THE INTERESTS SECTION

</td></tr></table></td></tr></table></td></tr></table></div>
<style>
Instructions

There is three sections of code to go into
Interests
I'd Like to Meet
Music on your profile

You can delete this section from the code if you don't need it, but it won't affect the looks of your profile in any way.

Add any background image you want inplace of www.layoutmyspacecodes.com/graphics/backgrounds/096773586443.gif

Replace YOUR_IMAGE_PICTURE_HERE with your profile picture link

Replace YOUR_ID_HERE with your profile ID

For every div class (.div1, .div2, etc) you will notice a lot of common properties. To move the layer, use:
** margin-top to move it up and down
** margin-left to  move it left and right

margin-left begins from the center of your page. If you set it to 0px, the top left corner of the div will be located in the center of the profile. If you want the layer in the center of your profile take the width of the div, divide it by 2, and multiply it by -1. (In other words, divide it by 2 and make it a negative number.) For example, your div is 400px wide. Give it a margin-left of -200px and the div layer will sit in the middle of the screen. Now, if you want to move it somewhere else, you will have to experiment with the position.

margin-top should be no less than 150px since anything above that may overlap the MySpace advertisment.

The rest is self explanatory, width for width,  height for height, colors and so on.

Style and Format:
The divs will automatically align everything to the center, in order to make the text and pictures aligned to right or left, look for "text-align:center;" and replace center with left, right, or justify.

If you want your comments to flow automatically rather than have them stuffed in a scroll box, look for the comments selector, named .comt {} inside .comt, you will fine overflow:auto; change auto to overflow:none;

To move the personal song player, look for the embed {}

To add a background image to each div (box), add this to your div selector:

background-image:url(URL to background);
background-position:center center;
background-repeat:repeat;
background-attachent:scroll;

Good Luck!

</style>
<style type="text/css">
body {background-color:FFFFFF; background-image:url("http://www.layoutmyspacecodes.com/graphics/backgrounds/096773586443.gif"); background-repeat:repeat; background-position:center center; background-attachment:fixed;}
td, .text, div, input {color:330099 !important;}
a {color:3366CC !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee, a.navbar { visibility:visible !important; }

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed,  .bbzContainer div embed {position:static !important; width:auto; height:auto; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
.bbzComment { You selected to show comments. }
.bbzsc { visibility:hidden; }
.herpe { You selected to show friends. }
.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt .orangetext15{display:none;} .comt td b, .blacktext10 {display:block;} .comt table, .comt td b, .comt .btext, .redlink{position:relative; top:-9px;} .comt {z-index:7;}
.herpe { This is where you control your top8 and comment position. }

.comt {
  visibility: visible; position:absolute; left:50%; top:0%;  overflow:auto; width:450px; height:400px;
  border:2px dashed; border-color:000000 ;
  margin-top:850px; margin-left:-225px; background-color:FFFFFF;
}
.comt span, .comt b {color:330099 !important; visibility:visible !important; display:inline !important; }
.comt table { width:400px !important; }
.comt table table { width:0px !important; }
.blacktext10 { width:350px; display:block; }
.comt a, .comt font, .comt span { visibility:visible !important; }

.div0 {
background-color:FFFFFF; color:330099;
border:2px dashed; border-color:000000 ;
width:800px; height:160px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:150px; text-align:center;
visibility:visible;}

.div1 {
background-color:FFFFFF; color:330099;
border:2px dashed; border-color:000000 ;
width:250px; height:500px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:330px; text-align:center;
visibility:visible;}

.div2 {
background-color:FFFFFF; color:330099;
border:2px dashed; border-color:000000 ;
width:530px; height:240px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-130px; margin-top:330px; text-align:center;
visibility:visible;}

.div3 {
background-color:FFFFFF; color:330099;
border:2px dashed; border-color:000000 ;
width:530px; height:240px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-130px; margin-top:590px; text-align:center;
visibility:visible;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }

.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
.bbzDiv {content:"Overlay Generator beta";}
</style>
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>

PLACE BELOW THIS LINE INTO THE MUSIC SECTION
</td></tr></table></td></tr></table></td></tr></table></div>
<div class="bbzContainer">
<div class="div0">
<font size=5>EDIT HERE top div</font><br><br>
YOU CAN USE ANY BACKGROUND YOU WANT
</div>

<div class="div1">
<font size=5>EDIT HERE left div</font>
<br><br>
<img src="YOUR_IMAGE_PICTURE_HERE">
<br><br>
<a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=YOUR_ID_HERE">Send Message
</a><br><br>
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=YOUR_ID_HERE">Add to Friends</a><br><br>
<a href="http://chat.myspace.com/index.cfm?fuseaction=messenger&strDestinationUserID==YOUR_ID_HERE&sendType=0">Instant Message</a><br><br>
<a href="http://groups.myspace.com/index.cfm?fuseaction=groups.addtogroup&friendID=YOUR_ID_HERE">Add to Group</a><br><br>
<a href="http://mail.myspace.com/index.cfm?fuseaction=mail.forward&friendID=YOUR_ID_HERE&f=forwardprofile">Best Friend</a><br><br>
<a href="http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&friendID=YOUR_ID_HERE&public=0">Add to Favorites</a><br><br>
<a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=YOUR_ID_HERE">Block User</a>
<br><br>
<p align="center" style="margin-top: 0; margin-bottom: 0"><a href="http://www.myspacelayoutsfreecodes.com">myspace layouts</a></p>
PUT YOUR OUN PERSONAL TEXT AND IMAGES HERE
</div>

<div class="div2">
<font size=5>EDIT HERE right 1 div</font>
</div>

<div class="div3">
<font size=5>EDIT HERE right 2 div</font>
</div></div><div class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>

PLACE BELOW THIS LINE INTO THE I'D LIKE TO MEET YOU SECTION
<div class="comt"><table><tbody><tr><td><table>

New layouts are added daily.

Can't find a layout you like? Contact us and we will look into creating some customized layouts. You can contact us by clicking the 'Contact Us' link on the top left of this page.