myspace band page div layout

THIS ARTICLE IS NOT FINISHED, however Steps 0, 1, and 2 are ready for use

This guy has a complete tutorial, and has put a lot of effort into coming up with solutions, related the many changes myspace has made since I wrote my articles.

I have not had a lot of time to study all the changes, so I am going to refer people here:
www.myspaedivs.110mb.com Erick's myspace div Tutorial
OR, if that one doesn't load, use this one:
myspacedivs.net84.net


I am sure I will not finish this article this year :-).

MySpace Div Overlay/Layout for a Band/Artist Page

This is a tutorial for a strategy. It does have some cut/paste code, but it does require that you read the instructions.

USE SAFE MODE this is very important


STEP 0: (OPTIONAL) Apply a Top Banner
I am reserving the Band Members section to place code for a top Banner.
To apply a top banner go here:
Apply Top Banner
Place the code, the above link generates, in the Band Members section.

STEP 1: Hide Everything except the Top ad/menu area; bottom links; music player

You can recover the desired page elements at a later step in the process.

This hide strategy removes clear gifs, padding, and other invisible content which takes up space on the main page.

This hide strategy can be used with this Div Overlay strategy, or with other Div Overlay code.

Place this code in the Bio Area.

<i class=i>!START code in Bio !</i>
<i class=i>!START Style Block For Hiding Elements on Band Page!
<a href="views-under-construction.blogspot.com/2007/04/myspace-band-page-div-layout.html">
MySpace Band Page Div Overlay/Layout Hide Everything</a>
<a href="xiii.us/eGen/mpSkin.php">
MySpace music Player Skins standard and Band</a>
Code Author: Eileen
PLEASE keep the above credits they will NOT show up on your visible page
</i>
<style>
{! fix a centering problem, and clear white space caused by clear gifs !}
div.clearfix i i, .i, table td img {display:none}
td {width:auto;}

{! restore any images displayed inside our div.  You may want to use block instead of inline for some images. !}
table td div.myCoreDiv img, table td div.myCoreDiv table td img, 
table td div.myCoreDiv div img {display:inline;}

{!OPTIONAL restore image on maroon nav bar!}
 a.navbar img {display:block;}

{! removes most content and the space it occupied !}
table table table {display:none}

{! minimize the remaining main page content that can not be removed without effecting the ad and menus !}
table table td { height:0px; margin:0px; padding:0px;}

{! restore custom div. !}
table div.myCoreDiv {display:block;}
{! restore any div inside core div !}
table div.myCoreDiv div {display:block;}

table table br {display:none;}
table table table br {display:block;}

{! OPTIONAL decrease space between bottom and bottom menu, and between bottom menu and cc thing !}
{! does not work in Safari !}
table div br {line-height:4px;}
{! reverse effect on custom div !}
table div.myCoreDiv br {line-height:11px;}

{! OPTIONAL remove default background coloring !}
table table, tr, td {background-color:transparent !important}

{! OPTIONAL remove the blue behind the ad banner  !}
div.profileWidth table, div.profileWidth td, .i {background-color:transparent !important}

{! OPTIONAL remove the maroon background and black underline from music nav bar  !}
div table {background-color:transparent !important}
div table {border-bottom:none !important;}

{! End Style to Hide band page Elements !}

</style>
<i class=i>!End code in Bio !</i>

STEP 2: Insert Structure for Div Core
Even if you are using a div overlay from another page, this step can be used.
This step creates our structure, where we will insert our div content.
Div content can vary.
In my first example I will use what I call a Core Image
Later I will provide examples using floating Divs and Divs created using other commonly used Div content tools designed for use with MySpace.

Place the below code block in the Influences.
It is very important that this code be placed in one of the left side sections and NOT in the bio.

<i class=i>!--START CODE IN Influences --!</i>
<i class=i>
!-Start Div Overlay Content Block-!
<a href="spiff-myspace.blogspot.com">
myspace code tutorials by Eileen</a>
!-Close 3 layers of cell/row/table. This puts our Div ONE table deep.
</i>
</td></tr></table>
</td></tr></table>
</td></tr></table>

<i class=i>!-Create and size our div. We will never close this div. It will close when the containing table closes-! </i> 

<i class=i>!!! MODIFY width to the SAME width as your core (core image or core content) !!!</i>
<i class=i>!!! IF you know the exact height of your content you can change
height:auto to a specific px height.  If you are not Sure, then leave it set to
auto !!!</i>

<div class="myCoreDiv" style="position:relative; top:0px; width:900px; height:auto !important; border:2px magenta dashed;"> 

<i class=i> when DONE editing CHANGE the border:2px to border:0px or change the magenta to the color you want your border.----!</i>

<i class=i> !----START CUSTOM CONTENT----! </i>





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

<i class=i>!-Open 3 layers of table/row/cell-!</i>
<i class=i>!-IF do NOT want any content from my Right side, I can use i instead of L1.  However the music player is logically in this space-!</i>
<table class="L1"  ><tr><td>
<i class=i>!-The below class i hides the remainder of the general table-!</i>
<table class="i"><tr><td>
<table class="i"><tr><td>
<style>.i {display:none}</style>
<i class=i>END CODE IN Influences</i>

STEP 3: INSERT Core Image
IF you are not using a Core Image, you can instead insert another Div here, or even a complete Div overlay, a Sliced Image or Other content.
This Tutorial uses a Core Image strategy.

When you draw your core image, draw in blank areas, to use for any content you want to import into the overlay.

The image I am going to use in this Tutorial can be found here:
Core Image stored on TinyPic

My image is Height:813px Width:913px.

I put the following code line just after the line that says this:
!----START CUSTOM CONTENT----!

<img class="coreImg" src="http://i11.tinypic.com/7xsglg7.gif">

If you have multiple images, do NOT leave a carriage return between them.
You can place a carriage return after you open the image tag, before you put in the src clause. However, between the close of one image tag, and the open of the next, do NOT use a space or carriage return.
example:
<img
src="URL-OF-IMAGE"><img
src="URL-OF-Next-IMAGE">

I recommend using a Single image UNLESS your image is larger than your image host accommodates.

Because our core div is set to width:auto and height:auto, it automatically sizes to accomodate the content we place inside it. Do NOT set width to zero. Set it to either auto OR the width of your core image.
Because of where I placed the code to start the core div, it should automatically center itself. [note: MySpace may make changes to their own code which changes this, but for now, this strategy does automatically center the core div]

I started to write a tool to make it much easier to create the needed links, on top of the core image or core div. I hope to finish it this weekend. It depends on the demands of my real job (the one that pays the bills).