Creating a Div Layout Tutorial

Made by: Nick

Note: some code used in this tutorial is from the group Gen 3 with permission from Steve.

This code goes inside your style sheet. The style sheet should be placed in the "about me" section, it keeps css and html seperate and will mean you can find errors more easily.

.profileInfo, .contactTable, .userProfileURL, .interestsAndDetails, .userProfileDetail, .userProfileSchool, .userProfileNetworking, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .friendSpace, .friendsComments, td div  {display:none;}
div td div, span.text div {display:block;}
div td div div {position:absolute!important; z-index:9; left:50%; margin-left:1px!important;}
div td div {position:absolute!important; z-index:9; left:50%; margin-left:-364px!important;}
.blurbs {visibility:hidden;}
.blurbs span.text, .blurbs span.text * {visibility:visible;}
div table div form {display:none!important}
div table div select {display:none!important}
div table div .mslogo {display:none!important}
div div table div li {display:none!important}
div table div .profile {display:none!important}
table.rail {position:absolute; top:-100px !important;}
div div table div, div.clearfix a, input {display:none;}
div.clearfix table div div {display:block;}

Cover Everything Else - The Background Div


If you are learning a bit by looking at one of our div layouts then you will see they all of them have a background div. The purpose of which is to cover the rest of the profile, and for divs with a background image it is used to display the image.

Place this in your style sheet below the code above. I will explain what it does in the next part of the tutorial, for now all you need to know is it covers the rest of the default profile.

.background {
background-color: transparent;
overflow:auto;
position:absolute;
left:50%;
margin-left:-400px;
top:100px;
visibility:visible;
width:800px; height:400px; }

Now place this code in the "who id like to meet" section.

<div class="background">
</div>

The Breakdown


As you may have noticed we have just created a div. Although it is blank at the moment you may wish to put a background image in it, resize it, put a background color or a border on it, it's all up to you.

I will explain each part of the code below, and also a few other selectors you can use.

.classname {
/* background color - a color code or transparent */
background-color: transparent;

/* background-image - a url */
background-image: url('http://www.domain.com/image.jpg');

/* background position - top, center, left, right, bottom */
background-position: top center;

/* background repeat - no-repeat, repeat-y, repeat-x, repeat */
background-repeat: no-repeat;

/* text color - color name or code */
color: black;

/* makes the div 800px in width, play about with the px size to get it right for you */
width: 800px;

/* makes the div 400px in height, again, play about with the px size to get it right for you */
height: 400px;

/* tells the browser from what point to position the div, absolute, relative, static. More detail in the next section. */
position: absolute;

/* tells the browser to start positioning 100px from the top of the page */
top: 100px;

/* tells the browser to start positioning from the center of the width of the page */
left: 50%;

/* tells the browser to start the div at -400px from the center, I wouldnt use more than this due to people still using 800x600 screen size */
margin-left: -400px;

/* makes the div show up, if this is missing, it wont work */
visibility:visible;

/* makes the div have a 2px white border, can change the width and the color */
border:2px white;
}

Div Positioning Explained


This is the part which people usually get confused about. It is hard to explain and the best way is just to play about with the positioning codes yourself to figure it out, but I will try my best to explain now.

You always position from the top left corner of your div, then set a width and height and it will make the "box" for you. The three main css properties you use will be left: 50%; margin-left: XXpx; and top: XXpx; where XX is a number.

position:absolute;


This property means that you will be positioning from the top left corner of the browser screen. Relative would position from where you put the div in the content, static is the default which means it will sit wherever you place it. On myspace divs we always use position:absolute;

left: 50%;


This property makes the div start point (top left corner) move into the center of the screen (no matter what screen size/resolution the person viewing is using). This is useful as it will center your divs on every single screen, so you know exactly where you are positioning from. I wouldn't advise changing the number, unless your wanting your divs to all be to the left or right, that is up to you.

margin-left: XXpx;


This property moves the div start point by XXpx to the right if the number is positive, left if the number is negative. I would advise only using the range of numbers between -400px and 400px, due to most people using 800x600 screen resolution. So now you have centered a div and moved it either right or left.

top: XXpx;


This property moves the div start point down if positive, up if negative (which you probably won't use). From what I remember its top: 150px; to get the div to sit below the advertisement on myspace, but as I said before the best way is to play about with the numbers and get used to positioning for yourself.

Comments in a Div


This has became much easier now that myspace has given the comments div its own class. So the code is as follows:

Make sure you don't have this code anywhere in your style sheet:

.friendsComments {display: none;}

Then place this in your style sheet positioning it where you want it:

.friendsComments {background-color:transparent;
position: absolute;
left: 50% ;
top: XXpx;
margin-left: XXpx;
width: XXpx;
height: XXpx;
z-index:9;
visibility:visible !important;
overflow:auto;}

Want your top friends to show?


Just simply take this code out of your style sheet:

.friendSpace {display: none;}

then place this in your style sheet positioning it where you want it:

.friendsComments {background-color:transparent;
position: absolute;
left: 50% ;
top: XXpx;
margin-left: XXpx;
width: XXpx;
height: XXpx;
z-index:9;
visibility:visible !important;
overflow:auto;}

Top friends and comments in one div?


If you are wanting the friends and comments to be in the same div for positioning then there is another way to do this.

firstly make sure you do not have the .friendSpace {display:none;} or .friendsComments {display:none;} in your style sheet anywhere.

Now you add this to your style sheet:

.comt {background-color:transparent;
position: absolute;
left: 50% ;
top: XXpx;
margin-left: XXpx;
width: XXpx;
height: XXpx;
z-index:1;
visibility:visible !important;
overflow:auto;}

Then place this at the very bottom of the Who I'd Like to Meet section:

 

</td></tr></table>
</td></tr></table>
<div class="comt">
<table><tr><td>
<table><tr><td>

Feed the Dragon MySpace Tutorials