Spirited Away

Designer's Comments

Look carefully for specific instructions

Okay, there are a few things that you should know, to not completely wreck anything.
1. Don't delete any sorts of codes you don't know in the ABOUT ME section.
2. DO NOT touch any coding in the about me section.

FOR NEWER DIV USERS:

To Make the Links work
Replace the "xxxxxxxxxxxx"s in the navigation links with your myspace ID (view below to find myspace ID to make the links valid.

To locate your myspace ID, log in to your myspace, click "view my profile", and at the end of the internet adress bar should have numbers.

Example:3423434

All these links are located FIRSTLY in the "Who I'd like to meet"

Also, if you would like get rid of the white transparency over the music player, find the div named "MusicOVerlay

Please, don't remove any credits. That's all I ask.

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 td div div select {position:absolute!important;top:-1000px;}
body div div form {display:none !important;}
table table div form {display:inline !important;}
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
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;}
table div div{visibility:hidden;!important;}
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;}
td td embed, td td object { position: absolute; top: 525px; left: 50%; z-index:5; margin-left:-365px}
td td td embed, td td td object { position: static !important; }
img {border:0px}
div table div div select {
	position:absolute !important;
	top:-500px !important;
	left:-800px !important; 
}

body {
	background-color:ffffff!important;
	background-image:url("http://cbimg6.com/layouts/08/03/03/25933aa.png");
	background-repeat:repeat-y;
	background-position:center center;
	background-attachment:scroll;
}
td, .text, div, input {
	color:959595!important;
	font-family:georgia;
	font-size:10px;
	font-weight: normal;
	text-transform:none;
	letter-spacing: 0px;
} 
.home{
	height:31px; 
	width:90px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933ab.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;
	overflow:hidden}

.home:hover{
	background-position: bottom left;
}
.picturess{
	height:32px; 
	width:75px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933ac.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;}

.picturess:hover{
	background-position: bottom left;
}
.message{
	height:33px; 
	width:74px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933ad.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;}

.message:hover{
	background-position: bottom left;
}
.addme{
	height:32px; 
	width:65px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933ae.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;}

.addme:hover{
	background-position: bottom left;
}
.blog{
	height:33px; 
	width:81px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933af.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;}

.blog:hover{
	background-position: bottom left;
}
.block{
	height:32px; 
	width:46px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933ag.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;
}
.block:hover{
	background-position: bottom left;
}
.comments{
	height:32px; 
	width:87px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933ah.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;
}
.comments:hover{
	background-position: bottom left;
}
.commenthover{
	height:32px; 
	width:79px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933ai.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;}

.commenthover:hover{
	background-position: bottom left;
}
.sweet{
	height:47px; 
	width:50px; 
	background-COLOR:transparent;  
	background: url(http://cbimg6.com/layouts/08/03/03/25933aj.png);
	background-position:top left;
	background-repeat: no-repeat; 
	display: block;}

.sweet:hover{
	background-position: bottom left;
}
a {
	color:ffffff!important;
	font-family:georgia;
	font-size:8pt;
	font-weight: normal;
	letter-spacing:-1px;
	text-transform:uppercase;
	text-decoration:none!important;
}
a:hover {
	color:1ba6bb!important;
	font-family:georgia;
	font-size:8pt;
	font-weight: normal;
	letter-spacing:-1px;
	text-transform:uppercase;
	text-decoration:none!important;}

h1,h3 {
	margin: 0px;
	color: f5989d;
	text-align:right;
	border-bottom:1px solid;
	border-color:d4d4d3;
	font-family:georgia italic;
	font-size: 16pt;
	font-weight: normal;
	letter-spacing: -1px;
	text-transform: lowercase;
	background-color: b7da4f;
	line-height: 23px;
	padding:2px;
	margin-bottom: 5px;
	margin-top: 2px;
	padding-left:2px;
	background-image:url("http://cbimg6.com/layouts/08/03/03/25933ak.jpg");
	background-postion:top left;
	background-repeat:repeat-y;
}
h2 {
	margin: 0px;
	color: e2b998;
	text-align:right;
	border-bottom:1px solid;
	border-color:d4d4d3;
	font-family:georgia italic;
	font-size: 16pt;
	font-weight: normal;
	letter-spacing: -1px;
	text-transform: lowercase;
	background-color: b7da4f;
	line-height: 23px;
	padding:2px;
	margin-bottom: 5px;
	margin-top: 2px;
	padding-left:2px;
	background-image:url("http://cbimg6.com/layouts/08/03/03/25933al.jpg");
	background-postion:top left;
	background-repeat:repeat-y;
}

li {
	color:e6bfa1; 
	line-height:10px;
	font-family:georgia;
	letter-spacing:0px;
	text-align:justify;
}
b{
	color:7accc8;
	font-size:9pt;
	cursor:default;
	line-height:13px;
	letter-spacing:0px;
	font-family:arial;
	text-transform:lowercase;
}
s{
	color:fbc585;
	font-size:9pt;
	cursor:default;
	line-height:9px;
	letter-spacing:-0px;
	font-family:arial;
	text-transform:none;
}
i{
	color:95b763;
	font-size:14px;
	cursor:default;
	line-height:10px;
	letter-spacing:0px;
	font-family:times;
	text-transform:none;
}
u{
	color:c0a087;
	font-size:8pt;
	cursor:default;
	line-height:9px;
	letter-spacing:0px;
	font-family:tahoma;
	text-transform:none;}

.spiritedawaybg {
	background-color:transparent;
	border:0px solid;
	border-color:black;
	width:850px;
	height:342px;
	overflow:hidden;
	position:absolute;
	z-index:1;
	left:50%;
	top:0%;
	margin-left:-427px;
	margin-top:90px;
	text-align:center;
	visibility:visible;
	background-image:url("http://cbimg6.com/layouts/08/03/03/25933am.jpg");
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment:scroll;}

.spiritedawaybgtwo {
	background-color:transparent;
	border:0px solid;
	border-color:black;
	width:850px;
	height:288px;
	overflow:hidden;
	position:absolute;
	z-index:1;
	left:50%;
	top:0%;
	margin-left:-427px;
	margin-top:432px;
	text-align:center;
	visibility:visible;
background-image:url("http://cbimg6.com/layouts/08/03/03/25933an.jpg");
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment:scroll;}

.spiritedawayhome {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:-381px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
}

.spiritedawaypictures {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:-273px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawayaddme {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:3;
	left:50%;
	top:0%;
	margin-left:-176px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawaymessage {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:-86px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawayblog {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:12px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawayblock {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:115px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawaycomments {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:184px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawaycommenthover {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:294px;
	margin-top:160px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawaysweet {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:auto;
	height: auto;
	overflow:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:335px;
	margin-top:111px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawayaboutme {
	background-color: transparent;
	border:0px solid;
	border-color:black;
	width:417px;
	height:auto;
	overflow-x:hidden;
	position:absolute;
	z-index:2;
	left:50%;
	top:0%;
	margin-left:-34px;
	margin-top:338px;
	text-align:justify;
	visibility:visible
}

.spiritedawayextras {
	background-color:transparent;
	border:0px solid;
	border-color:white;
	width:335px;
	height: auto;
	overflow-x:hidden;
	position:absolute; z-index:2;
	left:50%;
	top:0%;
	margin-left:-383px;
	margin-top:580px;
	text-align:justify;
	visibility:visible;
	z-index:5;
}

.spiritedawaycover {
	background-color: ffffff!important;
	border:0px solid;
	border-color:black;
	width:770px;
	height:50px;
	overflow-x:hidden;
	position:absolute;
	z-index:0;
	left:50%;
	top:0%;
	margin-left:-385px;
	margin-top:90px;
	text-align:justify;
	visibility:visible
}

.spiritedawaycover2 {
	background-color: ffffff!important;
	border:0px solid;
	border-color:black;
	width:30px;
	height:95px;
	overflow-x:hidden;
	position:absolute;
	z-index:0;
	left:50%;
	top:0%;
	margin-left:-425px;
	margin-top:0px;
	text-align:justify;
	visibility:visible
}

.spiritedawaycover3 {
	background-color: ffffff!important;
	border:0px solid;
	border-color:black;
	width:30px;
	height:95px;
	overflow-x:hidden;
	position:absolute;
	z-index:0;
	left:50%;
	top:0%;
	margin-left:395px;
	margin-top:0px;
	text-align:justify;
	visibility:visible
}
.musicoverlaytwo {
	background-color:transparent;
	border:0px solid;
	border-color:black;
	width:295px;
	height:51px;
	overflow:hidden;
	position:absolute;
	z-index:7;
	left:50%;
	top:0%;
	margin-left:-365px;
	margin-top:525px;
	text-align:center;
	visibility:visible;
	background-image:url("http://cbimg6.com/layouts/08/03/03/25933ao.jpg");
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment:scroll;}

</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<div class="spiritedawayaboutme">
<h1>about me</h1>

Wooooo.  I am <b>FINALLY</b> done.  This layout takes the cake for taking the longest to code.  Seriously, I i had to juggle so many things.  At one point, I got all my hover css codes, and div codes messed up, and had to start all over because it just got too <i>confusing</i>.  Erm, end rant.  The layout was inspired by <b>Spirited Away</b>.  It's a beautiful movie, you should watch it :)  Okay, so the <u>music</u> player.  "Its not working!"  <b>I KNOW!!</b>  I overlayed the music player with a <s>transparent</s> bg.  Why? It was simply to dark for the layout.  This layout is bright, soft, happy, and airy.  I really tried to keep the opacities as low as I could, without making is seem to white.  The music player originally was supposed to be <b>overlayed</b> with a <u>beautiful</u> image of <i>Chihiro</i>, surrounded with water and bubbles, but that did not look right at all. So I'm sticking with the white overlay.  Please, keep that credit on, thats all I ask. :)
<br>
<br>
<h2>layout css</h2>
<ul>
<li><b>Bold text</b></li>
<li><u>Underlined text</u></li>
<li><s>strike through text</s></li>
<li><i>italicized text</i></li>
</ul>
<br>

<h1>heroes</h1>
This is basically like your <b>heroes</b> section.  Put in whoever you admire :)  Also, keep in mind that you can <i>delete</i> this section if you would like.  This section is <u>removable!</u> You may insert <s>pictures</s> into this, but make sure the images do <u>not</u> exceed <b>314</b> pixels width wise.  I set the <b>overflow</b> to hidden.  So if your images exceed the width of this div, then parts of the image will most likely disappear. 
<br>
© <a href=http://www.msplinks.com/MDFodHRwOi8vbXlzcGFjZS5jb20vYWFuZGpfcHJvZHVjdGlvbno=>credit</a>
<br>
</div>

<div class="spiritedawayextras">
<h1>Extras!</h1>
Woo, Extra space!  You can like, totally add <b>anything</b> in here.  This is a free zone.  Add pictures, movies, youtube videos, whatevarrr.  LOL.
<br> Oh, also.  You can change the comment box if you dislike the current one. :)
<br>

<center>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="xxxxxxxxxxxxxxx" type="hidden"> <textarea name="f_comments" class="color">Comment here.</textarea><br /> <input type="submit" value="submit" class="button"></form>

input.button {width: 330px;height:14px;color:818181;font-size:8pt;letter-spacing: -1px;font-family:georgia italic;background-color:d5d5d5; border-color:000000; border-style:solid; border-width:0px; text-transform:none;text-align:center;font-weight:normal;line-height:7px; letter-spacing:0px; text-transform:lowercase;}</style>
<br>
</center>
</div>

Layout Comments

Showing latest 10 of 41 comments

i love it. :]

By hansloas on Oct 6, 2008 4:11 pm

Gaaaaawd. This is really really beautiful

By trippinonleah on Aug 25, 2008 4:50 pm

Beautiful.
Spirited Away is an amazing movie.

By urlilcupcake on May 22, 2008 9:56 am

o.o
Duuuuude... I friggen love it. ♥

By erubeus on May 21, 2008 2:46 am

hey angeline I'm having trouble with this lay can u help me or can u do it for me?

By asianlover17 on May 8, 2008 6:09 pm

You can search the scripts section for "hide music player"

By IBangBaby on Apr 6, 2008 12:55 pm

how do hide the music player?

By ilyShellyAnn on Apr 5, 2008 1:28 pm

Thank you so much, everyone! :)

By IBangBaby on Mar 11, 2008 2:46 am

I adore this to bits! You're so talented at making a layout feel so complete .. as well as make it interesting! *big fan of your rollovers*

By fainaru on Mar 8, 2008 10:24 pm

It's a great layout and the movie is love. I do agree that it's a bit too light, though the link-hovering might do it a bit of justice. I'm not too sure about the giant space of nothingness, either.

But overall, after a bit of messing around, I'd definitely use it :]

By lemonAIDS on Mar 8, 2008 11:41 am

View all »

Layout Details

Designer	IBangBaby
Submitted on	Mar 3, 2008
Page views	38,812
Favorites	231
Comments	41
Reviewer	mlothepimp
Approved on	Mar 3, 2008

Spirited Away

Designer's Comments

Using This Layout

Update Friend ID

Layout Code

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates