Trying to create a very simple myspace page Options

[jensbodal]

I've been trying to read and understand the code and directions posted in the stickies but I am still having difficulty fully comprehending what it all means. I am trying to make a very simple myspace page that simply has a top banner, links below it for Adding friends, messaging, commenting, favorites, blog, etc. All I really need after that is my top friends and comments but it'd be nice to possibly add in the future things such as videos, pictures, etc. An example of the top banner and links I was talking about can be seen on the NBA myspace page: http://www.myspace.com/nbaontnt

Here is what I currently have with my page: http://www.myspace.com/jensbodal

I just followed the directions on the front page and did the code to remove everything but comments and my top friends, then posted another code to customize some fonts which I have not fully played with yet.

About Me Section

CODE

<style type="text/css">
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;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay: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;}
.comments{visibility:visible;width:397px; height:180px;position:absolute;
top:680px;left:415px;
overflow:auto;background-color:transparent;
border:black 0px solid;z-index:2px;}
</style>

I'd Like to Meet Section

CODE

<style type=text/css>

body {
background-color: 22222C;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:F77F00;
scrollbar-track-color: F77F00;
scrollbar-shadow-color: F77F00;
scrollbar-face-color:F77F00;
scrollbar-highlight-color:F77F00;
scrollbar-darkshadow-color:F77F00;
scrollbar-3dlight-color:F77F00;}

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: 22222C; background-color: 22222C; }

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

{class for the basic font for the page}
.text {font:normal 9px arial; color:F77F00; font-weight:none; border:0px; text-transform: none; line-height:12px;}

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

{style for the number of friends you have.}
.redbtext{font-family:arial; font-size:9px; color:F77F00; 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: arial; color: 22222C; font-weight: bold; font-size: 20px; letter-spacing: -2px;}

{”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:arial; font-size:9px; color:22222C; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}
.whitetext12{font-family:arial; font-size:9px; color:22222C; font-weight:none;border:0px; text-transform: uppercase;}

{”In your extended network” style}
.blacktext12{font-family: arial; color: F77F00; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }
.nametext{font-family: arial; color: 22222C; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}

{date stamp on comments}
.blacktext10{font-family:arial; font-size:9px; color:F77F00; 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:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}
a.redlink{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:link{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px; color:F77F00; 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:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}

{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}
a:active{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:F77F00; font-weight:none;border:0px; text-transform: uppercase; }

</style>

From what I understand I will need to create a custom image/banner and then use an image map to create clickable links, or create individual custom buttons for the "Add Friends" "Message" etc then use CSS to align them. Many things are still vague to me as I only understand basic HTML and MySpace seems to be unique in the style of code that it understands. Any help is appreciated, though I will continue to keep reading and searching posts for help.

Thanks!