DIV layout tutorial - version 2008

MySpace Website Tutorials | Submited Feb 19, 2008

Written by: Rev. B.

Notes

Copying and pasting the code without reading the instructions will get you nowhere.
In order to understand what everything does and how to use it without running into a million problems you need to pay attention.

The code

Look below for an explanation on what does what, this is simply the code.

<style style="text/css">

.37182{hide all the tables}
.profileInfo, .extendedNetwork,
.latestBlogEntry, .interestsAndDetails,
.userProfileURL, .friendsComments,
.userProfileNetworking, .userProfileSchool,
.userProfileDetail, .friendSpace,
.contactTable, .orangetext15{display: none}

.37182{make the tables transparent so you can see good}
table, tr, td{background-color: transparent}

.37182{put the music player in the top-left corner}
embed{position: absolute; top: 0; left: 0; width: 40px;}

.37182{make any other embeds stay where you put them}
td td td td embed,
td td td td object{position: static}


.37182{background settings}
body{
background-color: 000;
background-image: url('IMAGE_URL_HERE');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
}

.37182{the first div}
.divOne{position: absolute; left: 50%;
overflow: auto;
top: 160px;
margin-left: -300px;
width: 400px;
height: 400px;
background-color: fff;
z-index: 1;
padding: 3px;
border: 2px solid;
border-color: 00aaff;
}

.37182{bring back the bottom links}
.moveLinks{height:400px;}

</style>

<div class="moveLinks"></div>
<div class="divOne">
Blahh blahhh blah. your stuff shows up here
</div>

Hide Everything

This part:

.37182{hide all the tables}
.profileInfo, .extendedNetwork,
.latestBlogEntry, .interestsAndDetails,
.userProfileURL,
.friendSpace, .friendsComments,
.userProfileNetworking, .userProfileSchool,
.userProfileDetail, .contactTable,
.orangetext15{display: none}

hides the default myspace tables so they aren't sticking out under your pretty layout.
to show your friends/comments take out this line:
.friendSpace, .friendsComments,

Making the tables transparent

That's this part:

.37182{make the tables transparent so you can see good}
table, tr, td{background-color: transparent}

What it does is simply make sure that you don't have a big white block in the middle of your profile. You wouldn't like that, would you?

Moving the music player

That would be this section:

.37182{put the music player in the top-left corner}
embed{position: absolute; top: 0; left: 0; width: 40px;}

it moves the music player up so it doesn't hover above the rest of your profile, it also makes it 40px in width so all it shows is the play/pause button.

.37182{make any other embeds stay where you put them}
td td td td embed,
td td td td object{position: static}

This part uses position:static; so that all your other embeds (widgets, youtubes, so on and so forth) stay static inside your DIV.

Background

That's this part:

.37182{background settings}
body{
background-color: 000;
background-image: url('IMAGE_URL_HERE');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
}

I'll go line by line:
background-color: 000; = black background. Change that to whatever you like.

background-image: url('IMAGE_URL_HERE'); = that puts a background image if you put in the image URL, if not it stays with the background-color. everything mentioned after this is only if you have a background image.

background-repeat: no-repeat; = that means the background-doesn't repeat, setting it to "repeat" will make it tile, "repeat-y" make sit repeat vertically, and "repeat-x" makes it repeat across.

background-attachment: scroll; = the background is static to whatever you have in the background-position section, you could set it to "fixed" and it would stay on the screen, even when you scroll.

background-position: center top; = Simple: it means that the background will be in the center of the page at the top. center can be changed to "left", or "right, top can be changed to "bottom", or "center".

The DIV Box

This part is for the actual DIV box. more info on DIV boxes can be found here.
To add more of these copy and paste the code below inside your style tags and change divOne to something like divTwo, and do the same in the HTML part that starts like <div class="divOne">

.37182{the first div}
.divOne{position: absolute; left: 50%;
overflow: auto;
top: 160px;
margin-left: -300px;
width: 400px;
height: 400px;
background-color: fff;
z-index: 1;
padding: 3px;
border: 2px solid;
border-color: 00aaff;
}

position: absolute; left: 50%; = You need to leave that alone unless you have a good knowledge of CSS, which if you did you prolly wouldn't be reading this.

overflow: auto; = This makes it so that once the content exceeds the specified width and height the box'll have a scroll bar.

top: 160px; = This puts the DIV 160 pixels from the top of the screen. simple, eh?

margin-left: -300px; = that places the DIV 300px from the center of the screen.

width: 400px; = That gives you a DIV box 400 pixels in width.

height: 400px; = That makes the DIV box 500 pixels in height.

background-color: fff; = this gives the DIV a white background. you can take that line out if you want it to be transparent.

z-index: 1; = A DIV with z-index: 2; and the same positioning will cover up a DIV with z-index: 1;

padding: 3px; = That gives 3 pixels of "breathing room" between the border and the DIV content.

border: 2px solid; = This specifies the border width and the border style. In this case 2 pixels, and solid.

border-color: 00aaff; = this, obviously, is what affects the color of the border, it works with the code above since myspace filters the hash symbol. it makes the border this color.

Moving the bottom links

This is the whole reason I wrote this tutorial. Because myspace now deletes people for having the bottom links hidden.
The solution is simple; an empty div with the height set according to the height of the profile.

.37182{bring back the bottom links}
.moveLinks{height:400px;}