This American Life

Myspace Layouts / Div Overlay

Using This Layout

For specific instructions read designer's comments

This is a div overlay layout, html knowledge required!
1. Log into myspace.com
2. Click on Edit Profile (Profile 1.0)
3. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Update Friend ID

Input Friend ID to automagically update code

Layout Code

Copy and paste to About Me

Help

<p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><style type="text/css">
body div table td form {display:none;}
table div table td form {display:inline;}

div table td font {visibility:hidden;}a.navbar:link, a.navbar:visited, a.navbar:active {visibility:visible;}a.navbar:hover {visibility:visible;}
.navigationbar {display:none;}
.redbtext,.redtext{font: Arial; color:white}
.orangetext15, .nametext, div b font font, div font font u, table table table table, table.contacttable {display:none; visibility:hidden;}

.backtrack{position: absolute; width:638px; height: 647px; top:89px; left: 50%; margin-left: -246px; background-color: transparent; z-index: 0; display:inline; visibility:visible;}

.navigation{position: absolute; width: 468px; height:  28px; top: 108px; left: 50%;  margin-left: -79px; background-color: none;  overflow:auto; z-index: 3; display:inline; visibility:visible;}

.iraglass{position: absolute; width: 268px; height:  734px; top: 9px; left: 0%;  margin-left: 0px; background-color: none;  overflow:auto; z-index: 1; display:inline; visibility:visible;}

a.nav1 {display:block; background-position:top right;
height:28px; width:48px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686aa.gif);}
a.nav1:hover {background-position: bottom right;}

a.nav2 {display:block; background-position:top right;
height:28px; width:48px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686ab.gif);}
a.nav2:hover {background-position: bottom right;}

a.nav3 {display:block; background-position:top right;
height:28px; width:47px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686ac.gif);}
a.nav3:hover {background-position: bottom right;}

a.nav4 {display:block; background-position:top right;
height:28px; width:44px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686ad.gif);}
a.nav4:hover {background-position: bottom right;}

a.nav5 {display:block; background-position:top right;
height:28px; width:63px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686ae.gif);}
a.nav5:hover {background-position: bottom right;}

a.nav6 {display:block; background-position:top right;
height:28px; width:74px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686af.gif);}
a.nav6:hover {background-position: bottom right;}

a.nav7 {display:block; background-position:top right;
height:28px; width:78px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686ag.gif);}
a.nav7:hover {background-position: bottom right;}

a.nav8 {display:block; background-position:top right;
height:28px; width:66px;
background-image:url(http://cbimg6.com/layouts/08/01/16/24686ah.gif);}
a.nav8:hover {background-position: bottom right;}

.section1{position: absolute; width: 327px; height:  212px; top: 153px; left: 50%;  margin-left: 56px; background-color: none;  overflow:auto; z-index: 3;

display:inline;visibility:visible;}

.section2{position: absolute; width: 162px; height:  143px; top: 228px; left: 50%;  margin-left: -129px; background-color: none;  overflow:auto; z-index: 3;

display:inline; visibility:visible;}

.peeps{position: absolute; width:472px; height:75px; top: 794px; left: 50%;  margin-left: -91px; background-color: none; z-index: 3; display:inline;visibility:visible;}

.addcom{position: absolute; width:494px; height:75px;
top:405px; left:50%; margin-left:-114px; border: 1px; overflow:auto; z-index: 3; display:inline;visibility:visible;}

.mycomments {position: absolute; width:494px; height:238px;
top:480px; left:50%; margin-left:-114px; border: 1px; overflow:auto; z-index: 3; display:inline;visibility:visible;}

body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}
body div table td form img{display:none!important;}

redtext{color:#000000}
div b font font, div font font u {display:none;}
body {background-color:e6e5e3; background-image: url(http://cbimg6.com/layouts/08/01/16/24686ai.jpg);

background-position: top left; background-repeat:repeat-x}

table, tr, td {background-color: transparent; border: 0px}
Table, Td{ background-color:transparent; }
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, 
a.searchlinkSmall:visited {color:000000; font-weight:normal; font-style:normal;} 
a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.redlink, a.redlink:visited{ color:000000; font-weight:normal; text-

decoration:underline ; font-style:normal;} 
a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.searchlinkSmall:hover,
a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{ color:000000; font-weight:normal; font-style:normal; } 
table, td, div, p {background: transparent;}
a.searchlinkSmall:link, a.searchlinkSmall:visited, a.searchlinkSmall:active, a.searchlinkSmall:hover, a.navbar:link, a.navbar:visited, a.navbar:active,

a.navbar:hover{color: 8C0000;font-size: 2px;}
div table form tr td, a.navbar, font{visibility:hidden!important; height:0px!important;}

span.whitetext12{display:none}

td.text td.text table table table,
td.text td.text table br,
td.text td.text table .orangetext15,
td.text td.text .redlink,
td.text td.text span.btext
{display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
td.text td.text table td {font-size:0pt;}
td.text td.text {height:0;}
td.text td.text table b, td.text td.text table table td {font-size:8pt;}

table table,table table table table,table table{background-color:transparent;width:;border:0px;} 
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}

div table form tr td, a.text, table div div,{visibility:hidden; display:none}
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;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<div class="navigation"><table id="Table_01" width="468" height="28" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
	<a href="http://home.myspace.com/index.cfm?fuseaction=user" width="48" height="28" class="nav1"></a> </td>
		<td>
	<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=friendidhere" width="48" height="28"

class="nav2"></a></td>
		<td>
	<a href="http://vids.myspace.com/index.cfm?fuseaction=vids.showvids&friendID=friendidhere" width="47" height="28" class="nav3"></a></td>
		<td>
	<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=friendidhere" width="44" height="28" class="nav4"></a></td>
		<td>
	<a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=friendidhere" width="63" height="28" class="nav5"></a></td>
		<td>
	<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendid=friendidhere" width="74" height="28" class="nav6"></a></td>
		<td>
	<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=friendidhere" width="78" height="28" class="nav7"></a></td>
		<td>
	<a href="http://protos.createblog.com/layouts/" width="66" height="28" class="nav8"></a></td>
	</tr>
</table></div>

<div class="addcom"><center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="XXXXXXXX" type="hidden">
<textarea name="f_comments" wrap=virtual cols="1" rows="1"  style="background-color: transparent; color:000000; font-family: Arial; font-size: 12px; border: none;  width:450px!important; height:39px!important;" style="overflow:auto;">comment here please</textarea><input type="image" src="http://img69.imageshack.us/img69/4362/submitxd1.jpg"/>
</form></center></div>

<div class="section1"><img src="http://cbimg6.com/layouts/08/01/16/24686al.jpg" width="170" height="170" align="left">Fill this with info about yourself

because I have to to illustrate my point. I really 
don't care about the spelling of this section if you haven;t noticed. Fill this with your interestes such as 
bowling, stamp collecting, underwater basket weaving. Wow, you're a nerd. and now I'll leave because I think 
I've fleshed this out enough. If this keeps going I'm going to have to start quoting Latin or Sherlock Holmes

;)
</div>

<div class="section2">Voilà! In view, a humble vaudevillian veteran, cast vicariously as both victim and 
villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is it vestige of the vox populi, 
now vacant, vanished. However, this valorous visitation of a by-gone vexation, stands vivified, and has vowed 
to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and 
voracious violation of volition. The only verdict is vengeance; a vendetta, held as a votive, not in vain, for 
the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise 
of verbiage veers most verbose so let me simply add that it’s my very good honor to meet you and you may call me V<br><br>nerds......</div>

</center>
</div>

Layout Comments

Showing latest 7 of 7 comments

awesome the organization is cool.

By Marlons on Jan 16, 2008 8:49 pm

haha, this IS amazing.

By futura on Jan 16, 2008 5:48 pm

HAHAHA THIS IS AMAZING.

By joespace on Jan 16, 2008 5:08 pm

i really like how this is set up and the rollovers look good, too. i'd like to see more of this style with a different theme, something that most people can relate to and/or are familiar with.

By miyashu on Jan 16, 2008 4:43 pm