mySpace Simple Div Overlay

Creating a Super Simple Div Overlay for your MySpace Page
This div overlay strategy does NOT hide the bottom links, it pushes them down based on the size of you div overlay. MySpace has deleted profiles, for not showing the bottom links.

The Rules, related to what Code myspace filters, have changed. As a result this Div Overlay strategy no longer works.
I highly recommend upgrading to myspace 2.0. For Div Layout (Div Overlay) instructions, for myspace 2.0, go here:
MySpace 2.0 Div Overlay Div Layout Tutorial and Code


TO REMOVE THE PINK/magenta BORDER, set the px width of the myCoreDiv class to 0. It is good to make the last step. Having the border helps with troubleshooting

If you are creating the div for the artist band page, go here instead:
mySpace Simple Div Overlay Band Page

Modified 22 July due to myspace code changes

This is the div overlay we will be building in this tutorial:
Click Here To See the Page
(assuming myspace is actually up, more and more one just gets that expected error message).

This Process Consists of the following steps:
1) Create a Div, Image or Flash File which will make up the "Core" of your profile. This image (or flash file) can have any desired links drawn onto it. It can also contain blank areas to use for any of the following:
- The placement of images which are not drawn onto your core image
- The placement of text boxes
- The placement of videos or other objects
- the placement of Content we import in from the default page, such as blogs, friends, comments, music player, calendar.
- etc ...
This is an ideal strategy if you want to hide everything on your profile and replace it with a single image or flash file.


2) Hide Everything between the top menu area and the bottom links. (This block can be used, to hide the whole myspace page, without using the rest of this tutorial.)

You can choose to keep some content. That content is clearly commented in the code.
You can choose to NOT use all of the lines of code.

3) Create a Div which sits just under the top main menu and just above the bottom Links. We will do this in a way that allows the div to automatically center itself, and the bottom links to move down as much as needed.

4) Place Your Core Image (or Images).

5) Create Links. In this tutorial I do this by placing clear gif images over the locations, on your core image, the links belong.
Later I will cover some other methods of creating links.

6) Place Content from Default Page.


7) Create and Place Additional Content if desired.


STEP 1: Create the Core of your Content
By this I mean a main image, or flash, which you will use as the building block for your profile.
I am not going to show you how to do this. I did mine in PaintShop.
You can use any paint type program, or several online programs, to do this work.
I might provide some links to some later.

For this example we will use this "core" image:
Click Here to See the Image
(I was in the mood to draw circles. It is a good thing I majored in Computer Science instead of Art :-).

STEP 2: Hide Default Page Content
I am choosing to keep my ad banner, search, shortcuts, top menu, and bottom Links.

Place this code in the About Me.

<a class="i" href="views-under-construction.blogspot.com">
MySpace Code and Tutorials by Eileen 
Hide Content for Div Overlay
<style>
.i, div.clearfix i i.i {display:none;}
table table table, 
table table td.text table.blurbs {display:none}

table table td.text table {display:block;}

{! blogs; remove below line to show blogs !}
table table td.text table.latestBlogEntry {display:none}

{! friends; remove below line to show friends !}
table table td.text table.friendSpace {display:none}

{! Comments; remove below line to show comments !}
table table td.text table.friendsComments {display:none}

{! status message; remove below line to show status !}
table table td.text table.extendedNetwork {display:none}

{! remove borders from link images !}
a img {border:none !important}

{! clear space to left !}
table td img {display:none}
{! recover div img !}
table td div img {display:block}

{! get rid of more excess space !}
table td {height:auto !important;}
table table br {display:none}
table div.myCoreDiv table br {display:block;}

</style>
End Hide Code For Div Overlay </a>

If you want to hide any of the content in the top search/menu area see this article:
Style or Remove content in Top Search/Menu area
Step 3: Create a Core Div to put our our Content in, Between the top Menu and the Bottom Links
Place this block in the interests section.

I am going to use the "General" interests Section.

I next paste the below code block into the General Interests Section:

<i class=i>
Hide stuff to prepare for Div Overlay
<a href="http://xiii.us/ms/div-overlay">myspace div overlay code tutorial by Eileen</a>
</i>
<i class=i>!-Begin Block to set Table Level and Open custom Div-!</i>
<i class=i>Close ALL open tables so that our div is not effected by the stuff we have removed </i>
</td></tr></table>
</td></tr></table>
</td></tr></table>

<i class=i>!!Create and size our div.!! </i>
<div class="myCoreDiv" style="width:900px; height:auto !important; border:1px violet solid; position:relative; top:0px; overflow:hidden; z-index:0;">
<i class=i>!!-----START Core Custom CONTENT------!! </i>



<i class="i">!!-------END Core CUSTOM CONTENT--------!!</i>

<i class="i">!!Open same number of tables we closed.!! 
</i>
<table class="myTclass0"><tr><td class="hideIfInInterests">
<table class="i"><tr><td>
<table><tr><td>
<i class="off">!-END Custom Block to Set Table Level and Create Custom Div-!</i>

Set the width to the Width of your own core image. I used 900px.

Step 4: Place Core Image.
Just below where it says "<span class="off">!---START Core CUSTOM CONTENT -----------!</span>"
Insert your image, i.e.

<img src="http://i178.photobucket.com/albums/w275/madeline_fogg/core2_cbg.gif">

Replace my image URL with your own Image URL.

If you have multiple images, list them one after the other. (Assuming they are clean horizontal image slices).
[Do NOT Slice your image unless it is too large for the site which hosts your image.]

Insure that the width of your image is the same as the width defined for the div. I have it set to 900px. If that is not the width of your image, you will need to change the width value.

Step 5: Create Links
The assumption here, is that the links have been drawn onto your core image. I will show how to place other types of links later in this article.

Get Measurements. Since we are measuring from the top left corner of our Main Div (and of our core image) The easiest way to get measurements may be to place a grid over the top of our image.

I have created a grid for this purpose.
I place the following code below the code I placed above (just below the core image).
This code is temporary and we will remove this code when we are finished.

<span class="off">!!!TEMPORARY To Place Grid!!!</span>
<div class="grid" style="width:900px; height:800px; overflow:hidden; position:absolute; top:0px; left:0px; z-index:0; ">
<img src="http://i11.tinypic.com/4pczehk.gif"></div>

The black lines are drawn every 50px and the pink lines every 10px.
My first link is the area with the text "Be My Friend"
I get this:
top:210px; left:120px
I get a size of
width:60px; height:50px
I will create my link by placing a clear gif over this area, and turning the gif into a link. I will use the same clear gif which mySpace uses in their default code.
I get the following:

<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=6221"
style="position:absolute; top:210px; left:120px;">
<img src="http://x.myspace.com/images/clear.gif"  
style="width:60px; height:40px; "></a>

I put in Tom's Friend ID (6221), You will want to use your Friend ID.
I place the code block, inside my core content area, just under the last block I placed here.
[There will be a blue border, red on hover, over the link area. When we are done we will remove these. For now they are good for seeing exactly where our link is.]

I use the same technique to place the rest of my links.

Step 6: Place Custom Content onto Page.
I am going to place an image.
I want my profile Image on my page, but understand that importing it, is not as easy as just adding code to place the image.

I want to place the image top:30; left:270px. Remember, the measurements are from the top left corner of our core div (and our core image).
I use this code to place the image:

<img style="position:absolute; top:25px; left:270px"  src="http://a542.ac-images.myspacecdn.com/images01/100/m_d1f8240914a1aed367f3d960ba407195.gif">

Because the above needs to be INSIDE my div, I place this block inside my Core Div, just under the last item I added.
It needs to go above where it says END Core CUSTOM CONTENT

You can use the same technique to place other types of content.

I notice I didn't include a link for "View All Comments" when I created my core image.
I can easily add the link, providing the needed text with the link.

I pick the following location for my link: top:400px left:640px

For this example I am going to use both a content block and a style block.
My content block goes in my Content section (within my Core Div)
I use the following code:

<a class="myViewCommentLink" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">
View<br>Comments</a>

(note: use your own friend id instead of Tom's).
I put a <br> between the two words in my link, to force a carriage return between the two words.
Notice I assigned a class. I am going to use the class, to create a style block.

Before we create the style block, notice where the link ended up.
It should have ended up just under your core image.
It should have taken on the default style attributes for a link (blue and underlined).
We will use a style block to change the color, font-size, font-family, and location of the link.

I am going to put my style blocks, which go with content I have placed in my core, in my music section.

<style>
a.myViewCommentLink {color:black; font-size:16px; 
font-family:comic sans ms; 
position:absolute; top:400px; left:650px;}
</style>

I did a pretty good job of matching the font style I used for the links I painted directly onto my core image.

Creating An "About" Section
Really this is just going to be a place to write some stuff you want to show up on your Div Overlay.

The easiest way is to just create a div, inside your Core Div, to hold this content.
IF the content is static in size (Not just over time, but across the different browsers and resolutions you expect your page to be viewed in) then you can use absolute positioning, to place the content onto an area on your Core Image.
However, if the content does not size statically, across platforms, this can be an issue. A scroll box can solve this problem.
Or, you can insure you allow enough space, to account for this.

If you want the content to be more dynamic in size; You can instead place the content so that it just falls onto your div, and your div grows as the content expands. This does NOT work with absolute placement.

I will do one of each here.
First I will create a Div, put Text in the Div, and then absolutely position the div in one of the Circles on my Core Image.

[Note: Avoid use of the <p> tag, if you want your content to size consistently across platforms. I have found that <p>, <br> and pt font sizing are the biggest contributors to sizing inconsistency.]

I did use some <span> tags in my text content, so I could format some of the text differently from the other text.

I am going to place this code, inside my Div. This means that I will place it Above the span where I have this END Core CUSTOM CONTENT
I place the following into my Div:

<div class="myText1">
<span class="myTextH">About Red Friend</span>
<br>
(aka Elmo)<br>
<br>
I am one of millions of Elmo Plush Clones.  
I am not the Epileptic laughing Version, nor am I the singing Version.
I am just the Plush simple Version.
My Job is to be Cute, so that little kids will ask their parents to buy me.
I am very good at my Job.  
</div>

Notice I did not include an inline style tag, in my Div Tag.
I could have.
But instead I am going to create a separate Style block to style and place my text div. I am going to place my style blocks, which go with stuff I put into my core div, in my music section. They could go almost anywhere.

<style>
div.myText1 {color:darkred; line-height:25px; 
 font-size:16px; font-family:comic sans ms;
 position:absolute; top:250px; left:300px;
 width:270px; height:270px; 
 }
div.myText1 br {line-height:10px;}
div.myText1 span.myTextH {color:red; font-weight:bold; font-size:20px;}
</style>

7: Import Content from Default Page
IF you did not include the code lines, to hide the content you want to import, this content should currently be BELOW your core div (with the exception of the music player).
Position the Status Box (What was once the Extended Network Box).

I need to insure I do not have the Status Box rendered {display:none}.

table.extendedNetwork {display:none;}

If you have the above line, in your hide code, remove it.
Notice the result, is to place the Status Box at the BOTTOM, underneath your Core.
Notice that the bottom links moved down to accomodate the Box.

Position and Size the Status Box.
I am going to place the Status Box in the Top Left of my Core.
I have drawn a box there for it.
I want to position the box here:
top:20px; left:20px;

I also want to alter the size/shape of the box, to fit in this space.
width:220px; height:150px;

I want to set the font and line-height to fixed px values, so that the text sizes the same across different platforms. (The myspace style sheet uses pt font sizes which have larger px size variation across platforms than px font sizes. Because all my positioning is based on px distance, I want to use this for my font and line-height sizing).

I end up with this block of code:

<style>
{! size and position Status box !}
table.extendedNetwork {position:absolute; 
top:20px; left:20px; width:220px; height:150px;}
table.extendedNetwork, table.extendedNetwork td {border:0px !important;}
table.extendedNetwork span.blacktext12 span {color:darkred; font-size:15px !important; line-height:20px !important;} 
</style>

This is a complete style block.
I am going to place this block at the end of the "About Me" section, just under the style blocks already in that section.

Importing the Friend Space(friendSpace)

IF you included the line of code, to hide the friendSpace, remove the line of code.

table.friendSpace {display:none;}

Now your friendSpace should be visible at the bottom of your profile.
If you have left a space, on your Core, large enough to accomodate the Friend Space, and any expected resizing due to your friends changing their pictures, you can now just move the Friend Space to the desired location.

I am going to move my friend Space to box on the bottom right of my core image.
I still have my grid in place, so it is easy to get the needed measurement:
top:570px; left:30px

<style>
{! position friendSpace !}
table.friendSpace {position:absolute; top:570px; left:30px;}
</style>

I notice my friendSpace is over the edge of my space, slightly, so I want to re-size it to fit better.
If you want to adjust the size of the friendSpace, see this article:
Sizeing and Styling the MySpace Friend Space

Importing the Comments (friendsComments) into the Div Overlay

Insure you do not have the following code line, if you do remove it:

table.friendsComments {display:none;}

Your comments will show up center bottom.
I Highly Recommend leaving the Comments There unless you want to hide your friends.
You can NOT put your comments in a scroll box, or do very much to control their length, UNLESS you either hide your friends or put your friends in the same scroll box.
If you just leave them at the bottom, they will push the bottom links down as they grow. You have the full width of the page to expand them, to accomodate those large images people tend to leave as comments.

However, if you do want to put the Friends Comments in a scroll box see this article:
MySpace Friends Comments In Scroll Box, Place anywhere on Page

Importing the Blogs

If you included the following line of code, Remove it:

table.latestBlogEntry {display:none;}

The blogs should show up at the bottom of your core Image (but above your comments and/or friends if they are still in this space).

You can not put the blogs in a scroll box UNLESS you do one of the following:

- Include the status in the same scroll box
- Hide the Status
- Re-Create the Blog Data (this is actually rather easy)

To locate the blog, to another location on the page, do the following:

<style>
{! position blog !}
table.latestBlogEntry {position:absolute; top:20px; left:470px;}
</style>

8:Clean Up
Remove the blue lines from around our link images. Place this style block at the bottom of the style section (you can really put it anywhere except inside another style block).

<style>
{! remove borders from link images !}
a img {border:none !important}
</style>

Remove the Grid. Find the following block of code, it should be just under the line where you added in your core image:

<span class="off">!!!TEMPORARY To Place Grid!!!</span>
<div class="grid" style="width:900px; height:800px; overflow:hidden; position:absolute; top:0px; left:0px;">
<img src="http://i11.tinypic.com/4pczehk.gif"></div>

Remove it.


Are there any other sections people are interested in showing?

Thank you for Visiting; Have a Nice Day :-)

Queries hitting my other articles which should hit this article:
-How do I Hide whole myspace page. Where can I get codes to hide myspace page. I want to put my friends div layout and Hide Everything (no Generator). how to Put an image as a div overlay. How do I do a simple div overlay. How do I make a div custom or make a div simple myspace. MySpace Div Tutorial. How do I install div overlays to myspace page.
I need code to hide entire profile on myspace for a div overlay. Hide what is behind a div overlay
This section shows how to hide everything on myspace
div over la y how to do one ?

MySpace Div Tutorial

div overlay myspace comments display on.
div overlay does not hide bottom links