CSS Fun With MySpace

A bunch of kids at my work are on myspace, and they spend TONS of time on the website. I spent some time looking at their sites they created, and came to the realization that the basic point is to make something so disgusting and hard to read than your friend. There is no observation of usable design, no understanding the pink text on a green flowery background hurts your eyes, or that if you have 10 videos running at the same time it slows your computer down to a crawl.

For giggles, I signed into my account after not logging in for a year and tried to create a site that was actually normal. My goal was to:

Cover up the top banner
Hide all the top navigation
Replace with my own navigation
Replace the background

I created my own buttons, but it is just one big image. I could of spent more time and actually created hyperlinks, but as it was I spent an hour working on this uselessness and finally woke up and got back to work. In any sense, here is the CSS I threw in my profile:


<div class="assSpace"></div>
<style>
.navbar {visibility:hidden;}
.man {visibility:hidden;color:..003399;}
.assSpace {
   background-color:white;
   background-image:url(http://www.scottelkin.com/images/myspaceheader.jpg);
   background-position:top left;
   margin-left: -363px;
   margin-right: auto;
   width:798px;
   height:150px;
   position:absolute;
   top:0px;
}
html>body .assSpace {
   margin-left:-368px;
}
div table form tr td {background-color:white;}
Table, Td{ background-color:transparent; }
table table table{ border:0px;}
table table table table{ width:auto; }
table table table table, table table table td{ border-style:none; }
body {
   background-image:url(http://www.scottelkin.com/images/myspacebg.gif);
   background-position:top center;
   font:small Verdana,Sans-serif;
   line-height:1.6em;
}
input  {
   font: 11px arial,helvetica, sans-serif;
   font-weight: bold;
   letter-spacing: 1;
   color: gray;
   cursor: pointer;
   cursor: hand;
   background-image : url(http://www.statify.com/images/button.gif);
   background-color : White;
}
</style>

Leave a Reply