mySpace Simple Band Div Overlay div overlays
Building a very simple Div Overlay.
This article is being revised based on several myspace changes which have occurred over the last few month
This div overlay strategy does NOT hide the bottom links as most of them do.
WARNING it may be against myspace terms to Hide the Bottom Links. At least one profile has been deleted for this Reason. For this reason I have removed the code, for that option, from this tutorial.
This tutorial is for the Band Page. If you are building an overlay for the Regular page go here:
Standard Simple Div Overlay MySpace
The below strategy does the following:
- Starts with a Picture, where as much content as reasonable is drawn directly into the picture. You can draw in your links, logo, and anything else you want.
You can draw in boxes or leave blank areas to import content from the default page.
- Hides the default page content completely (except the Ad Banner, search/menu areas, bottom links)
You may opt to add additional code to remove the top menus.
If you use this strategy correctly, your div should adjust to accomodate any changes to the top menu area.
(This block can be used, to hide the whole myspace page, without using the rest of this tutorial.)
- Inserts your page image or div
- Shows you how to turn parts of the image into links
- Shows you how to import content from the default myspace page into your div overlay.
- Shows you how to add a custom scroll section to use for whatever.
- Shows you how to create a custom "add comment" box.
This example uses the band page. This concept works for the Regular Page or The Band Page. The exact code I use, is sometimes Band Page specific.
To see the page we will be building, in this tutorial Click Here
(The grid and borders are temporary, and removable).
As you follow this tutorial, You will create your own layout. (But if you like my template, you are welcome to use it.)
Notes:
1) USE SAFE MODE, it really does simplify things. This option is next to the regular "edit page" option.
2) Do NOT count on Preview, it will NOT show you what your page will look like, when using custom style commands. You must submit and view your page to see the results.
3) IF your submit button does NOT show you can still submit. Paste this code into the address bar of your browser:
javascript:document.forms[1].submit()
Then hit return
The above works for both the Preview Button and the Submit Button.
(I tested this tutorial using safe mode, and it did NOT hide my preview or submit button).
Step 1: Create the Core of your overlay as a Single Image
Use a picture editing program (photoshop, paint, paintshop etc ...) to Create a picture of what you want your layout to look like.
Leave space where you want to do any of the following:
- pull in content from the default page.
- create content (Such as Text) in a separate div to place on your page
i.e. You will make a Picture to use as the core of your layout, leaving space on the picture anywhere you want to add content which is not actually part of your picture.
This core picture will become our building block. We can turn parts of this picture into links, and import default page content (or other content) into other parts of the page.
The following is a picture I created using paintshop. This will become the building base (core) for the div overlay I will create in this tutorial.
Click here to see the Image I will be using to build this Page with
Step 2: Remove the default Content from the Main part of the page (This is everything between the top menu area and the bottom links).
-The top and bottom menus, and the search thing, can be removed here, or later if desired. Our div will position automatically if they are removed later.
-We will position the music player at a later step. For now it will just sit below your core.
-We will be able to recover other desired content later. For now remove even the content you want to pull back in. The Code below, to Hide the Content, is designed so that it is easy to import most of the default content back into your div overlay.
Place this code block in your "sounds like" Section. (It can go anywhere that takes style blocks, I use the sounds like section).
Remove as much of the top menu area as desired
To do this see the following article:
MySpace Band Page Top Ad/Search/Menu Area
The First block of code, on that page, will remove ALL of the top area content except the ad banner. You can paste that block of code just under the above block.
Step 3: Close out open tables, Place Div, Re-open tables
We place our Div at a level which is NOT 3 tables deep. The higher we can go in our structure (nested under as few tables as reasonable) the easier it is to avoid conflicts with the default page elements, and our code to remove them. I tested different levels, and found that if I kept the one main table open, and closed the others, it was the easiest to center my div, and have it place neatly between the top area and bottom links.
We will close 2 layers of tables, Place our Div, and then re-open the same number of tables we closed.
I put this code in the Band Members area:
You will be adding your content blocks near the bottom (each one below the previous one, but above the "END CUSTOM CONTENT").
Style blocks, will go in the influences area.
Insert Core Image(s)
Just below where it says "<span class="off">!---START CUSTOM CONTENT -----------!</span>"
Insert your image, i.e.
Do not place a carriage return between the image tags, or you will have a gap between them in IE (not in FireFox).
You may place a carriage return inside the image tag.
Insure that the width of your image is the same as the width defined for the div. I have it set to 800px, so if that is not the width of your image, you will need to change the width value. (It should be in bold above)
Step 4: Get the needed measurements for the placement of links and content on to your page
Use a tool which allows you to determine the location of the elements on your page.
There are several tools available for this.
If you have FF, and have installed the extension which gives you a grid line, use that.
I have created a gif, which has grid lines on it, that you can place over the top of your picture to get measurements.
It is here:http://i11.tinypic.com/4pczehk.gif.
It has a hotpink line every 10 pixels, with a black line every 50 pixels.
To make it easier to get the needed measurements, you can put this grid on top of your image, and leave it there while you build your page, and then remove it when we are done.
To place the grid, so that it lays nicely over your image, place the below code block Just AFTER the link to your core image.
Now we are ready to start getting the needed measurements for our content.
For areas I want to make into links, I need to measure both the top left corner along with the height and width.
(We can no longer do image maps on the music page, as the pound sign is now removed even when not in safe mode.)
I must now resort to placing a clear gif over the top of each images, and making the clear gif the link.
For areas I want to import content into (from the default page) I need to know the coordinates of the top left corner and the height and width.
On my grid, there is a pink line every 10 pixels, with a black line every 50 pixels.
Here are the coordinates and measurements from my sample picture:
Now I am ready to put in my clear Gifs, to Create my Links
I will use the same clear gif that myspace uses in their code.
Place a clear gif in the location of each link, using the image as the link.
For this we use the coordinates we measured, for the locations on our page which will become links.
For each place we want a link:
- Create a link (using the a tag), and make the clear gif image the link content. We do this in the content section.
- Use style to size and position the link. In this example I put these style clauses inside the <a> tag. I could have done the style work in a separate style block.
The absolute position will be relative to the top left corner of our core image NOT of the page. (This is far more accurate).
[note: Initially there will be a blue border (red when the mouse is over it) around each of these links. We will leave that there for now, so we can see exactly where the links are. We will remove them when we are finished.]
I came up with the following:
The above lines go into the same section you put the code for your core image. You put this block just after the other code you have placed in the "YOUR CONTENT GOES HERE" space.
IMPORTING Content From The Default Page (the stuff we hid or moved out of the way)
For this task I will put my style blocks at the end of my "Sounds Like" section, just below where I have my "Hide Everything" style block.
Each block I provide is a complete style block (including open and close tags, and often an outer span section which I use as a comment.)
The music player can be addressed like this:
table table td.text object
OR
table div table td.text object (where the div is our custom div.)
Do NOT use both object and embed when we position this player. This causes double movement (I do not claim to know exactly why, since when re-sizing it IE and FF address it differently).
Because the player is inside my div, I can place it relative to the top corner of my div.
Because this is the only object on my page, I can address it like this:
object {position:absolute; top:200px; left:420px;}
IF you have (or plan to have) other objects, on your page, use the more explicit address. This should be explicit enough:
table table td.text object {position:absolute; top:200px; left:420px;}
(Because I opened the exact same number of tables and cells that I closed, I can address elements, of the default myspace content, using the same depth as I would normally use.)
IF your overlay, has other objects, you may want to put each additional object into its own DIV with its own class name.
If you do not, you will not be able to position each one in a different location.
We can NOT assign a class to the default music player. We do not have any place we can insert code, which will have that effect.
I ended up inserting the following block at the bottom of the "Sounds Like" section.
If you want to resize your player see this:
Band Page Music Player, Sizing, Moving, Styling
(The above gives some re-size values which have the correct aspect ratio)
Importing the Show Section
Next I will import the shows.
It is important that our shows not take up more space then what I have allowed on my overlay.
In the default layout the shows are at this level
table table td.text div table (They are inside a div in the default layout)
They are 3 tables deep so we have rendered them display none.
We can now address this like this:
table div.myCoreDiv table div table
I used the following code block:
IE sometimes has trouble with percent sizing. You may want to change the 40% to a px size (i.e. width:120px}
I put the shows into a box I had drawn on my core image.
If I wanted it to look good, even if my show list was shorter, I could choose to instead put a border around the div which contains the shows, and NOT use a box drawn on my div. For more on styling the shows:
Band Page Shows, Structure and Styling
Importing and Displaying the Comments
The Easiest way to import the comments, is to just unhide them and let them sit at the end. This block will display the comments in their default location (the bottom of the page).
Although the main table for the comments is only 2 tables deep, it has inner tables which are 3 table deep.
IF you have my old hide code you may need to remove the following line:
{!-Comments-!}
table table.friendsComments, table table.friendsComments td.text table {display:none}
For the sake of organization, I put all the code related to my friends and Comments in the Bio Section. (If I want to put them in a scroll box I have to use the bio section for that, so I decided to put the style stuff there as well).
The below block of code had a bug, which has now been fixed. If you used this block prior to Oct, your comments will fall outside of the div (in FF only). Please replace with the new block below.
Add this block to the Bio Section (which should be empty):
IF you gave your outer div, a set height (instead of using height:auto) and it is not long enough to accomodate the comments, your comments will not display correctly. FF and IE will treat this situation differently.
So insure your div is either set to height:auto, or has enough height to accomodate the comments.
(I will cover putting the Comments and/or Friends into a scroll box later)
Display Friends on Your Div Overlay
Place this code block, in your Bio Section, just under the last block we placed there:
If you want to position your friends and/or Comments, and NOT use a scroll box, insure you have enough space to accomodate them. There are our choices:
1) Keep Comments at the bottom, set our main div to height:auto, and allow the comments to grow as needed.
2) NOT display our friends, and put our comments in a scroll box, and place the box anywhere on our div
3) Put both our Friends AND Comments in a scroll box, and place it anywhere on our div.
There is NO reasonable way to put the comments in their own scroll box, and display the friends, outside that scroll box, without a custom friend Space.
There is a way to put only the friends in a scroll box, and leave the comments outside the scroll box. (ask if you are interested).
The below scroll box will include your friends (if you have rendered them displayed) AND your comments (if you have rendered them displayed). If your friends are still hidden, then only your comments will end up in this scroll box.
I will place this scroll box the empty box on the left bottom of my div.
To do this I place this code at the end of the bio section:
Importing the Friend Space, into your Div
Click Here: Styling and Sizing the mySpace friend Space
Blogs
I did not put a space on my template for the blogs.
However, I later decided to import them. I found some room.
(I am actually thinking, that from a design perspective, maybe I should put the blogs where I have the friends and Comments, and then put the friends and comments at the bottom, side by side.)
Blogs are not static in size. They do not size the same in IE and FF
you can improve this by hard-setting the line-heights and font size and carriage return (br) heights.
Use px values not pt values for the most consistency across platforms.
Leave room, at the bottom, for expected growth OR place at the bottom of your overlay and insure the height (of your main outer div) is set to auto.
The following code block will make the blogs visible, and position them on the page.
I also added in some styling for sizing consistency, coloring, and width.
Removing the border around the links
Add the following block.
Adding a Custom Comment Input Box
Put the following code block inside your Content area. (This is the area between the "START CUSTOM CONTENT HERE" and "END CUSTOM CONTENT HERE") in the Band Members area. Change Tom's friend id (6221) to your friend id:
Next Style the Box to Meet your specific needs.
You will want to modify the below block to suit your page. Put this style block in the "Band Members" section, near the top, under where it says "START Custom Content Style Section"
Creating a Custom Scroll Space
(This is why I left the "sounds like" section empty.)
I am going to place this block in the "sounds like" or "influences" section.
If you left one of these sections empty, it will be less cluttered.
This will make it easy to find this block, to update it.
You can either allow this to fall naturally underneath your "core", or you can use absolute placement to position it anywhere on your div.
The below example uses absolute positioning.
(I do not have this block on my sample page).
This article is being revised based on several myspace changes which have occurred over the last few month
This div overlay strategy does NOT hide the bottom links as most of them do.
WARNING it may be against myspace terms to Hide the Bottom Links. At least one profile has been deleted for this Reason. For this reason I have removed the code, for that option, from this tutorial.
This tutorial is for the Band Page. If you are building an overlay for the Regular page go here:
Standard Simple Div Overlay MySpace
The below strategy does the following:
- Starts with a Picture, where as much content as reasonable is drawn directly into the picture. You can draw in your links, logo, and anything else you want.
You can draw in boxes or leave blank areas to import content from the default page.
- Hides the default page content completely (except the Ad Banner, search/menu areas, bottom links)
You may opt to add additional code to remove the top menus.
If you use this strategy correctly, your div should adjust to accomodate any changes to the top menu area.
(This block can be used, to hide the whole myspace page, without using the rest of this tutorial.)
- Inserts your page image or div
- Shows you how to turn parts of the image into links
- Shows you how to import content from the default myspace page into your div overlay.
- Shows you how to add a custom scroll section to use for whatever.
- Shows you how to create a custom "add comment" box.
This example uses the band page. This concept works for the Regular Page or The Band Page. The exact code I use, is sometimes Band Page specific.
To see the page we will be building, in this tutorial Click Here
(The grid and borders are temporary, and removable).
As you follow this tutorial, You will create your own layout. (But if you like my template, you are welcome to use it.)
Notes:
1) USE SAFE MODE, it really does simplify things. This option is next to the regular "edit page" option.
2) Do NOT count on Preview, it will NOT show you what your page will look like, when using custom style commands. You must submit and view your page to see the results.
3) IF your submit button does NOT show you can still submit. Paste this code into the address bar of your browser:
javascript:document.forms[1].submit()
Then hit return
The above works for both the Preview Button and the Submit Button.
(I tested this tutorial using safe mode, and it did NOT hide my preview or submit button).
Step 1: Create the Core of your overlay as a Single Image
Use a picture editing program (photoshop, paint, paintshop etc ...) to Create a picture of what you want your layout to look like.
Leave space where you want to do any of the following:
- pull in content from the default page.
- create content (Such as Text) in a separate div to place on your page
i.e. You will make a Picture to use as the core of your layout, leaving space on the picture anywhere you want to add content which is not actually part of your picture.
This core picture will become our building block. We can turn parts of this picture into links, and import default page content (or other content) into other parts of the page.
The following is a picture I created using paintshop. This will become the building base (core) for the div overlay I will create in this tutorial.
Click here to see the Image I will be using to build this Page with
Step 2: Remove the default Content from the Main part of the page (This is everything between the top menu area and the bottom links).
-The top and bottom menus, and the search thing, can be removed here, or later if desired. Our div will position automatically if they are removed later.
-We will position the music player at a later step. For now it will just sit below your core.
-We will be able to recover other desired content later. For now remove even the content you want to pull back in. The Code below, to Hide the Content, is designed so that it is easy to import most of the default content back into your div overlay.
Place this code block in your "sounds like" Section. (It can go anywhere that takes style blocks, I use the sounds like section).
<i class=i>!START code in Influences !</i>
<i class=i>!START Style Block For Hiding Elements on Band Page!
<a href="http://xiii.us/ms/band-hide-all">MySpace Band Hide Everything</a>
</i>
<style>
.i, div.clearfix i i i {display:none}
{! fix a centering problem, and clear white space caused by clear gifs !}
td {width:auto;}
table td img {display:none;}
{! 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, we could use a.navbar img!}
div table td 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 my div. !}
table div.myCoreDiv {display:block;}
{! restore div with Comments !}
table div.myCoreDiv div.myDclassFC {display:block;}
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;}
{! remove default background coloring !}
table table, tr, td {background-color:transparent !important}
{! ONLY if you want to remove the blue behind the ad banner AND the maroon !}
div.profileWidth table, div.profileWidth td {background-color:transparent !important}
div table {border-bottom:none !important;}
{! ADDITIONAL STYLE BLOCKS CAN GO HERE !}
</style>
<i class=i>!End code in Influences !</i>
Remove as much of the top menu area as desired
To do this see the following article:
MySpace Band Page Top Ad/Search/Menu Area
The First block of code, on that page, will remove ALL of the top area content except the ad banner. You can paste that block of code just under the above block.
Step 3: Close out open tables, Place Div, Re-open tables
We place our Div at a level which is NOT 3 tables deep. The higher we can go in our structure (nested under as few tables as reasonable) the easier it is to avoid conflicts with the default page elements, and our code to remove them. I tested different levels, and found that if I kept the one main table open, and closed the others, it was the easiest to center my div, and have it place neatly between the top area and bottom links.
We will close 2 layers of tables, Place our Div, and then re-open the same number of tables we closed.
I put this code in the Band Members area:
<i class=i>!--START CODE IN BAND MEMBERS --!</i>
<i class=i>
!-Start Div Overlay Content Block-!
<a href="http://views-under-construction.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 image !!!</i>
<div class="myCoreDiv" style="position:relative; top:0px; width:900px; height:auto; border:2px magenta solid;">
<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 BLOCK 1----!</i>
<i class=i> !----END CUSTOM CONTENT BLOCK 1----!</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-!</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 BAND MEMBERS</i>
You will be adding your content blocks near the bottom (each one below the previous one, but above the "END CUSTOM CONTENT").
Style blocks, will go in the influences area.
Insert Core Image(s)
Just below where it says "<span class="off">!---START CUSTOM CONTENT -----------!</span>"
Insert your image, i.e.
<img src="URL OF YOUR IMAGE"> Do not place a carriage return between the image tags, or you will have a gap between them in IE (not in FireFox).
You may place a carriage return inside the image tag.
Insure that the width of your image is the same as the width defined for the div. I have it set to 800px, so if that is not the width of your image, you will need to change the width value. (It should be in bold above)
Step 4: Get the needed measurements for the placement of links and content on to your page
Use a tool which allows you to determine the location of the elements on your page.
There are several tools available for this.
If you have FF, and have installed the extension which gives you a grid line, use that.
I have created a gif, which has grid lines on it, that you can place over the top of your picture to get measurements.
It is here:http://i11.tinypic.com/4pczehk.gif.
It has a hotpink line every 10 pixels, with a black line every 50 pixels.
To make it easier to get the needed measurements, you can put this grid on top of your image, and leave it there while you build your page, and then remove it when we are done.
To place the grid, so that it lays nicely over your image, place the below code block Just AFTER the link to your core image.
<img class="grid" src="http://i11.tinypic.com/4pczehk.gif" style="position:absolute; top:0px; left:0px;">
Now we are ready to start getting the needed measurements for our content.
For areas I want to make into links, I need to measure both the top left corner along with the height and width.
(We can no longer do image maps on the music page, as the pound sign is now removed even when not in safe mode.)
I must now resort to placing a clear gif over the top of each images, and making the clear gif the link.
For areas I want to import content into (from the default page) I need to know the coordinates of the top left corner and the height and width.
On my grid, there is a pink line every 10 pixels, with a black line every 50 pixels.
Here are the coordinates and measurements from my sample picture:
| X,Y of top Left | width, height | |
| Add button | 290,100 | 100,40 |
| Block button | 290,180 | 100,40 |
| Message Button | 290,260 | 100,40 |
| View Friends | 410,590 | 130,90 |
| View Comments | 580,590 | 130,90 |
| Add Comment | 740,590 | 130,90 |
| Areas I want to Pull Content Into | ||
| Music Player | 420, 200 | |
| Shows | 420, 20 | |
| Comments | 20, 410 | |
Now I am ready to put in my clear Gifs, to Create my Links
I will use the same clear gif that myspace uses in their code.
Place a clear gif in the location of each link, using the image as the link.
For this we use the coordinates we measured, for the locations on our page which will become links.
For each place we want a link:
- Create a link (using the a tag), and make the clear gif image the link content. We do this in the content section.
- Use style to size and position the link. In this example I put these style clauses inside the <a> tag. I could have done the style work in a separate style block.
The absolute position will be relative to the top left corner of our core image NOT of the page. (This is far more accurate).
[note: Initially there will be a blue border (red when the mouse is over it) around each of these links. We will leave that there for now, so we can see exactly where the links are. We will remove them when we are finished.]
I came up with the following:
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=211130975"
style="position:absolute; top:100px; left:290px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:90px; height:40px;"></a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=21130975"
style="position:absolute; top:180px; left:290px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:90px; height:40px;"></a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=mail.message&friendID=211130975"
style="position:absolute; top:262px; left:290px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:90px; height:40px;"></a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=211130975"
style="position:absolute; top:590px; left:414px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:135px; height:90px;"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=211130975"
style="position:absolute; top:590px; left:580px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:135px; height:90px;"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=211130975"
style="position:absolute; top:590px; left:740px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:135px; height:90px; "></a>
The above lines go into the same section you put the code for your core image. You put this block just after the other code you have placed in the "YOUR CONTENT GOES HERE" space.
IMPORTING Content From The Default Page (the stuff we hid or moved out of the way)
For this task I will put my style blocks at the end of my "Sounds Like" section, just below where I have my "Hide Everything" style block.
Each block I provide is a complete style block (including open and close tags, and often an outer span section which I use as a comment.)
The music player can be addressed like this:
table table td.text object
OR
table div table td.text object (where the div is our custom div.)
Do NOT use both object and embed when we position this player. This causes double movement (I do not claim to know exactly why, since when re-sizing it IE and FF address it differently).
Because the player is inside my div, I can place it relative to the top corner of my div.
Because this is the only object on my page, I can address it like this:
object {position:absolute; top:200px; left:420px;}
IF you have (or plan to have) other objects, on your page, use the more explicit address. This should be explicit enough:
table table td.text object {position:absolute; top:200px; left:420px;}
(Because I opened the exact same number of tables and cells that I closed, I can address elements, of the default myspace content, using the same depth as I would normally use.)
IF your overlay, has other objects, you may want to put each additional object into its own DIV with its own class name.
If you do not, you will not be able to position each one in a different location.
We can NOT assign a class to the default music player. We do not have any place we can insert code, which will have that effect.
I ended up inserting the following block at the bottom of the "Sounds Like" section.
<style>
{!-music player-!}
table table td.text object {position:absolute !important; top:196px !important; left:420px}
</style>If you want to resize your player see this:
Band Page Music Player, Sizing, Moving, Styling
(The above gives some re-size values which have the correct aspect ratio)
Importing the Show Section
Next I will import the shows.
It is important that our shows not take up more space then what I have allowed on my overlay.
In the default layout the shows are at this level
table table td.text div table (They are inside a div in the default layout)
They are 3 tables deep so we have rendered them display none.
We can now address this like this:
table div.myCoreDiv table div table
I used the following code block:
<style>
{!- shows -!}
table table td.text div {position:absolute; width:440px; height:130px; overflow:scroll; overflow-x:hidden; top:30px; left:415px;}
{!- UnDo effect on Div in Friend and Comment spaces -!}
table table td.text table div {position:static; height:auto; overflow:hidden}
table table td.text div.commentlinks {display:none;}
table table td.text div table {display:block}
{!-fix column width of shows-!}
{!-set below px width to the width of your shows space-!}
table table td.text div table td, table table td.text div table {width:425px;}
table table td.text div table table {width:100% !important}
{!-adjust below value as needed-!}
table table td.text div table table table {width:40% !important}
</style>
IE sometimes has trouble with percent sizing. You may want to change the 40% to a px size (i.e. width:120px}
I put the shows into a box I had drawn on my core image.
If I wanted it to look good, even if my show list was shorter, I could choose to instead put a border around the div which contains the shows, and NOT use a box drawn on my div. For more on styling the shows:
Band Page Shows, Structure and Styling
Importing and Displaying the Comments
The Easiest way to import the comments, is to just unhide them and let them sit at the end. This block will display the comments in their default location (the bottom of the page).
Although the main table for the comments is only 2 tables deep, it has inner tables which are 3 table deep.
IF you have my old hide code you may need to remove the following line:
{!-Comments-!}
table table.friendsComments, table table.friendsComments td.text table {display:none}
For the sake of organization, I put all the code related to my friends and Comments in the Bio Section. (If I want to put them in a scroll box I have to use the bio section for that, so I decided to put the style stuff there as well).
The below block of code had a bug, which has now been fixed. If you used this block prior to Oct, your comments will fall outside of the div (in FF only). Please replace with the new block below.
Add this block to the Bio Section (which should be empty):
<span class="off">!-Display Comments-!</span><style>
table table.friendsComments td.text table,
table table.friendsComments {display:block}
</style>
<span class="off">!-END Display Comments-!</span>
IF you gave your outer div, a set height (instead of using height:auto) and it is not long enough to accomodate the comments, your comments will not display correctly. FF and IE will treat this situation differently.
So insure your div is either set to height:auto, or has enough height to accomodate the comments.
(I will cover putting the Comments and/or Friends into a scroll box later)
Display Friends on Your Div Overlay
Place this code block, in your Bio Section, just under the last block we placed there:
<span class="off">!-Display Friends-!</span>
<style>
{! display friends !}
table table td.text table.friendSpace,
table table td.text table.friendSpace td.text table {display:block}
{! restore width in FireFox and Opera; assumes default friendSpace width !}
table table td.text table.friendSpace td.text table table td {width:107px !important}
{! view friend link; override positioning for shows !}
table table td.text table.friendSpace td.text table div {position:static !important; height:auto !important;}
</style>
<span class="off">!-END Display Friends-!</span>
If you want to position your friends and/or Comments, and NOT use a scroll box, insure you have enough space to accomodate them. There are our choices:
1) Keep Comments at the bottom, set our main div to height:auto, and allow the comments to grow as needed.
2) NOT display our friends, and put our comments in a scroll box, and place the box anywhere on our div
3) Put both our Friends AND Comments in a scroll box, and place it anywhere on our div.
There is NO reasonable way to put the comments in their own scroll box, and display the friends, outside that scroll box, without a custom friend Space.
There is a way to put only the friends in a scroll box, and leave the comments outside the scroll box. (ask if you are interested).
The below scroll box will include your friends (if you have rendered them displayed) AND your comments (if you have rendered them displayed). If your friends are still hidden, then only your comments will end up in this scroll box.
I will place this scroll box the empty box on the left bottom of my div.
To do this I place this code at the end of the bio section:
<span
class="off">START Block to Put Comments in Div</span>
<style>
{!- comment div style stuff -!}
div.myDclassFC {width:360px; height:260px; overflow:scroll; overflow-x:hidden;}
div.myDclassFC {position:absolute; top: 410px; left:20px;}
table.friendsComments, table.friendsComments td, table.friendsComments table, table.friendsComments table td {width:100% !important}
table.friendsComments table table td {width:auto !important; border:1px silver solid; border-collapse:collapse}
{!- OPTIONAL: size control to keep comment images small -!}
table.friendsComments img {width:230px !important;}
table.friendsComments a img {width:70px !important;}
table.friendsComments .ImgOnlineNow {width:40px !important;}
</style>
</td></tr></table></td></tr></table></td></tr></table>
<div class="myDclassFC" style="border:0px purple dashed">
<table class="myTclassFC"><tr><td class="text">
<table class="off"><tr><td>
<table class="off"><tr><td>
<span class="off">END Block to Put Comments in Div</span>
Importing the Friend Space, into your Div
Click Here: Styling and Sizing the mySpace friend Space
Blogs
I did not put a space on my template for the blogs.
However, I later decided to import them. I found some room.
(I am actually thinking, that from a design perspective, maybe I should put the blogs where I have the friends and Comments, and then put the friends and comments at the bottom, side by side.)
Blogs are not static in size. They do not size the same in IE and FF
you can improve this by hard-setting the line-heights and font size and carriage return (br) heights.
Use px values not pt values for the most consistency across platforms.
Leave room, at the bottom, for expected growth OR place at the bottom of your overlay and insure the height (of your main outer div) is set to auto.
The following code block will make the blogs visible, and position them on the page.
I also added in some styling for sizing consistency, coloring, and width.
<span class="off">!-START Import for Display; blogs into Div Overlay -!
</span>
<style>
{!-display and position blogs-!}
table table table.latestBlogEntry {display:block;}
table table table.latestBlogEntry {position:absolute; top:313px; left:15px;}
{! size to the width you have avaialble -!}
table table td.text table.latestBlogEntry, table table td.text table.latestBlogEntry td {width:370px !important}
{!-sizing for consistancy-!}
table.latestBlogEntry td {font-size:11px; line-height:13px; height:15px; padding:0px; margin:0px;}
table.latestBlogEntry br {line-height:11px;}
{!-coloring and borders for blogs-!}
table.latestBlogEntry {background-color:HotPink !important}
table.latestBlogEntry td {background-color:LavenderBlush !important; }
table.latestBlogEntry span.btext {color:purple;}
table.latestBlogEntry a {color:Chocolate; font-size:10px; }
</style>
<span class="off">!-END Import for Display; blogs into Div Overlay -!
</span>
Removing the border around the links
Add the following block.
<style>
a img {border:none !important}
</style> Adding a Custom Comment Input Box
Put the following code block inside your Content area. (This is the area between the "START CUSTOM CONTENT HERE" and "END CUSTOM CONTENT HERE") in the Band Members area. Change Tom's friend id (6221) to your friend id:
<span class="off">!-START COMMENT FORM-!</span>
<div class="myCommentFormD">
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input name="friendID" value="6221" type="hidden"/>
<textarea name="f_comments" class="myFormBox"></textarea>
<center>
<input type="submit" value="Post Comment" class="myPostCommentButton"/>
<input type="reset" value="Clear" class="myClearButton"/>
</center>
</form>
</div>
<span class="off">!-END COMMENT FORM-!</span>
Next Style the Box to Meet your specific needs.
You will want to modify the below block to suit your page. Put this style block in the "Band Members" section, near the top, under where it says "START Custom Content Style Section"
<span class="off">!Start style block to style Comment Form!</span>
<style>
div.myCommentFormD form {display:block !important;}
{!-change px values to position form on your layout-!}
div.myCommentFormD {position:absolute; top:0px; left:0px;}
{!-change px values or font attributes to size and style your form-!}
textarea.myFormBox {width:384px; height:105px; color:000000; font-size:9px; font-family:comic sans ms;
background-color:transparent;
border:1px silver solid;}
{!-style buttons or remove below line for default button style-!}
div.myCommentFormD input {width:110px; height:22px; border:2px brown inset; background-color:transparent}
</style>
<span class="off">!END style block to style Comment Form!</span>
Creating a Custom Scroll Space
(This is why I left the "sounds like" section empty.)
I am going to place this block in the "sounds like" or "influences" section.
If you left one of these sections empty, it will be less cluttered.
This will make it easy to find this block, to update it.
You can either allow this to fall naturally underneath your "core", or you can use absolute placement to position it anywhere on your div.
The below example uses absolute positioning.
(I do not have this block on my sample page).
<span class="off">!-Start Custom Code in Sounds Like-!</span>
</td></tr></table></td></tr></table></td></tr></table>
<span class="off">!-START code for custom text section-!</span>
<div class="myBio" style="width:380px; height:320px; position:absolute; top:650px; left:50px; overflow:scroll">
YOUR BIO DATA GOES HERE.
</div><span class="off">!CLOSE Text Div!</span>
<style>
table div.myBio {display:block; visibility:visible;}
</style>
<table><tr><td><table class="off"><tr><td><table><tr><td>
<span class="off">!-END Custom Code in Sounds Like-!</span>
Thank you for Visiting; Have a Nice Day :-)
Queries hitting other pages of mine, which should be hitting this page:
-How do I hide whole myspace page.
-I have div overlay codes?
-I have code to hide everything except player on myspace band page
-I show how to create a myspace band div overlay
-And I show how to hide what is behind a div overlay on band page
-How to hide entire myspace music page
-div over la y how to do one
-this section shows how to hide everything on myspace artist band page.
-div overly do not hide bottom links
Google Experiment: taft registration switch radio March 28
Queries hitting other pages of mine, which should be hitting this page:
-How do I hide whole myspace page.
-I have div overlay codes?
-I have code to hide everything except player on myspace band page
-I show how to create a myspace band div overlay
-And I show how to hide what is behind a div overlay on band page
-How to hide entire myspace music page
-div over la y how to do one
-this section shows how to hide everything on myspace artist band page.
-div overly do not hide bottom links
Google Experiment: taft registration switch radio March 28
Labels: myspace div band overlay
posted by uāāl!ā at Sunday, April 15, 2007
580 Comments:
hey again, another question for you if you have a min.
How would I put a picture above the ad on myspace? I tried this code, and it worked , but it also placed part of the picture in the comments box.
Thanks
Sam,
I have code to do that here:
Put Image on Top of Band Page
This code won't mess with your comment area.
Sam,
Thanks for pointing that out.
I remember mine doing the same thing, and I added code to eliminate the problem, but then never added the code to the solution I posted here.
Add this
<style>
{! remove borders around link images !}
a img {border:none !important}
</style>
This post has been removed by the author.
Whenever I put in the code for the music player, it doesn't show up on the page. So I messed with it a bit und changed the code from "absolute" to "relative" und now it's showing up where I want but there is a massive white space under the page. HELP!?!?!!!!!
www.myspace.com/tania23rd is the page.
Tony,
I tested your profile, and changed relative to absolute, and gave it a positive top value, and it worked.
i.e. this:
table table td.text object {position:absolute; top:7px; left:300px;}
If you are going to use relative you need a negative bottom margin, the same as the negative top movement value.
i.e.
table table td.text object {position:relative; top:-617px; right:400px; margin-bottom:-617px}
You also may need different right values for IE and FF.
THANK YOU!! that really helped a ton. I hate to ask too many questions but now I have a flash file that I want to insert into the bottom most box but i'm really not sure on how I should go about that. help?
AYE!! one more, i'm helpless, I know. I have a friend who's brought it to my attention that the page is totally screwed up in other browsers, how should I go about adjusting things so everything is peachy keen in every browser known to man?
Tony,
In order to make everything look peachy keen, in every browser known to man, MySpace would have to make their own code work in all of those browsers.
Currently the band page crashes when opened in Mozilla on my Unix 11 system at work, with no customizations. All it needs is a music player, and it crashes.
Your page looks fine in both IE6 and FF2
I would be interested in seeing a screen shot of the browser it is messed up in.
To put a flash file in the box at the bottom do this:
<div class="myFlash1" style="position:absolute; top:360px; left:13px; width:392px; height:250px;">
YOUR FLASH CODE HERE
</div>
If you need help with the
YOUR FLASH CODE HERE
piece, send me a link, to view the flash, and I can give you the exact code.
But to do this, I have to be able to see how exactly to access the swf file.
Thanks a ton, I would be dead in a ditch somewhere without you.
Thanks Tony,
Let us try to remember though, mySpace is not a life support system.
If it were, they would probably be forced to hire decent software engineers, and use a real test system instead of making un-tested changes on their live system.
Do you happen to know the code to put your top friends in one box (scrolling or not...doesnt matter)
and have it to where i can move it anywhere i want? Also, I need scrolling comments in a separate box...that is movable.
Some of this tutorial really helped me out a lot...but i cant seem to import my upcoming shows. i did what u said and tried different things...but idk what to do. can u please help?
If you want to put your friends in a separate box, away from the comments, you can not put your comments in a scroll box.
Your problem with Shows is probably my fault.
I had a bug in one of my code blocks. I don't know when I introduced the bug, because it wasn't there when I did my initial sample overlay, but it was there today.
Anyway, it would have caused a problem importing the shows or friends.
In the code that goes in the "Band Members", near the end, where I open three tables;
If all three of them are in class="off" that is a problem.
The first one can not be in class="off".
Either no class, or a different class.
thank you at last i made mine
but i have a question is ther a way that the friends and the comments i can put them separitly cuz look my layout i want like in the white part on the left size my info then like my comments scroll side and up and down but my top friends like a marquee or something all that on the white side on the right
sorry this is my page
http://www.myspace.com/elhota
Well then...what do u suggest i do about the friends and comments?
Check out my page: http://www.myspace.com/feliciazmuzik
if need be, i can alter my image.
Poisen,
I sent you a myspace message, to the profile you listed here.
This post has been removed by the author.
i used this and messed around until everything looked just right, and then i checked it in IE and it looks like a three year old pounded on the keyboard.
help?
Ian,
I know what the problem is.
You put the code in the "Bio" Section instead of the "Band Members" section.
Move the code from the "Bio" to the "Band Members" (the entire block).
Change your object placement to this:
top:190px; left:240px
As for why this matters, and why you saw the browser differences;
By putting the code in the Bio, the music player was outside the div instead of inside it.
This meant that placement had to be relative to the page body, not the div.
This is less accurate.
It requires that you measure from center, combined with a margin setting to get horizontal placement.
Vertical placement is less accurate because the top page content (the ad banner and menu area) does not size consistently across platforms (browsers, resolutions, dpi settings).
I like your page design, simple but elegant.
you are a life saver.
Hi Eileen, any ideas on how I can get rid of the bottom nav links on the page at www.myspace.com/andyrocker? On some Mac browsers like Safari, it makes them overlap the "Displaying 50 of 375 comments ( View All | Add Comment )" section. I tried your code on a different part of the blog that is for removing these links, but it made some other parts of the page not work...I think your instructions were for a regular profile instead of a band profile. Any help would be great...thanks!
Brandon,
Well, the bottom link code was written for the regular page, but the band page has these at the same level.
The only real difference I see, is the potential of messing with the shows (which are in a div).
However if you have done the above div overlay, your shows are inside your custom div.
<style>
{! hide bottom links !}
table div {display:none;}
{! recover custom div stuff !}
table div.myDiv, table div.myDiv div {display:block;}
{! recover ad banner !}
div table div {display:block;}
</style>
I just tested this on a page which used the above div overlay strategy and had the shows imported.
If it doesn't work on your page, and you did use the above div overlay strategy, may I see your page please.
Or try this:
<style>
{! hide bottom links !}
table div {display:none;}
{! recover shows !}
table td.text div {display:block;}
{! recover ad banner !}
div table div {display:block;}
</style>
This post has been removed by the author.
Following the instructions for inserting the core image, i see nothing. I do not see the image I intend to build upon. I tried using the image you supplied as a background, yet I still see nothing. Do I have to wait until the end of the entire process?
J,
You should see your image, as soon as you put it in.
If you are not seeing your image, something else is wrong.
May I look at your profile?
Hi,
I cant seem to import the music player, or any other content for that matter back onto my page. I followed your tutorial perfectly (i think!). Would it be possible for some help please?
heres my page -
http://www.myspace.com/impalemusic
Anonymous,
Two Things:
1) Somehow an open bracket (the symbol used to start a tag) got into a span block (what I use for comments), where it did not belong.
It threw things off.
When I removed it, your music player showed up, in the top corner, where I would expect it to be (I didn't hide the player in my hide code, I moved it).
</!----END CUSTOM CONTENT-------------!
Remove the </
That statement is inside span tags, the extra < throws off the close span tag at the end of this, which eventually has the effect of throwing off a table close tag.
I did double check my code, and I did not find those extra characters in my comment span
2) To position your music player, take out the line you added, and instead use the line that is already in the code, the line that moves the object to the top left corner.
Replace the top and left values with these:
top:637px; left:236px
Because I used
table table td.text object
it will override anything you do with
table table object
because
table table object
is less explicit than
table table td.text object.
I see you figured out how to move the div up behind the ad banner.
Someone had asked me how to do that in another forum.
You do need to also add some code to insure the ad banner, and anything from the top menu you choose to keep, shows up on top of your div.
I need to post that code, after I test it.
If you have anymore questions feel free to ask.
Ok I've got a question about this div stuff I really hope you can help!
check out my page here www.myspace.com/suicidegodpill
the issue is most of my links aren't working for whatever reason.
Is there anything you can do to help or tell me what the problem is?
thank you!
-Vaughn Michael
well i tried your strategy before but it didnt turn out right...but that could have been my fault.
most of the code that i used this time, i found at MyGen.com and its all bits and pieces from different forums. I am willing to try your strategy again and see what happens. This time, i will slow down and thouroughly read everything lol.
I just want to finish this thing as soon as possible...I need to.
Felicia,
It could have been conflicts with other code in your profile.
Or it could be that I don't have very good instructions.
If you can get it started, I can help you work out issues.
oh and you can see a working version over @ www.myspace.com/neweden3108
but like I said before there are some glitches on my music profile.
www.myspace.com/suicidegodpill
I really do apricate any help you can give me.
-Vaughn M.
Vaughn Michael,
Are you trying to use an image map?
I see code for an image map in your profile.
Image maps don't work on the music profile, because they require a pound sign (at least to work cross browser) and the pound sign is removed by the myspace pre-editor.
You have to use another strategy to get your links to work.
Try placing clear gifs over the tops of the links, and turning the clear gifs into links.
This does limit you to rectangles.
I noticed you used a lot of polygon shapes.
You can get pretty close with rectangles.
I explain how to use the clear gif strategy in this article.
Indeed I am Gosh how odd! I've used them before and they've worked but it seems recently myspace is going nuts changing codes and such.
Yeah I hate that myspace started doing that now It takes forever just for me to get some links on my page because myspace keeps screwing around with them. This is all sooo frustrating.
I will look into how to do this clear .GIF idea.
I hope it works.
Thanks!
-Vaughn M.
Ok I don't want to post this but I really need help I like trying to figure things out on my own but I just can't figure out where these clear .gifs go.
Where do I place the html that you have here and what parts do I use?
thanks so much and next time I design a music page I will make sure not to do a map again.
I hope you can help.
-Vaughn M.
as Homer Simpson would say, D' OH!
I figured it out by placing it in a differnt part.
Your page really is quie helpfull I felt so lost and sad about this design but you're advice is helping bring it back to the way it should be :)
I do have one question though myspace keeps messing up one my my jpgs on the page you can see it showing the code for whatever reason. I've tried to fix it but myspace keeps changing it over and over I have no idea what the problem is.
www.myspace.com/suicidegodpill
thanks so much again!
-Vaughn M.
vaughn michael,
Whenever you see this
..
It means that myspace is removing something (unless you types the dots in).
I know there are some sites it will not allow, I just am not up to date on which ones they are.
Other times I could be the name of the file.
When they decide they want to dot something out, they often take a chunk with it.
You can try re-naming your image files, or moving them to photobucket or tinypic (they allow both of those).
yeah it's odd that most of them are from my photobucket acount or my aol ftp space.
I'm wondering if it isnt because some of the files names are female names and myspace has been having allot of problem with fake spam porn space. *shruggs*
oh well I hope everything works it's self out.
The clear .gif thing if wonderfull.
-V.M.
hey two quick questions. there probably quite easy but i cant figure it out.. one i want to put my background image over everything except the ad.. is that possible so you dont see any of the myspace stuff and i will program those buttons myself off my picture..
also how do you change the back ground of outside your custom picture.. so like the white edge bits if i wanted them black (000000) thanks...
lionheart,
I think people used to do what you are asking which is were the term {div overlay} may have come from.
A cleaner approach is to not cover anything, but to render everything you do not want to see either gone or invisible.
Did you try step 1 of the tutorial?
The background outside of your picture is the body background
body {background-color:black}
I think that is what you are talking about.
Hi, I just want to thank you for all of the tutorials. I was completely in the dark with divs and html code prior to reading your articles, however now I think I came up with decent myspace page for my band. please check it out and let me know what you think.
www.myspace.com/sissyjupemusic.
I had a couple quick questions if someone could help out. First, Is there any way to link a clear gif image to a paypal account(to sell my bands cd's)? We had it up there before with the "form" tag but I couldn't figure it out with the overlay. Second, is there anyway to adjust the sizing and placement of the "shows" table better? In IE and FF they adjust there sizing differently but always go absolute right. Thanks again for all your help. I check out your site daily.
Jeffery,
I like your page layout.
I like your music also.
Replace this:
table div.myDiv table div table td {width:230px;}
table div.myDiv table div table table {width:100% !important}
table div.myDiv table div table table table {width:auto !important}
With this:
table table td.text div, table table td.text div table {width:400px !important}
table table td.text div table table {width:100% !important}
table table td.text div table table td {width:33% !important}
I tested the above code with your profile.
If you want to add coloring go here:
styling the shows
I have never done a link to pay pal.
But if you can point me to a page where such a link works, I can probably figure out how to put it on the page.
We may want to make a separate div, put the form in the div, and then position it on the page.
im having a proble importing the shows section. i keep re entering the code into my sounds like section...but it just doesnt seem to work :(. my page is www.myspace.com/iamenemycandie
hope you guys can help out
this is probably the clearest, great tutorial out there. seriously, thanks.
im having two small problems if you have any insight. im getting a thin purple border around my image. also how do i move or remove the bottom myspace menu, as its covering my comments. thank you so much.
myspace.com/jeffklein
Thanks Jeff,
The thin purple line can be eliminated by changing the border, around the main div, to 0px.
where I have this:
border:1px purple solid
Change 1 to 0
OR if you want another color change purple to the color you want. (but it has to be color name, not a hex number, unless that syntax is slightly changed).
Your bottom links should not be behind your comments, and they don't seem to be that way, when I view your profile.
But you are not the only person who has mentioned this symptom. I need to look into it.
You can remove your bottom links with this:
<style>
table div {display:none}
div table div {display:block;}
table div.myDiv {display:block;}
</style>
I have more on this here:
bottom link and copyright space
Hello there,
I'm in a fairly lost position. I've been reading your articles. And they've been useful so far... the page is almost done.
Right now I'm having a few problems.
Before moving on, here's my test site. http://www.myspace.com/dwtest
1. I can't the tour dates or the blog (news) to show up.
2. I've got the friends to show up, but it doesn't seem to show the commments.
I can post and/or e-mail the code if you'd like.
I really appreciate the help!
AAAHHHHH!!!!
I just did the FF Reality check! I'm totally lost now. My page looks absolutely beautiful in IE7. It looks like a bomb went off in FF though. If anyone is able and willing, I'd love to learn what I'm doing wrong and how to fix it!
Thanks for any help that you can give me!
I have to remind myself to do the IE reality test before I ever get too far into a solution.
As for what you are doing wrong:
You are not using my methodology, and you have the perfect profile for it, with all static sized content.
Here is what I recommend:
1) Remove all of your code (save it in case you decide you want to put it back.)
2) Create a single image which includes everything you have drawn onto your profile from the top down to where you start the friends and comments.
Leave blank space for your music player, and the other music player you have below it.
If you want, you can just leave blank space for some of the smaller images, and we can put them on top later, or you can draw them directly in.
Create another image which is the top of your comment space, where you have the top border of your comment area and the comment form.
We will put this in a separate div we place on top of the core div.
Next do
Step 2, on this tutorial.
Next do
Step 3 of this tutorial.
You want to add this just after the line where it says
START Custom Content Style Section
<style>
body{
background:url('URL FOR YOUR bg4.jpg') repeat top fixed;
}
div.myCoreDiv{
background:url('URL FOR YOUR bg5.jpg') repeat-y top scroll;
border:7px solid;border-color:111717;}
</style>
Where it says import Core Image,
This is where you will put in the image you make.
This is the image that has all of your content, that can be drawn on, up to where your friends and comments start.
Next try step 4.
This is to get all your links in place.
See if you can get that far.
The next half is more custom, to your specific page.
But if you can do the above, I can give you code for the rest of it.
thanks so much for the tutorial.
1. seems so simple but for some reason I cannot get my background color to change. I jus want everything that my div overlay is not covering to be black, like on the margins of the page, etc.
2. how can I change the color of font in my comment box and friends box?
www.myspace.com/bshocgeorgiabulldogs
Eileen,
your page has been hugely helpful, thank you so much for running such a great site. Just a couple questions.
I've read through some of the other comments and I'm still having a little trouble with my bottom links. I've inserted the codes, but they all make my whole page disappear except for a thin purple box at the top of the page.
Any suggestions?
http://www.myspace.com/araticarmy
Thank ya!
thanks so much for such an awesome tutorial!!! I was wondering though, how can I change the color of my main background. The background that is behind the div overlay that is in the margins? Thanks so much!
AraticB,
First we will move the bottom links to where they belong.
(I always wonder if the reason people remove them is because they don't get them to position cleanly at the bottom )
Then if you still want to we can remove them.
1) You are using absolute placement where it is not needed and is causing a problem.
The parent container does not recognize the space taken up by an element which is placed using absolute.
For your core images, which are the images making up the core of your design, you just want them to fall naturally in place.
The fall directly under each other, with no positioning command needed. I tested it.
So first remove all the absolute placement and margin stuff, from your banners (all 3 of them)
If you do this, one banner at a time, starting with the top one, you can see the effect of each one. Notice the bottom links move down.
2) remove this from your body style block:
{background-image:url('http://i57.photobucket.com/albums/g201/MadFLeX/backgroundbrown.gif');
background-repeat:repeat-y;
background-position:center top;
background-attachment:fixed;}
3) add this style block
<style>
tr {background-color:transparent !important;}
div.myDiv {background-image:url('http://i57.photobucket.com/albums/g201/MadFLeX/backgroundbrown.gif');
background-repeat:repeat-y;
background-position:center top;
background-attachment:fixed;}
</style>
4) style the bottom links to match your profile
<style>
table div br {line-height:4px;}
table div div a {color:maroon !important; font-size:9px !important;}
table div font {color:maroon}
</style>
Now, if you still don't want the bottom links, the below code really does work.
It is important to render your custom div display:block
Because you have used additional divs inside the core div (myDiv) you also need to render them display:block.
<style>
table div {display:none}
div table div, div table div div, table table div {display:block}
table div.myDiv, table div.myDiv div {display:block;}
</style>
John,
You are welcome and Thank you
To change the background color of the body do this:
<style>
body {
background-color:hotpink;}
</style>
so once again, i tried your method...
and im surprised!
everything turned out really well :D
...except i still cant figure out how to import upcoming shows.
what am i doing wrong???
other than that...
everything is PERFECT!
thank you for all your help =]
check it out!
www.myspace.com/feliciazmuzik