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!

[jensbodal]

Ok well I figured out how to at least create the top banner now (not sure if this is exactly what I need to use) using this code

CODE

<style type="text/css">
body table { margin-top:400px; }
body div table, body table table { margin-top:0; }
.topban { width:800px; height:400px; position:absolute; top:0; left:50%; margin:135px 0 0 -400px; }
</style>
<div class="topban"><img src="http://daddydesign.com/MYSPACEfiles/tntNBAplayoffs/top.jpg" /></div>

Two problems are that one the banner doesn't stretch the width of my screen like it does on the NBA profile (I'm just using this image for now until I create my own so I can at least get the format down) and secondly the dates/times do not show with my comments right now.

[jensbodal]

Well I figured out the image map stuff, very very simple. My image looks like crap right now but I spent about 30 seconds on that, just needed something to test things out. I figured out why the banner doesn't span the length and I guess it's since that NBA banner is only so wide then there are other images that surround it to make it look bigger.

There's still a huge gap between the banner and my top friends and I still do not have too good of an idea how to add other stuff to my profile, but hopefully I can figure it out...

[allvanishing]

The NBA banner is wider because it has an background image that fills the extra space around it.

[fixtatik]

i have a short tutorial-type thing on my site here. it's basically going to allow you to do almost exactly what you're describing (with the banner and the links directly below it), but i have the feeling what you're getting at is a div layout. you're going to need the code to completely hide your profile, and then you can move your friends and comments around wherever you'd like them to be.