HTML/CSS for Myspace Documentation

Especially Oliver... In this there will be examples and safe versions of code for my myspace


  <body style="background-image: (urlhttp://i47.photobucket.com/albums/f188/Roeangeleyes1979/background.jpg);">
    <div style="background-image: url(urlhttp://i47.photobucket.com/albums/f188/Roeangeleyes1979/background.jpg); margin:20px;padding:20px;">
      <center>
        <div style="border:1px solid black;background-color:white;padding:1px;width:478px;">
          <h2>
           Hey,My name is Miranda Jade Hickey

Hickey, yes hickey<br>
spelt the same as the one on your neck<br>
I'm 14, 15 on february 24th.<br>
I'm czechlosivocian (it's exotic..lol), pennsylvania <br>Dutch, Irish(alot!!) and Yurok.<br> 
Fun people that make me laugh<br>
I hate moths<br>they bug me<br>
SARAH= best friend!<br>
KALLI= best friend.. <br>
I'm selfish, I pretty much think about my self before every one else<br>and i take the best before someone else<br>yea, pretty much<br>i have my super nice sharing moments tho..<br>
ice cream mmmm...<br>I Belive im a serious ninja<br>
I have an oustanding love for robots<br>i have yet to master the dance at best<br>I'm a dancer not a fighter<br>i play aggressive name calling<br>yes be affraid..<br>butthole faced vagina!<br>ii don't know
I'm very exciting to be around <br>
I'm also very boucy<br>
<b>RANDOM</b><br>
<br>
I love the creator of socks<br>
He or she hid the ugly things the world created..feet!<br>
Pretty much<br>
friends!!!!!<br>
<br><br>
I like to mud slide<br>..and create sick dance moves and words..<br>I am single, yes..<br>add me i'm cool<br>

MONSTERS!!!!
roxxi's definition of miranda=RANDOM!crunked out gangstahh she is all over the place and it takes a real person to follow her! somtimes when she talks all u have to do is nod and agree. she never talks about one thing at a time. she loves socks. she think pete wentz is shexay she thinks emos are hawt. them and there bonerlicios emo flips and tight pants..psst she likes bulges. very purrty and has a emo___. socks are better than diamonds!! agrees guys are fuckin loser faces.woo the end. 
sarahs' definition
<br>-Mir<br> -random <br>-pointless <br>-has kickass breakdancing moves<br> -helped me find one of my greatest loves..rock <br>-mir is amazing and never fails to make me crack a smile<br>..BONE! <br>
 <a href="http://photobucket.com" target="_blank"><img src="http://i126.photobucket.com/albums/p84/xsana01x/44qo7zk.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>Add me<br>      randa_roo_rooster@hotmail.com

          </h2>
        </div>

Comment Box


   <center>
     <form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"
                                "return lengthCheck(this);">
       <input type="hidden" name="friendID" value="64864434">
       <input type=hidden name=Mytoken value=20041116012729>
       <textarea id="textarea" name="f_comments" cols="50" rows="10"></textarea>
       <br><br>
       <input id="buttons" type="submit" value="Post">
       <input id="buttonr" type="reset" value="Reset">
     </form>
   </center>

Image Maps

My pride and joy


<map name="ContactTable">

<area shape="poly" coords="153,263,127,169,126,50,138,31,164,29,175,48,177,75,186,124,194,171,208,222,205,230,191,256"
alt="Send Message" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=64864434"/>

<area shape="poly" coords="214,0,205,60,206,152,214,220,247,235,273,224,266,83,260,7,254,0,253,0"
alt="Forward Me" href="http://mail.myspace.com/index.cfm?fuseaction=mail.forward&friendID=64864434&f=forwardprofile"/>

<area shape="poly" coords="292,10,313,9,327,20,330,242,293,251,274,223,272,172,277,24"
alt="Rank Me" href="http://collect.myspace.com/index.cfm?fuseaction=RateImage.UserRating&UserID=64864434"/>

<area shape="poly" coords="421,76,402,79,393,91,340,243,358,282,394,291,430,158,437,95,430,84"
alt="Block Me" href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=64864434&hash=MIGvBgorBgEEAYI3WAOHoIGgMIGdBgorBgEEAYI3WAMBoIGOMIGLAgMCAAECAmYDAgIAwAQIkfxfO%2f9sFEAEENV95DzWEgInY1FnKWes3jYEYIAU0diDU3YPosuAcyIDibSe2%2fTcACXLx31HfWpo6JRotcDTxHtkshzBijtAp8TAEB6Hge36naChxtMu500ACuQUzEa3iRXUo721QPQogtk6364fYDOFa1avghELhnAN2Q%3d%3d"/>

<area shape="poly" coords="140,337,119,327,96,298,38,278,6,290,1,310,41,344,93,420,153,488,158,393"
alt="Add To Group" href="http://groups.myspace.com/index.cfm?fuseaction=groups.addtogroup&friendID=64864434"/>
</map>

<img height="512" width="435" border="0" usemap="ContactTable" alt="Rock*Star" title="Contact RockStar" src="http://i53.photobucket.com/albums/g47/rockstar_oliver/hand_contact.jpg"/>

Floating images

Absolute location (position: absolute;) for images is recommended, but relative can also be used.

<style type="text/css">
.classname {
            position: absolute;
           }
</style

<img src="url of image" class="classname">

Sample layout

Sample layout from "Myspacelayouts.US"

<div id="msl"><style type=text/css>
body {
background: FFFFFF  url("http://images.xangsters.com/myspace/14/3329.jpg");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:000000;
scrollbar-track-color: FFFFFF;
scrollbar-shadow-color: EEA4DF;
scrollbar-face-color: C17CCD;
scrollbar-highlight-color:C17CCD;
scrollbar-darkshadow-color:EEA4DF;
scrollbar-3dlight-color:C17CCD;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

/*The actual modules*/  
table table table {border: 1px solid; border-color: 8253AF; background-color: EEA4DF; }

/*sets the default style for the body, table data, list data, divisions and text areas*/
body,table, td, li, p, div, textarea  
{font:normal 10px batang; color:8253AF; font-weight:none; border:0px; text-transform: none; line-height:12px;}

 /*class for the basic font for the page*/
.text {font:normal 10px batang; color:8253AF; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

/*style for the number of comments you have. The actual ..*/  
.redtext{font-family:batang; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

/*style for the number of friends you have.*/  
.redbtext{font-family:batang; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

/*”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style*/  
.orangetext15{font-family: batang; color: 8253AF; font-weight: bold; font-size: 15px; letter-spacing: 0px;}  

/*”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style*/  
.lightbluetext8{font-family:batang; font-size:10px;  color:8253AF; font-weight:none;border:0px; text-transform: uppercase; }

/*”Contacting”, “Interests”, “Details”, and “Schools” title styling*/  
.whitetext12{font-family:batang; font-size:10px;  color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}  

/*”In your extended network” style*/  
.blacktext12{font-family: batang; color: 8253AF; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

/*Stylizing of your name above your picture */  
.nametext{font-family: batang; color: FFFFFF; font-weight: bold; font-size: 30px; letter-spacing: -2px; line-height: 35px;}  

/*date stamp on comments*/  
.blacktext10{font-family:arial; font-size:9px;  color:............; font-weight:none;border:0px; text-transform: uppercase;}  

/*This is how all anchor points will be displayed; anchor points appear before all links.*/  
a{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:batang; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}

/*”View all friends” and “invite more” link style*/  
a.redlink{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}  
a.redlink:link{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase; } 
a.redlink:hover{font-family:batang; font-size:9px;  color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}

/*2 links in very top on the left, and the 13 links above your picture with make the navigation bar*/  
a.navbar{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:link{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:active{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:batang; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}  

/*Default Links*/ 
a:link, a.man{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}  
a:active{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;}  
a:visited{font-family:batang; font-size:9px; color:8253AF; font-weight:none;border:0px; text-transform: uppercase;} 
a:hover{font-family:batang; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;} 

/*bolded words*/
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }
</style><br /><a href="http://www.myspacelayouts.us" style="font-size:12px;text-decoration:underline;line-height:30px">MySpace Layouts</a></div><br/>

HTML/CSS for Myspace Documentation

Contents

Div backgrounds for bulletins and such

Comment Box

Image Maps

Floating images

Sample layout

Navigation menu

Views

Personal tools

Navigation

Search

Tools