myspace 2.0 div layout (div overlay)

myspace 2.0 Div Layout (div overlay) tutorial

The term div overlay was adopted due to very early versions of this type of layout, being a literal overlay (it sat over the existing page content and covered it).

None of my div layouts examples are really overlays. Instead I remove the existing content that I do not want to show.
I then place what I want to show, on top of my div, or directly under it.

To get clean positioning, and allow the bottom links to move down naturally as my div grew; I would close off three layers of existing tables before creating my div.
This placed my div outside of most of the existing table structure, while causing a large portion of the default page content to fall logically inside my div, making it very easy to position this content in the correct location on my div.

Now that myspace is filtering out code, that closes structures without first opening them, this strategy no longer works.

Rather then come up with a new strategy for myspace 1.0, instead I am recommending that people just upgrade to myspace 2.0.

Below is my preliminary write up for a strategy that works very well with 2.0.

I don't have time to get this article all nicely formatted right now, so I will just publish the steps, I used, as I built my prototype.

===================Start Instructions for Div Layout/Div Overlay in Myspace 2.0 ====

Installing a Div Overlay in 2.0

This is MUCH easier then it was with Version 1, and requires much less code.

Select "Customize Profile" from the Profile menu
Select "Change Layout"
Select the layout, that looks like this:



Next select
"Modules"


Hide all modules that you do not want to show on your div overlay.
do NOT hide your blurbs, we are going to use this for our content, we will hide the blurb headers, in a later step.



In my example I hid all of the sections except the
blurbs
comments
music player
friends


Notice that the top area (where your profile image, contact links, online, mood, status, headline reside) can not be hidden using the "Modules" function.

However, we can hide all of it, or elements within it using CSS.
[note: You may opt to not show some personal information such as age, last login. If you choose this the word "private" will show next to the header for that content. We will hide this later.]

Now drag the blurbs to the top (if they are not already there), placing them just below the top area.

Although the core of our content will go into the blurbs, we will use a higher level element for our positioning.

I will use div.contentMid2. This is the inner most div, which includes all of the content, I want to use, within my div overlay, including the top area, which they now call the "Basic Information Module".

To get an idea of where this div lays, in relation to the other elements, go here:
Page showing div layers, classes, ids of myspace 2.0

It is the thick silver solid border, notice it includes the area with the thick purple border (the top profile info area) AND the thick hot pink dashed bordered area, which contains the rest of the profile content.


This also allows me to use div.contentMid and div.contentMid1, to create interesting background looks, such as framing.

Hidding additional Elements:
We will do this in the css section.
To get to the css section select {} CSS
An edit box will show up, that you can enter CSS in.
Enter only the lines, for the stuff you want to hide.
I HIGHLY recommend including the comment, I provide, with each line. This will make it much easier for you to alter your code later.

Before placing the below code into your css area, please add this:

{! Hiding elements to prepare for Div Layout, code By Eileen !}
{! for terms of use please see xiii.us/tou !}
{! http://xiii.us/tou !}
{! views-under-construction.blogspot.com !}
{! http://xiii.us/ !}
.i {display:none;}

If you use the above code block, none of my credits will show up on your visible myspace page. However, I do require that my credits stay with my code.

To hide the People you may Know (which recently showed up, sometime in March)

{! hide people you may know !}
div#module-1 {display:none;}

To hide the ENTIRE top section use this:

{! Hide Basic Information Module !}
div.basicInfoModule {display:none;}

OR

{! Hide EVERYTHING in the Basic Info Module EXCEPT the profile Image !}
div.basicInfoDetails {display:none;}

Now you can still hide the profile image like this:

{! hide profile image !}
div.photo {display:none}

You may instead choose to hide individual components within this space.

{! Hide Name !}
div.basicInfoDetails h2 {display:none;}

{! Hide contact Links !}
ul.contactLinks {display:none;} 

{! Hide url !}
span.urlLink {display:none;}

{! hide headline OR mood and status !}
div.basicInfoModule blockquote p {display:none;}

{! hide status !}
span.status {display:none;}

{! hide mood !}
span.mood {display:none; }

{! hide the View My: photos Videos !}
div.pageLinks {display:none;}

{! hide only the words "View My:" !}
div.pageLinks em {display:none;}

{! hide pictures link; also hides Video link if Blogs are Hidden !}
div.pageLinks li.odd {display:none;}

{! hide only the blogs link IF blogs are hidden!}
div.pageLinks li.even {display:none;}

{! hide only videos link !}
div.pageLinks li.last {display:none;}

To hide the entire section, that contains the age, gender, location, last login, online icon, use the following

{! hide age, gender, location, last login, online !}
ul.profileUserInfo {display:none;}

The above hides the title to the information as well.
IF you do not want this information viewable, with style turned off, you can hide some of these elements using the edit profile tool. However, this tool only hides the information, it does leave text on your profile, indicating the information is private.


To hide only specific elements within this section:

{! hide Age AND Gender AND the slash between them !}
li.tags {display:none;}

{! hide Age !}
span.age {display:none;}

{! hide gender !}
span.gender {display:none;}

{! hide location !}
li#adr {display:none;}

{! hide last login !}
li.lastlogin {display:none;}

{! hide online icon !}
ul.profileUserInfo li img.ImgOnlineNow {display:none;}

{! hide those images, that show up under the contact links !}
ul.profileUserAlbum {display:none;}

-------------------------
Because I want to import the top area content, into my div overlay, I am instead going to assign it position absolute.
I will add in the actual position values later.

{! default image !}
div.photo {background-color:transparent; position:absolute}
{! display name !}
div.basicInfoDetails h2 {position:absolute;}

ul.contactLinks {position:absolute;}
span.urlLink {position:absolute;}

{! status !}
span.status {position:absolute;}

{! mood !}
span.mood {position:absolute; }

{!  View My: photos Videos !}
div.pageLinks {position:absolute;}

{! hide only the words "View My:" !}
div.pageLinks em {display:none;}

---------------------
Now we will hide the header text in the blurbs section, so we can use that section for our custom content.

{! hide blurbs header !}
div.blurbsModule h3 {display:none;}

{! hide about me header !}
div.blurbAboutMe h4 {display:none;}

{! hide entire meet section !}
div.blurbLikeToMeet {display:none;}

OR choose to use this section and hide only the header

{! hide Meet Header !}
div.blurbLikeToMeet h4 {display:none;}

--------------------
Unless you choose to hide, the entire top area, you likely have a lot of extra space above your blurbs. This is caused by a combination of padding and min-height settings, used for the elements we removed content from, without actually removing the whole element.
--------------------
The next block of code, removes this extra space, placing the blurbs directly under the top menu, and in the very top left corner of div.contentMid2.

There are ways to do something very similar, that use far less code.
One could use a negative top margin OR position:relative, to accomplish very close to the same positioning. But there are likely to be alignment issues, across different browsers and resolutions.

IF your div is a static known size, you could use position:absolute, to place the blurbs exactly into the top corner of the div.contentMid2.
In this case, you would assign a known height to div.contentMid2, so that when the blurbs are positioning absolute, the bottom links do not move up.

However,
I am going to avoid using position absolute for either the blurbs OR div.contentMid2.
I want to allow the bottom links, to naturally move down, based on the size of the content inside our div.

I also want to place the comments at the bottom, and without using a scroll box for them.
I want my bottom links to move down.
For this reason, I can NOT assign a set height to my div.contentMid2.

So I am going to use a block of code, that serves to reverse the style, that is causing this extra space.

{! myspace 2.0 div layout preparation code by Eileen xiii.us/tou !}
{! remove extra space caused by padding, margins, min-height settings !}
div.basicInfoDetails {min-height:0px; padding:0px;}
div.profileDemographics {min-height:0px; padding:0px; height:0px; width:0px;}
div.basicInfoModule {margin:0px;  height:0px; padding:0px; min-height:0px; }
div.basicInfoModule div.moduleBody {height:0px; min-height:0px; margin-top:0px; margin:0px; padding:0px; }
div.contentMid2 {padding:0px;}

{! override default padding in blurbs module !}
div.blurbsModule {margin:0px; padding:0px}
div.blurbsModule div.moduleBody, div.blurbsModule div.moduleMid{padding:0px;}

----------------------------------------------------
Now I need to assign a position statement, to div.contentMid2. The purpose of this statement is to cause this div, to act as the reference point, for the page elements, I want to import into my div.
Because these elements, reside logically inside div.contentMid2, they can be positioned, measuring from the top left corner of this div.
I find this more accurate, cross platform, then trying to position from the top center of the body.

{! myspace 2.0 div layout preparation code by Eileen xiii.us/tou !}
{!!! Cause any absolute positioning, to position relative to div.contentMid2 !!!}
div.contentMid2 {position:relative;}

Now the top left corner of our custom div area, and the top left corner of div.contentMid2, are in exactly the same position.

(I put a magenta border around my core div, so that I can see exactly where its boundaries are. I usually leave this there until I am done building the div. It helps with trouble shooting if things do not place correctly.)


---------------------------------------------


NOTE: IF your content area (core div) is wider then 800px, you will need to add code to accomodate this. The myspace default sizing needs to be overridden at multiple levels.
I am using a width of 920px

{! set width of my core div, and surrounding divs !}
div.wrap, div#row1, div.contentMid2, div.contentMid, div.contentMid1, div.myCoreDiv  {width:920px;}

NOTE: IF you want to keep the top area (ad/search/menu) a width that is less wide then your core div, you will need additional code to accomodate this. Because of the padding the myspace has applied to the google search area, notice I have set it to width LESS then the width I am using for the top area. I could have removed the padding instead, but this looked slightly better.

{! control width of top area, when making the rest of the page wider !}
div.globalWidth, div#leaderboard {width:800px; max-width:800px; }
div#googlebar {width:770px}

----------
At this point, any default page content, that you want to import into your custom div, should be on your visible page, below your blurbs.
[Although your blurbs are hidden, they should be just under the top menu.]

The one exception to this, is any content from the top section (BasicInfo/ProfileInfo area).
If you assigned position:absolute to these elements, they will be sitting, overlapping the top of your blurbs.
Otherwise, they will be above your blurbs.


-----------------------------------------------

NEXT we start building our custom div in our blurbs section.

Go to
Profile -> Edit Profile

Click on "About Me"

In the About Me box start your div

<a class=i href="http://xiii.us/v/">myspace 2.0 Div overlay code/tutorial by Eileen</a>
<div class="myCoreDiv">

put your div content here

</div>

----

Now save

(I put a magenta border around my core div, so that I can see exactly where its boundaries are. I usually leave this there until I am done building the div. It helps with trouble shooting if things do not place correctly.)

You can put the border, around your div, by adding this to the css section:

div.myCoreDiv {border:2px magenta groove}

----

The first kind of div I am going to do is a very simple "Core Image" type div.
For this I use a core image, that I draw using a draw tool (I use paintshop).

I am using the image found here:

http://i287.photobucket.com/albums/ll142/mpskin/0layouts/madeline/madeline-house-front.png

This is what I will call my core image.

I will place the image in my core div.

I now have this code in my about me section:

<div class="myCoreDiv">

<img src="http://i287.photobucket.com/albums/ll142/mpskin/0layouts/madeline/madeline-house-front.png">

</div>

------
Now we need some style for our div. I am going to add a border, you do not have to do this.
I am also going to add a text-align command, to cause my core image to center.

Code I now place in the css area:

div.myCoreDiv {border:3px magenta groove; text-align:center;}

---
Anything you did not hide, from the top area, will now show ON TOP OF your core image. We will place it in its desired location later.
Anything else you did not hide, will show BELOW your core image. We will move these elements onto our div as well.

I have left spaces, on my core image, to place my content.
Now we are going to import the content we want to show, onto the div.

First the Name.

The name is adressed like this:
div.basicInfoDetails h2

I am going to add a top value, and a left value, width, and text-align.
I want the name to center in the top left section of the top left window, on my image.
To insure this, I am going to set the width of the name, to the length of that window section.

width:200px;

I will then add text-align so that the name centers within this space
text-align:center;

Then I will position the element, in the top left corner of the window, measuring from the top left corner of my core div.
top:137px; left:68px;

I end up with this:

div.basicInfoDetails h2 {width:200px; text-align:center; position:absolute; top:137px; left:68px;}

------

Now for the photo
I want the photo to center under the name, so I will use the same concept.
I will size the element that holds the photo, div.photo, the length of the window section, and use text align to cause the photo to center in that space.

div.photo {width:200px; text-align:center; position:absolute; top:160px; left:68px;}

----
Next I will place my contact links.

This will position the contact links:

ul.contactLinks {float:none; position:absolute; top:150px; left:290px; width:150px; height:90px;}

It is important to set the width, as the default width is actually much wider then the links themselves takes up.
I used the above size, because I am about to add a custom contact table, which uses the above size.
To do this, I also need to space my links, within this space.

To get a custom contact table you can go here:
custom contact tables myspace 2.0

This will also allow you to enter a custom image, to use for your contact table.

Make sure you check this
- I have used position absolute to position my contact table

---
Next I will place the pictures and video links (and possibly the blogs link)

div.pageLinks {position:absolute; top:264px; left:290px; width:150px; background-color:mistyrose; color:purple; font-family:comic sans ms; font-size:13px;}
{! position picture link !}
div.pageLinks li.odd {float:left; padding-left:13px;}
{! position video link which may also be odd depending on blogs link !}
div.pageLinks li.last {float:right; padding-right:13px;}

This should be enough for you to get the idea of how to do this, I may add more information later, if I have time, and people want me to
I will probably clean this up when I have more time, so it is easier to read.