mySpace Simple Band Div Overlay div overlays
Building a very simple Band Div Overlay.
This Article is Obsolete.
Please go here:MySpace Artist Band/Music Page Div Overlay
I am keeping this older article in Tact for Historical reasons (and the fact many parts of it have been posted on createblog, and possibly other sites without my permission).
==== old article below ============
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 div object
OR
table div table td.text div object (where the first div is our custom div.)
in non IE you will need to UNDO any positioning done on the object, on the nested object just below it.
non IE has two objects.
table table td.text div object object
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 div object {position:absolute; top:200px; left:420px;}
table table td.text div object object {position:static;}
(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 Obsolete.
Please go here:MySpace Artist Band/Music Page Div Overlay
I am keeping this older article in Tact for Historical reasons (and the fact many parts of it have been posted on createblog, and possibly other sites without my permission).
==== old article below ============
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 div object
OR
table div table td.text div object (where the first div is our custom div.)
in non IE you will need to UNDO any positioning done on the object, on the nested object just below it.
non IE has two objects.
table table td.text div object object
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 div object {position:absolute; top:200px; left:420px;}
table table td.text div object object {position:static;}
(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 div object {position:absolute !important; top:196px !important; left:420px}
table table td.text div object object {position:static !important;}
</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
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
Labels: myspace div band overlay
posted by uāāl!ā at Sunday, April 15, 2007
668 Comments:
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
Felicia,
Can you add some shows to your page, I don't think you have any.
When I turn off style, I don't see any.
I can't test the code, to make them show up, on your profile, if there are no shows in the default profile.
Thank you
- Eileen
i guess i'm fairly good at this whole div thing now, i designed a site for my friend's band without any trouble the only thing is i put the friends and comments in a scroll box at the bottom. everything is perfect except that the "view all off blahblahblah's friends" link somehow is in the middle of like, the third or fourth comment.
myspace.com/iandestructable
any ideas?
Thanks Eileen, that did it, and you're right, I left the links on.=) Just didn't want them on the top of the page. It would be stellar if myspace would get the backgrounds working properly...or am I the only one having that problem?
Thanks again. Do you take donations?
Ian,
MySpace made a code change, they moved the view friends link into a div, so it is now effected by my restore shows code.
Add this line:
table table td.text table.friendSpace td.text table div {position:static !important;}
Into the block where you restore and style the friendspace.
Araticb,
Thank you.
However,
I don't take donations, or sell advertising space (yet).
I am using all free services (blogger and myspace are both free).
But if you want, you can hang out in various myspace discussion groups, and point people to my solutions when they ask questions.
When I get enough hits on my page, then the "credible" pages, which do myspace stuff, might consider me worthy of linking to.
(On second thought, never mind. I am not sure I want to get enough hits to "exchange" links with the sites that are interested more in quantity than quality. I am content with my small through put, and the ability to respond to almost all of my comments.)
One more thing:
backgrounds
Try instead of just using body, using it with the class
body.bodyContent {your background color or image code !important}
If it just a color, it is simple:
body.bodyContent {background-color:hotpink !important}
I think they are actually changing code, because I could not get consistent results this morning, and didn't get a code snapshot of the style sheet (where I think the changes are occurring), so I have no evidence.
Also, I really need to get to work, or I will need to start advertising on my page, because I will no longer be employed.
before.. when i tried to import my shows, i put some shows in but they did not show up. those dates passed by so they will no longer show up anyways. so i just now put a few more in and tried the code again...and this time it worked... so nevermind. =]
thank you once again for all your help. i think im finally done! :D
but sometime in the future if i do have any more questions, i'll definately come to you first.
ok..
i do have one more question.
is there any way i can change the color of the date/time/location text in the shows?
Change the date and time like this
table table td.text div table table table td font {color:green !important}
for the location it is this:
table table td.text div table table td font {color:green !important}
Put it between style tags
also, what is the code for scroll boxes that can be positioned in different places?
...or, in other words, how do i insert text onto my div where i want it?
Really really great page - no other page is anywhere near as comprehensive when it comes to explaining myspace band profiles and DIV overlays.
Unfortuately, I seem to have two issues:
bottom links & copyright are displaying over the comments section, because it seems that I've somehow put the comments OUTSIDE of the div and it's not growing to accomidate it. IE compensates for this, but FF does not.
Secondly, the spacing between different comments seems no-existant in FF, but renders nicely in IE - I'm hoping solving the problem above will correct it, but I thought I'd bring it up just in case...
URL is http://www.myspace.com/megiddo666
Thanks!
Eileen, you are my hero! This page is awesome, and totally comprehensive. Thanks to your help, I've got a page I'm very well pleased with. I have only one problem at this point. I'm looking for code that will allow me to totally customize my table sizes for my show section. on FF the default works great, but on IE7, it has this huge amount of space for the date, it cuts itself off, and it slides to the right. Is there any easy known fixes around for this? I really appreciate the help again!!
-Drew
www.myspace.com/drewwilliams
www.myspace.com/dwtest
thanks so much!
could you tell me how to change the font colors of my friends and comments? thank you!
MrMusicMan,
There is a IE bug (or feature depending on one's point of view) related to relative positioning, via the use of percent and negative margins.
This type of syntax:
{position:relative; left:P%; margin-left:-Xpx;}
Should not be used. The text starts to go away, as if it is under something. It is actually rather strange because we are not moving outside of our parent container.
It is not a myspace thing, as I have tested this symptom outside of myspace and get the same result.
Why are you using relative positioning for the shows and blogs?
Is it to accomodate growth?
If you want to use relative, you don't really want to use the combination of percent and margin anyway. That is for use with absolute when trying to center.
For relative you can just use left or right.
I recommend absolute positioning, measuring from the top left of the core div.
I recommend this for both the blogs and the shows.
I then recommend leaving enough room for the expected growth.
Getting the column sizing right, is difficult.
But I am finding that hard values work better than percents.
Also,
padding is applied differently.
I would position like this:
table table td.text div {position:absolute; top:1149px; left:340px;}
I would change the padding like this:
table table td.text div table {margin:0px !important; padding:2px !important}
I would hard set the width the date/time takes up like this:
table table td.text div table table table {width:115px}
There is no way to make that
(view all)
position itself cleanly in both browsers. Once we hid stuff, and then had to render the display:block to recover it, it messed up alignment, and there is no way to get it back.
You can do something like this:
table table td.text div table td.text {width:220px !important}
That pushes the view all link over.
John,
<style>
table.friendsComments table table td {color:hotpink !important}
</style>
Keep in mind your friends might use styling in their actual comments, which the above may not override.
For the friends, it depends on what you want to change the color of.
The headers, names, view all link?
The link below covers all of it.
friend space styling
Hello,
First of all, thanks for this page, it's been a huge help.
However, I'm having some trouble with the Shows. For some reason, the venue column doesn't show up. Also, the right-hand column is half covered by the edge of the box. The only things that are truly visible are the dates.
Could you please take a look and see what's wrong?
Thanks.
The site is www.myspace.com/milqud
Hello again - set up a new account to verify the problem with div expansion & comments in Firefox isn't something in my own styles. Here's a step by step of what I did in case that explaisn what I'm doing wrong:
Added 4 sectiosn of your code in the following order (after enterign in 3 bogus comments):
1) default content removal into "sounds like"
2) top & bottom navigation removal ("one solution" version) into "sounds like" below the above code.
3) Close out tables & divs into "band members"
4) importing & displaying comments into "bio" done the 1st/simple way (at bottom of page).
I did notice that in your instructions to #4, it mentions removing the old hide code, but that code isn't in any of the above three sections, so I assume it's from an older draft of these instructions.
Anyway, IE renders it fine, but in Firefox (2.0.0.7), the div is not growing to accomidate the comments (or the comments are outside of it).
Is there anything you can suggest to fix this?
BTW, th ecomments were juts a segment of your instructions - I didnt accidentally enter them into comments ;]
test page that illustrates the problem in FF without any other code:
http://www.myspace.com/255150794
I chose to use relative positioning because IE7 and FF treat borders slightly different. IE7 makes the border fith within the div, while FF puts the border on the outside. When this happens, FF works from the true zero point, and IE7 subtracts 7px. This moves everything off by 7px. in either FF or IE7 depending on what browser I set it to. margin-left xx; margin xx% solved that. Also, I used relative for future growth, yes.
I've worked out a solution that I'll put in place later today. Essentially I've built the border into my graphics.
I'll post an update when I've done so. Again, thanks for the help!
hey! really awesome!
best helping page ove ever seen...
i have sum questions tho...
How do i change the background color on my comments and friends?
I imported them bolth into a scroll box but they come qith this black box for the background....and it has white borders wich im having a problem hiding them...
plz help!
and thanks!
this is my code:
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=206852933
oh one more thing...
how do change the color for the scrollers on my page?
tthanks
OMGGGGGGGG thank u sooooo much my page looks sooo nice now lol
if u want to see it go here
http://myspace.com/47404924
again thanks soooo much
Beliy, to customise the colour of your page and scrollbar, visit www.mygen.co.uk and use the Profile Editor. There you go!
i cant get text on my page.
please help...
Beliy,
I like the music on your page.
It looks like you figured out the coloring, your scroll bars are colored and your friends and comments have a background that matches the page.
Felicia,
Can you make a change to your shows.
For some reason the auto sizing is not working in IE.
Can you change the width in this line:
table div.mycoreDiv table div table table table {width:auto !important}
from auto to about 120px
I tested with 120 and it came out looking good.
The auto seems to work in ff, but not in IE.
As for the text,
You have to insure you put it inside the div (or at least outside the areas we rendered display:none).
Did you try the last block of code I have on this tutorial?
You can put that in any of the General sections, I think I used "Sounds Like" (just because it was empty).
Noah,
That is an awesome layout.
You can remove the purple border by changing
border:1px purple solid
To 0px
I should probably take the purple border out of the code.
Hello hello!
What a wonderful website this is, as everyone else has stated: I couldn't possibly understand div layouts without this place! thanks a bunch
I've followed this tutorial with much success, besides one final thing.
All I need now is a scroll box to the right of the friend/comment scroll box to add what I like.
I've tried inserting your bit of code that adds a custom box, but nothing seems to appear.
Any help would be very much appreciated.
Here's the URL: www.myspace.com/naridian
Again, many thanks.
Chris
I've fixed my graphics and built in my border, and my site is running like a champ.
I've got one little bug I've never noticed until now. My all my "View Drew's Friends" links are about 600 pixels lower than they should be. I don't see any code that would make them do that anywhere. It does this same thing in both FF and IE7 and I'm positioning it all absolute. Any ideas?
www.myspace.com/drewwilliams
TIA
-Drew
Drew,
Because myspace made a change last week, related to the view friends link, it is now in a div.
Now when you use positioning to position your shows, it can effect the view friend link.
To override this you have to add this line:
table.friendSpace div {position:static !important}
However something else related to how you are positioning things causes the link to fall too far to the left, when you do this.
You can fix this with padding.
I ended up using this line:
table.friendSpace div {position:static !important; padding-left:80px;}
You can change the padding value until you get it lined up the way you want.
If you need to adjust it differently in IE and FF, you can do this:
table.friendSpace div {position:static !important; padding-left:80px; _padding-left:90px;}
The _ in front of padding makes it an IE only command.
Putting this AFTER the same command for FF, will override for IE only.
I have a strong suspicion that myspace is about to add an additional div to the friendSpace, to deal with the online now icon. (The tried earlier this month but took it out a few days after they added it.)
If they make this change it may mess up your layout.
You may find that you need to add an additional line, to set the padding value needed for the online now icon.
But we will have to wait, and see where it falls when myspace makes this change.
Hello,
First of all, thanks for this page, it's been a huge help.
However, I'm having some trouble with the Shows. For some reason, the columns are really far apart from each other, and as a result, only the first two columns are visible in the table. This only applies to IE, it seems to be okay in Firefox.
Could you please take a look and see what's wrong?
Thanks.
The site is www.myspace.com/milqud
yes i tried the code for the custom scroll space but nothing seems to be showing up.
Felicia,
I am not sure I have the correct page for you.
Can you send me a message on my myspace page:
My MySpace Page
Put the code in place, send me a message, and and I will go in and see why it is not working.
Probably after work tomorrow.
hey! ok so i finished my page...
myspace.com/everfound
BUT!!!!
it works fine for me and my computer everything is aligned nice and neat and straight...
BUT! when i looked at the site fomr a mac book prr....all the content except the myspace core picture was shifted to the left and up...
whats wrong?!!! plz hhelp..
thanks!
This post has been removed by the author.
http://www.myspace.com/bannedburnedbeloved
great tutorial so helpful, thanks a lot. i dont use the myspace music player, i embed a player from another music site. only thing is it isnt sitting in my page where i want it, next to my profile picture... can you help?
I seem to have fixed my own issue, if anyone else is having a similar problem. I added style="position: absolute; left:370px; top:300px; width:473px; height:140px; overflow: auto;" to the div tag for my embedded object.
im sorry, but everything is great but one little thing left. my friendspace... no images are showing up? only their names... i would preferably rather have no names, and just the images... can you assist me there...? i've been trying to no avail. myspace.com/bannedburnedbeloved
Hi Eileen,
Any idea why when I put my friends into my page, there is a huge gap between them and the start of the comments? I added the comments code and then the friends code like you have on the tutorial.
You can see it at http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=234301715
Thanks!
I kept messing with it and seemed to have found a solution. Delete the code within the Friends code that tells it to override positioning for shows, then put in the new code you have for erasing the "View all friends" link that is no longer in redlink. Let me know if there is a better way. Great blog!
I was wondering how it might be possible to keep the top friends static and then scroll only the comment area.
Thanks!
David,
It may be possible, but I have never been able to accomplish it.
I have gotten it to work in FF, but not in IE.
(My lack of ability to make it work does not mean it is impossible).
May I recommend a custom friend space, where instead of using the default friend space, you build a custom space.
Hello Eileen,
Firstly, thank you for your tute - it's been invaluable in getting my head around myspace band profiles.
i've currently got a test site up before i transfer across to the main site, at myspace.com/testingone3 - and i was (until i tested it on multiple browsers) happy with the result. It looks fine on FF but on IE and safari nothing is as it seems...
advice? suggestions?
thank you
Eileen, you seem to be avoiding my question! Is there a reason for that? I'm sorry to trouble you, but I'm quite urgent for the answer. Ahy help is really appreciated.
Ransom,
I was not ignoring you on purpose
Sometimes auto and percent sizing doesn't work well.
When that happens, I just hard set the values to exact values.
The below code works for your profile:
{!-fix column width of shows-!}
{!-set below px width to the width of your shows space-!}
table div.myCoreDiv table div table td {width:360px;}
table div.myCoreDiv table div table table {width:340px !important}
table div.myCoreDiv table div table table table {width:113px !important}
table div.myCoreDiv table div table table table td font {font-size:9px !important; }
Ed,
I recommend ditching the auto sizing in the shows (I know I have that in my code, and it worked with my testing, but it is not working well in several profiles.)
To style your shows use this block (I also added a width to the div).
{!- shows -!}
table div.myDiv table div {position:absolute; width:424px; height:150px; overflow-y:auto; overflow-x:hidden; top:10px; left:370px;}
table div.myDiv table div.commentlinks {display:none;}
table div.myDiv table div table {display:block}
{!-fix column width of shows-!}
{!-set below px width to the width of your shows space-!}
table div.myDiv table div table td, table div.myDiv table div table {width:405px;}
table div.myDiv table div table table {width:100% !important}
table div.myDiv table div table table table {width:140px !important}
table div.myDiv table div table table table td font {font-size:9px !important;}
hi, when i add the code fro the comments and friends section, it doesnt add them on my div overlay but rather at the bottom of them. Ive added the code you suggested in the bio section. please help. Thanks!!
Hi, quick question.. How would I go about customizing the comment box in a band profile? I've looked everywhere on your blog and I don't seem to be able to find it.
Thanks for any help =)
hi
thank so much 4 your blog
it's very useful... i'm building a new layout using your tricks...
By the way i want to know if is possibel to put the blog section into a scroll box
i've used your code
Import for Display; blogs into Div Overlay
and it's ok but i cannot size the height and the text do not scroll on over flow
.
could you help me?
the test is on http://www.myspace.com/2create4
ciao from Italy
cizk0
Hi Coboble...
I'd have an animated gif banner on my site. I'd like to place it there as a .swf file rather than .gif for file size reasons. How do I work this code?
Here's the site I'm working on:
http://www.myspace.com/musicbyminor
Thanks! You're site is awesome and very, very helpful.
Memento,
You can place swf just like you would a gif (except it can not be used as a background image using the background-image attribute).
Instead of an img tag, use your object tag.
Your swf code is object code, correct?
You don't need to use class grid there (I used that class for the grid image).
You can replace the word "grid" with whatever name you want for your class.
Keep the div tags, like you have them.
But instead of putting the img between them, put the object code for your flash between them.
ciao,
It is easier to re-create the blogs, into a custom scroll div, than to try to get the existing blog space into a scroll.
It is possible to get the existing blog space into a scroll (which works in IE) ONLY IF we do the following:
-Re-Create the music player (or hide it or include it in the same scroll space).
AND
-Re-Create the shows, hide them, or include them in the same space.
MySpace did not provide a div here.
The nearest code-input point, to create a div, is the end of the general interests.
If you just want to allow for blog expansion, and have your div grow as they expand, that is possible (within limitations)
It is possible to do the sort of design where one builds the div around the location of the blogs, and allows the blogs to expand and push the content below them down.
This would be done with multiple divs.
The blogs end up at the bottom of the first div, and the first div can grow to accomodate them.
The music player and shows must go in this first div as well.
Instead of leaving this div open, as I do in my design,
I would close the div, in the bio section, and open a new div.
Any custom content you want below your blogs, goes into this 2nd core div.
I can do an example like this, maybe this weekend.
I can also do an example of re-creating the blog section.
This strategy would require that each time you add a new blog, you add the needed link to your custom blog space.
Hey Coboble...
My swf file is just a file I created in After Effects and rendered as a swf. So it's a file with a .swf extension. How do I get object code for it? I have Flash CS3... do I create it in there? Sorry, but I'm obviously pretty new to this stuff. Thanks!
ok,
So I am not a flash expert (In fact I have never used the tool, but I did just order myself a copy so I could learn it).
Have you downloaded it somewhere, where if you type in the html address, it comes up and plays?
If you have done that much I have code here, where you can put in the address of the player/swf file, which works with myspace
Video Posting
Use the first code block and replace the X with the full html address you use to access your swf file.
IF you have not yet downloaded it somewhere, then I am not sure what you need to do.
You can try the myspace feature for uploading video.
OR
Go to this discussion group and ask your question
Flash Questions
ciao
thanks for the answer , i agree with you that the best way is to recreate the blog's link and put into a scroll box! i'll do tonight!
thanks again 4 your precious help... now my myspace is really professional :)
i think........
www.myspace.com/zkthaman
ciao
cizk0
I need help, so i did this thing and look at the left side like midway down... i put in a little "sign up for mailing newsletter" thing. And there should be a white text input on it, and it works on my regular myspace but i guess this whole div overlay code blocks it out somehow...
any know a fix?
thankx!
beliy333,
I can not find the code you are talking about.
Can you tell me what it says, so I can search on a keyword to find it.
It is possible it is placed in the area we rendered display:none.
If this is the case, I will be able to figure out what display command we need to render it visible.
But I need to see where it is, and how it is coded.
eileen....
Excellent post, but im having a hangout and ive been scouring the net for an answer. I cant get my friends and comments to show up on my div on the band page. By following your instructions it shows up at the bottom of the page outside my core and i cant move it.
I saw cizkos post above and thats the style im looking for but i cant get it to line up. Please help im almost done!!
Thanks!
As soon as I get to the part of the tutorial that says
All the above block does is display the comments in the location they fall naturally (the bottom center). They are logically within our outer div, so they will push the bottom links down.""
The comment box is not within my div but rather outside. Just thought this would help explain what i was talking about. thanks!
brian,
Can you give me a link to your page, so I can look at it, and see what you are doing.
myspace.com/djoverpourtest
OOPS SORRYYYY!!
its myspace.com/overpourtest
no dj
thanks!!
Brian,
Two things
1) You forgot a block of code, the block that makes the comment table visible.
<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>
2) You should look at your profile in FireFox.
What you are trying to do with the friends is very cool.
But getting that level of accuracy, in the alignment, cross browser, is going to be very very very difficult.
Sizing the pictures like that distorts them, because it changes the aspect ratio.
I like your music, I listened to the song several times.
thanks a ton!! that gets me started in the right direction. I can tell that this is going to be tough trying to get the friends to fit in there, I might just scrap the idea as you said, the different sized profile pics are going to give me trouble. Im just going to drop them down below and mess with the formatting I think.
Thanks again for the kind words, the song on the profile isnt mine, just a classic 80s track that i threw in there for the filler to get the player to show up. myspace.com/djoverpour is my stuff. Thanks a lot!!!
--fcEileen (aka Coboble) said...
I can not find the code you are talking about.
Can you tell me what it says, so I can search on a keyword to find it.
It is possible it is placed in the area we rendered display:none.
If this is the case, I will be able to figure out what display command we need to render it visible.
But I need to see where it is, and how it is coded.--
***** thanks for the response and all your help, i really appreciate that and im sure everyone else here does!
MY MYSPACE IM WORKING ON
myspace.com/everfound
ok so i have a few problems i discovered. As you probly know, IE shows way different than FF. IS there a way i can make the same thing appear in both browsers?
-- ok, first off, the whole page is not centered in FF as it is in IE.
-- The email sign up form is shown in IE (the white input text in the form is stil not showing) BUT in FF it the whole thing doesnt show at all. (you asked for the code for this form, but the blogger wont allow html here so see my email at the bottom *** --All my comments are not shown when looking through FF, as in IE its aligned just as i need it and showing.
--The friends are all crammed on each other in FF, but are aligned as planned in IE.
--oh and, i have some codes from youtube videos that i put into a content box. I dont know why thats not shows either. I wanted to put in the html code here to show you but the blogger blocks it and wont allow it. Can I get your email to sned you the code?
Or heres mine,
beliy@everfoundmusic.com
I hope youll be answer some questions. Ive been studying the code and playing with it for a couple of weeks now, and literally spent days on this.
Thanks soooo much
oh and heres an example of what im kinda aiming at myspace.com/thealmost
K, i seemed to fix friends and comment already. BUt in FF the comments are close together verticaly. They bearly have any space between each other...
IN IE its not liek that.
can i make it the same for FF?
thanx
beily,
I can read your code, by looking at your profile. This time I did manage to find the form code.
It is hard to get code into the blog because it has to be translated. I have a tool that does that for me.
The off center problem is because your div is not wide enough for your image.
The browsers treat that differently.
Change the width of the myCoreDiv from 800 to 900.
I found the code for your email form.
You have a hanging form close tag just before that div, that doesn't map to an open form tag.
Notice that your form does not work on IE (although the background to it shows up).
You need to render the form display:block because we have rendered forms display:none.
To do this you need to assign it a class.
<div class="myEmailDiv" ...
Then create a style bloc:
<style>
div.myEmailDiv {display:block !important; }
div.myEmailDiv {background-image:url(http://www.scriggleit.com/images/form-e.gif)}
div.myEmailDiv form {display:block}
</style>
Because we have background-image set to none somewhere, I needed to explicitly use background-image to override, and not just background (as is in the div code for your form).
IE and FF have different precedence rules.
You also had an extra . before you closed the myBio div. I don't know if that is a problem or not.
You can increase the space between each comment, and your friends like this:
<style>
table.friendsComments table table td {margin-bottom:13px; _margin-bottom:1px;}
table.friendSpace table table table a img {margin:10px;}
</style>
You can change the padding values to suit your taste.
You can have it effect FF differently than IE.
Putting a _ before the keyword in IE is ignored by FF, so if you put this after the firefox setting, it will override for IE only.
Anytime we eliminate things and then try to bring back other things via {display:none} followed by {display:block} or {display:inline} we loose some formatting that it difficult to get back, and does not render the same cross browser.
(I thought I posted this earlier but for some reason it isn't showing up)
I am having trouble getting my show schedule to be over a transparent background so that the background image shows up. Right now it shows up as a blue color - and I have no clue where the blue is coming from. Can you help?
http://www.myspace.com/brooketestsite
Brooke,
You did post it earlier,
I think you posted it to the other div overlay article the one that is for the standard page.
table table td.text div table, table table td.text div table td {background-color:transparent !important}
Put it between style tags
For more on styling the shows see this
styling band shows
Hey again Eileen.
I was checking our your comment to Beily because I'm having a similar problem, but I couldn't find how it applied to my page. I changed all my absolute positioning last time per your request, but now I'm finding my page is aligning far right in Firefox and Safari. Perfect in IE. Any advice?
www.myspace.com/araticarmy
=) Thanks.
Brian
also..could there BE more Brian's on this page? haha.
hi great tutorial i have a couple of styling questions. When I try to style my band shows theres a light blue border around the shows but not the 'upcoming shows' title that I can't get rid of. Also the right to left spacing is weird, no matter how wide I make it the year and the venue are right up against each other. Finally could you help me out with a restyling of the friends comments. I'd like to be able to get rid of the borders and change the fonts, colors and sizes. Thanks
Brian (AraticB),
Your main problem is your style clauses for your topbanner things.
These really make up what I call the "core".
You don't need style to position them.
If you completely remove those style blocks, they position themselves correctly.
Your positioning is not done correctly anyway.
Ff and IE behave very differently if something does not fit inside a container.
I am still looking at your code to see what is causing the bottom links to not position properly when you import the comments.
I know I had a bug at one point, causing this, but thought I had fixed that.
I will get back to you on this one.
Alexander,
Can you provide a link to your page.
The shows are tricky,
I often have trouble with them myself and end up hard setting all the px values to force the columns.
The problem is that once we re-size something, we end up needed hard-set the sizes of everything potentially effected. We do not have access to the code at the ideal point to do this (when table cell is being created). Therefore we have to use style.
Because there is no way to address the three cells, that make up the date/time, venue, location fields of the shows, it is hard to set ideal widths for each of these fields.
I don't know what is causing the blue border, but the way you describe it, I suspect it is border at this level:
table table td.text div table table
this tutorial is excellent. i was curious though, how can i make the background behind the banner ad at the top(currently blue), and the background behind the links at the bottom (currently grey) match the rest of my site (black)? my site link is www.myspace.com/akogtestsite. i really appreciate your help.
-chris
chris,
Thank you.
The grey at the bottom is removed like this:
tr {background-color:transparent !important}
That also effect url background coloring.
The blue at the top can be removed like this
div table {background-color:transparent}
That also effects background coloring assigned to the shows.
Make sure you put the commands in a style block.
This is the best website I have found and has helped me more than you can imagine! I am going to recommend it to all my fellow web designers.
I am almost finished with my site, but have a few additional questions that really hope you can help me with:
1. Someone asked this previously, but I couldn't find the answer: is there a way to format the comments table? I followed your instructions on updating the friends table but can not figure out how to format (get rid of the background, border, etc.) the comments as well.
2. How do I bring my image up so that it is underneith the banner and links at the top of the page? I will need to extend my image and probably change all of the locations of the clear gifs, but think it would make the site look a whole lot cleaner.
3. How can I bring the comments up so that they are directly under the friends instead of such a big gap between the two sections? (When I open the site in Safari - the comments do not scroll but are just off the page at the bottom? Do you know how to fix that as well?)
4. HOPEFULLY MY VERY LAST QUESTION: In FF, the buttons in my comment box, such as submit, are for some reason erroring and are unreadable? Suggestions?
Thank you so much. I am so excited to have this site ready to go. You saved me tons of frustration.
http://www.myspace.com/brooketestsite
Brooke
Brooke,
Thank you
I had started a similar article on the comment space, but never finished it. I plan to do that tomorrow.
Then I will point you to it.
For the extra space, you can add a negative margin under your friends, or on the top of your comments.
That space is caused by carriage returns.
I usually hard-set these, so I know how much extra space is there.
i.e.
<style>
br {line-height:12px}
table.freindsComments {margin-top:-24px;}
</style>
That removes the space equivalent to 2 carriage returns.
If you do not hard-set the height of the Carriage Return, you will find that the amount of extra space is different in IE and FF and even more different across different dpi settings.
As for the problem you are seeing in Safari, I don't have Safari to test this.
I should get Safari.
But I get the same symptom using Mozilla on Unix (but I don't worry much about it, because the band page crashes as soon as it loads a music player, so I figure no one uses Mozilla/unix to view band pages anyway.
I will see if I can figure out what is going on in Mozilla.
Also, I mentioned bringing the image up so that it is underneith the top menu and ad. Have you written anything up on that as well? I didn't find anything when I searched your site, but I may have missed something.
I look forward to your writeup on formating the comments. This is a HUGE help.
Brooke
hi i dont know if you guys could help me but im kind of need some help im getting sick of trying lol
this is my myspace http://www.myspace.com/elhota
all i want is my comments or my friends in separated ways like my friends on the right side up on the blank side and my comments on the left side down the blank side that's all and if there a way to write something like an about me this is my oder web and i copy paste the code and dont work http://www.myspace.com/poison_snake
THANK YOU
Brooke,
My writeup on formatting the comment space is here:
Formatting Comment Space
What image are you referring to?
Is it the image I refer to as the core image in the tutorial?
It should already be just up under the top menu.
Did you want to remove any of the top area (search/menu space)?
If you have extra space on top of the core div you can do this:
div.myCoreDiv {margin-top:-15px}
You can use a negative top margin to remove extra space just above something.
It has limits, related to the parent container boundaries.
Poison,
When you say you want friends and comments in the space on the sides, what exactly do you have in mind.
Did you want your friends in a single column (one friend per column?)
That is not possible without a custom friend space (at least not in IE, it is in FF).
If you are want to keep 4 friends across, you will have to make each one rather small, to make this work.
But in concept, you can do something like this:
-Follow the instructions for putting the friends and comments in a scroll space.
-Make the space wide enough to put the friends on one side and the comments on the other, with space in the middle to accomodate your core.
- Insure you give this div a set height, because we are going to use absolute placement for its contents, and the space needs to be reserved.
-Use absolute positioning to put the friends in the top left corner of the Div holding the friends and comments.
-Use absolute positioning to put the comments in the top right corner of the div.
-Position this div in the top left corner of your core div.
Insure your core div was wide enough to accomodate this.
- Insure your core div has a z-index higher than your friend-and-comment div, so the links work.
Now you can scroll your friends and comments, along the edges, without scrolling your core div.
However, you have to scroll the friends if you are going to scroll the comments.
Let me play with this idea, and your page, maybe I will come up with something (but no guarantee).
brooke,
For the scroll issue try replacing
overflow:auto
with
overflow:scroll
Not all browsers recognize overflow:auto, more recognize overflow:scroll
Also some browsers do not recognize
overflow-y and overflow-x
Therefore if we can do this instead
overflow:scroll; overflow-x:hidden
I also found that Opera didn't treat
height and width the same as FF and IE.
I had to use.
max-width and max-height.
I have not done any testing in Safari yet, but some of the differences I found with Opera may apply to Safari as well.
well if you see this is my other page www.myspace.com/poison_snake is normal not band but the code if you see i have my friends on one side and the comments on the other side then i have my personal about me i want something like that
my friends normaly on the right side but my comments separate on other side alll of them
Brilliant tutorial, works a treat!
Poison,
I looked at that page, and it has a custom friend space.
The comments are directly under it.
It looks different on IE and FF (the friends arrange different and on one it is long enough to scroll).
What browser do you use.
However,
Because it is a custom friend space, it is very versatile.
This arrangement, where you have your about on the right, in a scroll box; with your friends and comments on the left, in another scroll box, is easy to do.
I may not really understand what you want.
Anonymous,
Thanks.
I am glad you liked it.
Eileen, you did a really good job, thanks for sharing it.
I'm about to make a stupid question, please be patient :P
I read the two/three comments about the Upcoming shows and your answers, but I really can't understand how to manage that section. My goal is having upcoming shows shown in my div-overlay-profile, with width and height fixed, and positioned using top and left. Would you explain me how to do it? I would prefer not to link my page because it's really "untidy", but I followed your instructions step-by-step, unhiding comments and blogs. Would you help me unhiding upcoming shows section too, and positioning it?
Sorry for my terrible english.
-- Dan
Everything has worked perfectly. I am finally ready to go LIVE on the artist's actual site - so very excited.
But I have one last concern that I can not figure out.
I would like to load a video (.mov) into one of my custom fields on the left side of the page.
I have tried it like I would a normal website, but no luck. Any ideas? Your help would be greatly appreciated! Thanks.
Brooke
http://www.myspace.com/brooketestsite
Nevermind! I figured it out all by my self. Feeling more and more confident - thanks to your help. Check it out. It is all finished!
http://www.myspace.com/stardeazlan
Okay - one last question.
How do I delete the space between the friends and the comments in my scrollbar? Right now, the comments are so far down they almost get lost. Any help you can give would be greatly appreciated. (This is my last question. I PROMISE!)
Thanks a million.
Brooke
http://www.myspace.com/stardeazlan
Brooke,
Add this, put it in the style block that styles your shows.
{! unDo effect of sizing shows on div in friendSpace !}
table table td.text table div {position:static; height:auto}
I need to make sure I put this in my code, now that they added a div to the friendSpace.
I think more are going to be added later.
FINAL QUESTION!
I was just asked to put a flash graphic on the myspace page - in one of my custom scroll boxes.
I did this and it works great in Safari, and Firefox but two things happen in IE.
1. The flash image isn't in my scrollbox but instead is in the middle of my page.
2. The flash image has to be clicked in order to start playing.
Any ideas?
Thanks so much.
Brooke
http://www.myspace.com/stardeazlan
Brooke,
Remove this:
{! Music Player, we will position this correctly later !}
object {position:absolute; top:0px; left:0px;}
It is effecting your new object, and not really adding any value anyway.
I don't mind if you ask questions. some of them help me find flaws in my code.
Hi, thanks for the great tutorial. I have a problem that I can't seem to figure out though. If you could help me, that would be awesome. Here's a link to my page.
http://myspace.com/derekcoopermusic
So the problem is with the comment input form I added. I have the box and the button exactly where I want it, but it's really hard to click the form to start typing a comment. You have to click the very top of the box to start typing and it's confusing and I don't think everyone knows to click the top of the box. Thanks for your help!
Derek
Me again, I just looked at my profile in firefox (I use Internet Explorer), I need help on two more things in addition to the post above this. In firefox, the post it button for comments is not in the right spot. It's in the right spot if viewed in IE. That's where I need it to go. Also the copyright at the bottom of the page is showing in the wrong spot (by the top friends spot) when its viewed in FF. Thanks for your help.
Derek
thanks then how i do that custom friend space? i want to fix it i dont like it like that and thankx
Hey I hope youre still maintaining this blog. I just started implementing your stuff today and youve done a great job explaining it. Im having a little problem though, I CANNOT get the blog links to be clickable!.....
the blog wont allow me to post my code...
... it shows up fine, but the view more links and the subscribe links arent clickable. Ive moved the code around from section to section on the page but placement doesnt seem to have any effect. Any suggestions?
Thanks!
O
Poisen
I have been looking at some of the custom friend space tools and tutorials in cyberspace, and they are not as good as I thought they were, so I am hesitant to send you to one.
They have older code, which does not seem to have been maintained (they were good at one point).
I will try to write up instructions this weekend and post them here.
I have built several of them, but have never written up the instructions.
If anyone else knows of a friend generator that has been updated to take advantage of the new
table.friendSpace class, feel free to post a link here.
digital
Can you post a link to your myspace page, so I can see what you are talking about, and figure out what is wrong
Derek,
I tested your comment box and it worked for me, I could click anywhere in the box, and it then put the cursor in the top left, where I could start typing.
I am using IE6 and FF2
Which browser are you seeing this problem in?
Your post button looks fine, but it is not exactly the same in both browsers. Why?
Maybe the use of <p>
The <p> tag does not use the same amount of space in FF and IE.
It puts in excess space, in both, but different amounts.
If I want things to take up the same amount of space, cross-browser, I avoid the <p> tag.
yes, so sorry bout that, im still working on it at the moment, the page is
www.myspace.com/finespun
OK, so I should have told you that I'm using IE7. Maybe it's not the browser? Maybe it's just my computer? As for the spacing of the post button. I used-
(p align=right)
(input type="submit" value="Post" class="myPostCommentButton"/)
(/p)
(I used these()instead of >< so I could post the code.)
It looks good in IE7. But it's not in the right spot in FF. Also I heard something about how this script won't work in Safari? Is this true or not?
Also how do I remove the copyright on the very bottom? If you could let me know how to fix these things, that would be great. Thanks so much for all your help.
myspace.com/derekcoopermusic
Such a great tutorial...finally able to *almost* build the myspace of my dreams...except...
Is there any way to reduce the amount of space between the date/hour & the venue in the show listings? Or perhaps remove the hour and reduce the space between the date and the venue?
test site:
http://www.myspace.com/ainamospid
Ive done some more ripping out and replacing of the code, in different sections and everything. I added a z index to the position tag which seemed to help a bit but now im left with 1 link working (view all blogs) and the rest still arent clickable. Ive had it in the Custom Code Content section and the bio section, both yield the same results, 1 link clickable. Again the URL cause i forgot it in my original post is myspace.com/finespun
any help would be appreciated! Look forward to your reply:)
O
UPDATE: darn it! the link all work in IE and not firefox, any clues?
skar,
remove this:
table div.myCoreDiv table div table table table {width:113px !important;}
Add these:
table div.myCoreDiv table div table table td {width:auto !important}
table div.myCoreDiv table div table table td table {width:110px !important; font-size:9px}
table div.myCoreDiv table div table table td a {width:140px !important; padding-left:6px; padding-right:6px; font-size:11px}
You can play with it.
In concept I did this:
set the width of the cells, which hold the date/venue/location to auto. They are all at the same level.
Then I set the level which holds the date and time to the width I wanted it to take up.
I also make the font smaller so it would fit nicely.
I then addressed the venue using the link attribute (since the date and location are not links); to size it.
The remaining space was assigned to the location.
This gives you slightly more control over the sizing of each of the elements in this row.
digital,
The links work, for me, in FireFox and in IE.
Derek,
It works in Safari, I just tested it in Safari.
As far as your post button, not being exactly where you want it, and not exactly the same across different browsers,
REMOVE the <p>
It adds in extra space, and uses different amounts of space in different browsers.
Instead do something like this:
<input type="submit" value="Post" class="myPostCommentButton" style="position:relative; top:20px; left:150px;"/>
Adjust the px values until the button is where you want it.
You may want to remove the copyright thing, since it has moved up, and is not at the bottom.
I notice that you are located not too far from where I live. Do you ever play in the Corvallis area? Maybe if you do I will come and listen.
Hi, I love your tutorial, But I want to put in some content boxes with our own bios and things? on my layout I have some sections where I could put content text for bio, but how do I achieve that? and also, how do I make it in a scroll box in case I wasnt to make it scroll
Thanks Eileen - that fit everything nicely, but I've noticed two things:
1) Other than the Venue/Link, the other font sizings don't seem tohave any effect - I changed it from 9px to 19 px just to verify, and nothing happened.
2) One of the pleasant effects of your code was that while viewed in FF, the "View All" link became almost centered above the venue - no such luck in IE though. Any way to address this so that it is centered in both?
Thanks so much again!
E, yes I got them working last night sometime before i had to leave. The issue? I guesss it was hidden under a bunch of layers for some reason, i tested over and over again with z-index from a value of 1 all the way up to 9! When I set the Z to 9, all the links started working, Im not sure why this is or how it got buried so deep, but alas thats what fixed the issue. Thanks again, Im sure there will be more questions! -- O
Eileen, Thanks so much for your help! Yeah, I live in Salem but right now I'm just doing studio music. We'll see when I do a concert or whatever. I'll let you know! As for removing the copyright at the bottom. Could you post the code for me? I know I saw it somewhere but I can't find it right now for some reason. Thanks so much.
Derek
skar,
Yes, that line of code will only resize the venue.
The problem with getting the (view all) aligned the same cross-browser, is the code has
align="right" for the cell, and again for the span, and FF and Opera don't treat this the same as IE and Safari.
There is no css override that I know of.
You can fix it in IE using IE only syntax to shift the link to the left, but this will not effect Safari.
I would remove the () also, since these are not aligning up correctly.
table div.myCoreDiv table div table table td span.whitelink font {visibility:hidden;}
table div.myCoreDiv table div table table td span.whitelink font a {visibility:visible; font-size:12px; position:relative; _right:200px}
The _ before the word right, causes it to effect only IE.
Hi, I am wondering how to style the rest of the content like generic text, where my friends comments are and like the shows and blogs area. any help would be greatly appreciated, so I can make everything consistant on the page, this is just a test site until I get it all looking good
Just stopping by to say thanks so much for putting up this tutorial and the help you have given me over the last few days. My page is now complete (as far as phase 1 goes anyways!) and viewable at
www.myspace.com/finespun
Little flaky differences between FF and IE, but ya cant please everyone all of the time!
Once again, thanks for all the help, this is THE best myspace tutorial Ive ever had the pleasure of running into.
This page has been instrumental in helping me create a professional looking band page. For that, I thank you from the bottom of my heart because I don't know anything about HTML. Could you help me figure out how to I guess put clear gifs on top of my core div image (i created my own friendspace and built it into my core div image). I can't figure out how to get the gifs in the right space and assign the right links to them. I would SERIOUSLY APPRECIATE YOUR EXPERTISE. I can make a donation too when I get my bank card. Just point me in the right direction PLEASE.
http://www.myspace.com/societyredkills
Eileen
i want something like this
http://www.myspace.com/poison_snake
but i have it like this
i dont like how it is
http://www.myspace.com/elhota
Dave,
I have articles on how to style the individual sections, in my articles for each section.
Check the table of contents on my side bar.
I will add some more this weekend, I don't yet have articles for all the sections on the band page, but I have most of them.
Jeremy,
Thank you,
You can follow my instructions for creating links, by putting clear gifs over the area you want to turn into a link.
For example, to turn "Skinny" into a link, I measure the coordinates of the top left of the area I want to turn into the link.
For Skinny this is:
top:4540px; left:1px
I measure from the top left of your core image, NOT the actual page.
I also need the size of the link space.
For Skinny this is:
with:180px
height:270px;
To turn this into a link I use the following line of code:
<a href="http://profile.myspace.com/239983437" style="position:absolute; top:4540px; left:1px; z-index:1">
<img src="http://x.myspace.com/images/clear.gif" style="width:180px; height:270px;"></a>
I place the line of code inside div .myCoreDiv
AFTER the line where you put in the image, and BEFORE the line that says
END CUSTOM CONTENT.
To get the measurements I placed a grid on top of the image, I mention how to do this in the article.
OR,
You can use any tool you have for getting coordinates on an image.
Jeremy,
One more thing:
You want to change the width of div.myCoreDiv.
In FireFox it does not center, because your core image is 1024 and you have the div width set to 800.
Change the 800 to 1024
Digital,
Thanks.
Your page looks really good.
You can remove the grey, on the bottom, behind the links, like this:
tr {background-color:transparent}
The new div in the friendspace is causing the scroll to show up there.
You can fix this by adding
overflow:hidden
to this line:
table table td.text table div {position:static; height:auto; overflow:hidden }
I think you should change
overflow-y:scroll
to
overflow:scroll
Some browsers do not understand overflow-y and overflow-x
By doing this:
overflow:scroll; overflow-x:hidden
you allow ALL browsers to initially apply the overflow:scroll in both directions;
Then only those that understand overflow-x will apply the hidden in the X direction.
I only recently installed Opera and Safari, so I am starting to modify my code based on the behavior of these two browsers.
Thank you so much for this!! So easy to use! It took me a while since it was my frist time, but now im gonna breeze through them!!
let me know what you think!!
www.myspace.com/brightlightss
brightlightss,
Very Nice.
Do you use IE.
In FF it is off center.
This is because you did not set the width of the core div, wide enough to accomodate the image.
The image is
width:1024
change
width:768px
to
width:1024px
This will cause it to center across multiple browsers.
Eileen, can you recommend a good custom friendspace generator and illustrate how to incorporate it?
I attempted using your custom bio/scroll space for this and used the friend geenrator at http://friends.skem9.com/ but it totally messed everything up.
Any suggestions?
skar,
Let me do some research on this, and see what I can find.
I will do this tonight, and post something here tomorrow.
What I suspect is that I am not going to find anything better than the skem9 one, which I noticed had not been updated.
What I may end up doing is recommending a few specific changes to the code it generates.
I will post something here, after I play with it tonight.
Eileen,
You have said that you have managed to get the page views to work on a band page, but you don't want to include a tutorial on here for it because it's more trouble than it's worth.
The band I'm making the layout for really REALLY want the profile views on their page. Is there any chance you could share the code with us? I'd really appreciate it.
Hi Eileen,
I need your assistance with this, first off, if you look at my site in IE then in firefox, firefox shows it off center,
my main question is, when looking at my site, in the bio section, how do I get my text in my custom scroll box to align all the way to the left and not have that bottom scroll box? I just want a scroll on the right side?
Thanks alot
Dave
Dave,
You have to set the width of your core div to the same width as your core image.
in the line that has this:
class="myCoreDiv" style="position:relative; top:0px; width:800px;
change the width to this:
width:900px
That will center it in FF and some other obscure browsers.
For your scroll bio, you may want to do a div inside a div. I should have done an example that way, since the scroll bar takes up some space, that is not accounted for by the rest of the content.
First add this:
overflow-x:hidden;
to your inline style command for div class="myBio". You can add it right after the overflow:auto.
Next create a new div inside this div.
Directly after this line:
<div class="myBio" style="width:334px; height:500px; position:absolute; top:683px; left:38px; overflow:auto; overflow-x:hidden; align:left;">
(notice I added overflow-x:hidden to the above line);
Add this line:
<div class="myBioI" style="width:314px; height:auto; position:absolute; top:0px; left:0px; text-align:left;">
Then just before this:
</div><span class="off">!CLOSE Text ...
put in this:
</div>
If you want the scroll to work in some obscure browsers you need to change
overflow:auto to overflow:scroll
You also want to avoid
overflow-y:auto; overflow-x:hidden
After I started testing in Opera and Safari, I changed all of my code which did that to:
overflow:scroll; overflow-x:hidden
While the hidden does not take effect in all browsers, it does in the most common browsers.
At least the overflow:scroll takes effect in more browsers (except very very old ones).
I will answer the rest of the unanswered comments, later, as well as following up on the custom friend space thing.
Hi eileen, thank you so much, that helped me out big time.
now I just have one more issue that I just cant seem to solve and have been trying to get this right for a few hours now.
All I want to do is to make all my text white and links red within my site and I just cant seem to figure this out for the life of me!
I am talking about like my discography section and also when I fill in my booking section. I manually did the bio section cause I just couldnt figure this out.
Thank You soooo much
Dave
Ransom
Code for importing the profile-views can be found here:
Import profile views into div overlay
Good Luck with it, getting the sizing and positioning correct is a bit tedious, but I got it to work.
I tested in in Opera, FireFox and IE. I don't know how it will do in Safari or other browsers. It has some non standard (incomplete syntax) due to the limited space in the headline field. But it works.
Can I just say this tutorial has been invaluable in teaching me how to make a div layout for my band. It's amazing, thanks.
I'm currently in the throes of designing and testing and improving upon my layout, and although I know you've already mentioned that it's not worth having the standard top left table on your div layout, I would reaaaaaally like to have that content in my new layout, simply because I know that the manager and other members of the band would like to have the ability to change the default, and I certainly wouldn't like to have to be rushing home to do it manually at their beckon call. Is there any simple way to basically just lift that area and place it in the new layout?
Anonymous,
Yes, it can be done.
But it changes the hide strategy, and may require you change your existing code.
When I originally wrote this, I didn't realize that the band page allowed html tags in the headline. (The standard page does not);
So I didn't take advantage of that.
By taking advantage of putting tags in the headline, we can alter the table structure, in such a way, as to make it much easier to classify and isolate the profile data in the top left.
I just did it on a test page, but I don't have time to write it up tonight.
I will try to write it up tomorrow night.
Hi Eileen, I am running into a problem, I am trying to put a top banner on my site above the advertisment stuff at the top, and no matter what happens, all I get is the height and width of the banner where it should be, pushing down the advertisement block, but my banner does not get inserted, that area is just blank (and I know I am using the right address for my banner, and the dimensions of it are 400H - 900W.
Please help if you can, I am struggling with this.
Thank You sooo much
Dave
Eileen
Its bright lights again.
You said it did not show up centered in FF. If I make the image width 1024, wont it then be too big for IE?
I used IE...
Thanks!
Ian,
No, it will not mess it up in IE, if you increase the width.
Increase the width, and it will center in all the browsers I tested it in.
Hi Eileen, I just wanted to thank you for such an awesome tutorial, my site is basically ready to go live now!!!! the only thing that is holding me back is trying to figure out what is wrong with my top banner at the top of my site, its not showing up. if you could look at it and let me know where I screwed up, that would be great!
again, thank you so much for one of the best tutorials I have ever read!
Dave
I am working on a new myspace page for an artist that has a long list of tour dates. I would like to show only the first 10 shows and then have the button that says "show all" take you to a list that has all of the shows. This will keep my page looking clean and eliminate the need for a scroll box. How would I go about doing this? Thanks so much.
Brooke
www.myspace.com/brooketestsite
Eileen,
Just a few ?
http://www.myspace.com/younglords
I'm making this page for my friends band. There seems to be a pink border coming up around my whole project. Is this because of Imageshack? Is there a code that can get rid of this? Its not part of my image
Also, I'm trying to add a youtube video under the quotes part of the page. Is there a code I can use? I can figure out the points, Im just not sure of a code.
Thank you so much again! This page has kept me busy!!!
Ahh one more thing!
There is a ton of space between my comments and bottom of my core image. can i reduce that?
Hi Eileen, I forgot to mention that the top banner I am using will be a flash presentation when we go live. I could figure that part out I think as long as I get the top banner as it is now to show.
Thanks alot,
Dave
ian
You seem to have figured out the answers, as I am seeing that you have successfully eliminated the pink border (I love pink borders) and have placed a youtube video, and I see no gap between the bottom of this video and your comments.
Very nice looking page.
Dave
You need to do two things to make your top banner show
1) You need to move the block of code, to an area which is not in the hidden section of the page.
Take the entire block, and move it to just before this:
<span class="off">!!Create and size our div ...
2) Add this to the style block, within the above block:
table div.myBanner, table div.myBanner img {display:block; visibility:visible;}
You can replace the image with an object (such as a flash video).
Eileen,
Thank you! I'm not crazy about the very top header, but its what they wanted, sooo...
Also, I finally figured out the youtube problem. It took me a while, but i feel accomplished now that Ive taken care of it. I have about 5 other band profiles I need to take care of now! So busy!
And there is a gap between the friends at the bottm and the comments. Is there not one for you? It seems after my whole layout, I have to scroll down a bit to se the comments...not sure how i can change that...
Eileen, any luck with incorporating a custom friendspace into a band div yet? :)
Ian,
There is a gap, but it is the black space at the end of your core image, not blank space.
You can do this:
table.friendsComments {margin-top:-100px}
that will bring it up 100px.
Good Luck writing pages.
Do you get paid very much to do this? I might be looking for another job, I don't like my current job very much (but they do pay me a lot).
skar,
I didn't get that done.
I started and then I got side tracked.
I will try to write something up tonight.
As for creating a generator, I plan to do that also, but not tonight.
brooke,
Instead of overflow:auto
you can use overflow:hidden.
If you set the value correctly, and set the font sizes to a px size, this should work.
There is already a view all link, isn't there.
Top right of the show space?
You can create a custom link for the job, if the provided one does not meet your needs.
Eileen,
I'm such an idiot! After staring at this all day i forgot my image was that big. Ill have to cut that down. Duh!
Any Paid? Nonono, These are for my friends bands in the pa, ny area. I'm from pittsburgh myself.
What I actually am trying to do, is make somewhat of a portfolio of these and get a job at a record label. My friends band has signed to warner bros, so im trying to get my foot in the door through them.
what do you currently do?
my email is ianckeller@gmail.com if you would like to reply there.
Hi Eileen, thank you so much for your help! it works perfectly, the site is now live here - http://www.myspace.com/agnosticfront
But I was just told we needed something and that is the page views cause it helps with booking agents (I cant use a counter from the web cause it wil start from 0 and I need our current page views also), I followed your tutorial exactly on page views but if you look here - http://www.myspace.com/agnosticfronttest
down on the left hand side, you will see the block where page views resides.
I put this the line of code in the header like stated in your tutorial -
and I put the style block that you had listed in the very bottom of the influences section
now as you see, I have a block of text just showing some of the state we are in and no matter what I change I cannot push that block up and I also have a black line a few pixels above it.
Please help, Thank you soooo much!
Dave
Post a Comment
Due to Excessive Spam, I have turned on comment moderation.
Links to this post:
Create a Link
<< Home