Custom Banner Top MySpace
Add a Custom Banner to the Top of The MySpace Page
MOST code that moves the body down, for the sake of placing a top banner, messes up the location of the drop down links in the main menu.
I have found a solution that solves the issue. However, I have so far only updated the code in my generator, and have not yet updated the older code on this page.
Any code which attempts to use position:relative or position:absolute, that effects the top banner area (even if it does not intend to effect that area) will mess up the location of the drop down top menu links.
Most of these solutions work on
- Regular Page
- Band Page
- Film Page
- comedy page
For a Code Generator (which will determine the correct values after you enter the url of your image, and banner location):
Click Here for Top Banner Code Generator
A banner can be added to multiple locations in the top page area,
For those who are interested in an explanations, so you can create and/or modify the code, read the article below.
This will also give you the needed code to place an object (such as a flash swf file) in the top area.
For those who do not want to read through my Explanations and just want some quick code blocks, you can use the below links to jump to the desired page content:
Using the Top of your Background Image as a Top Banner
Placing Custom Banner OR other content (Div, Object, Marquee) at the very TOP of the page, above Ad Banner
Place Banner just under Ad Banner, Keep Google Search Form
Placing image just above the main navigation bar
Placing image just above the main table
Full Example: placing image Under Main Navigation Bar, and placing multiple links on the image
Placing Custom Banner Under the Music Nav Bar
Banner Under Top Menus, Where image border alignment with border around main table is Important
There are multiple techniques one can use to place a custom banner near the top of the Page.
Placement Strategies
There are two basic placement strategies.
(There are more, but only two I recommend, for the top space)
1)Absolute Placement:
I recommend this IF you are very close to the top of the page.
OR (you need to make links AND are still reasonably close to the top of the page.)
OR alignment with your background image is MORE IMPORTANT than alignment with your top menu area (default page content).
2)As a Background Image to Something which is already on the page.
Before the most recent round of core code changes, I recommend this if one was going lower than just below the ad banner, and wanted very accurate placement.
using the top of your background image as a top banner
The below code only creates a margin above the top Ad Banner. It is useful if you want to draw your top banner directly into your background image.
You can place this code at the very top of the about or bio section:
Putting your own image, marquee, or flash or other content at the very TOP of the page
This code works on the Standard Page, Band Page, Comedy and Film Page.
This code is designed to place the banner (or div content), logically OUTSIDE of the table you are placing the code in. I do this, because too often people have utilized a position command on the table. In these cases, the banner was unable to position outside the table, in IE.
This solution also has code to prevent some very common page customizations from rendering the top banner not visible.
This is the reason my solution, has much more code than most solutions.
But it does work in more cases, with more profiles, than the other code I have seen published.
It is VERY IMPORTANT that this code get placed AFTER any content, in either the To Meet or Bio or Heroes (only if you are not showing groups) or Any of the General Sections on the Band Page
IF in doubt, as to where you can place this code, place it at the END of the Bio or Meet section; UNLESS you already placed structure altering code (opened or closed a div or table) in this space.
IF you have a block of code, other than just an image (such as a marquee, sliced image OR flash object, or Other), you can still use the above technique.
Just replace what I have placed inside the div.myBanner (I have only an image inside) with your own code block. Your block may consist of an object, another div, a table structure or other.
Placing image just Below the Ad banner
On the standard page, there is a rumor that it is against the terms of service to move the ad banner down. I have not seen this in the terms. The language they use is "obscure". Therefore I would not move it down too far. Use your own judgment.
Because the ad banner is EXACTLY 90px in height, we can measure accurately from the top of the page, to the placement point for our banner.
Therefore I still use absolute placement.
[note: in FF there are an extra 10 pixels above the ad. The extra 10 pixels are caused by a form, that is not used, but is in the code, and takes up space in FF but not IE.
You can eliminate the form.]
Place Banner just under Ad Banner, Keep Google Search Form
Works with Standard Page, Band Page, Comedy and Film Page.
The below code keeps the google search form, and places your banner just below the ad banner.
Using Either of the code blocks above, the image can be turned into a link by replacing this line:
<img src="http://i10.tinypic.com/639n3br.jpg">
With This:
<a href="http://spiff-myspace.blogspot.com"><img src="http://i10.tinypic.com/639n3br.jpg"></a>
Replace both the URL for the link, and the URL for the image, with your own data.
IF you are placing the ad banner, below the Google search, or below any of the top menus, I recommend a different strategy.
The below code blocks all use the background image strategy.
(Links can still be added, but as a separate step).
The following page elements can be easily hijacked for use as a custom banner.
Please see my top banner code generator:
Click Here to Use the Top Banner Code Tool
I have updated the code in that tool, and removed it from this article.
Turning images into a Link
My tool places image banners, which go below the google search (or lower) using a background image property.
This means it is more difficult to tun them into a link.
To turn the image into a link, we are going to use a clear gif, and place the gif over the image, and turn the image into a link.
Because the link image will be clear, it is not as critical that its placement is perfectly aligned.
I will use the same clear gif that is already used on the default myspace page.
The distance, in pixels, from the top of the page, to the bottom of the music navigation bar (where we placed the image) is about 215 pixels.
It varies from 209px to 221 (I measured in IE and FF and in multiple resolutions).
I do NOT want to cover the links on the maroon bar, that is more important than slight overlap into the table space below the image.
Based on this, I am going to use 222px. I will also make my clear gif about 20 px less than the height of my image.
Placing the image just above the main navigation bar
The following page elements can be easily hijacked for use as a custom banner.
Please see my top banner code generator:
Click Here to Use the Top Banner Code Tool
I have updated the code in that tool, and removed the code from this article.
I will update the tool to handle link images very soon.
==== the stuff below this line has not been updated based on the latest code changes. It may or may not still be valid ========================
Get measurements for Links
If you do not know how to do this, and do not have a tool to do this easily, I have created a grid with a clear background. You can temporarily place this grid on your page, to get measurements.
If you want to use my grid, add this code block (it is temporary, you will remove it later).
Here is a picture of what my page looks like, after I have placed the image, and placed the grid on top of the image:
As seen in FF at 96 dpi
As seen in IE at 96 dpi
As seen in IE at 120 dpi
Notice the differences in how the image sits, with relation to the grid.
Notice that in all three cases, the image sits neatly under the main nav bar, even in the case where the navigation bar wrapped to the next line.
Because we are going to place our clear gifs (which will become our links), with reference to the whole page, and not an inner div, we need to measure from top AND center (not left or right).
We also need to know the height and width of the area we are going to link.
I will measure for 4 links. I have the 4 areas outlined in violet on my image.
In each case I am going to use a large area in the center of the image, but insure that I don't include any area which overlaps my top menu.
I get the following:
Hint on getting measurements:
If I place an image, left:50%, it places the left side of the image center.
with the rest of the image off to the right.
If I then add a margin-left, it moves the image to the RIGHT, the amount of that margin (creating a margin on the left side). If I make the margin-left negative, it move to the left.
Now that I have my measurements, I can add in my links.
I am going to put each link in a div. I will give each div 2 classes. On class will be used by all my links which use the clear gif image. The other class will be unique to the specific link.
The below code has all 4 links, each in a div.
Then I have the style block.
I undersized my link images, to account for variance in the 4 platforms I was testing with. (Keep in mind, that this variance would be in our actual image placement, and not our clear gif link images, had we used absolute placement for our main image).
Here is the code:
Images of Results:
The grid and purple dashes around the clear gif images are TEMPORARY.
They would be removed from the final page.
in IE 96dpi
in FF 120dpi
My other tests came out somewhere in the same range, I just wanted to show a few differences. Note that I sized my clear gif images so that they were within acceptable bounds, and did not overlap the nav bar above or below my custom image.
Also keep in mind, that whatever inaccuracies we have to tolerate, for the placement of our clear gif, we would have to tolerate for our visible image, if we used strategy 1.
Another interesting thing to note, from the above pictures, is the difference in how the main navigation bar behaves, when it does not all fit within the 800px of width; versus how the maroon music nav bar behaves.
If you want to prevent the main navigation bar from wrapping, it is possible (within limits.
I explain it in this article: MySpace Top Menu Styling
To remove the blue (red on mouseover) from the link images, add this code:
Banner Under Top Menus, Where alignment with border around main table is Important
In this example I use the main table as the container for the background image.
This method is preferred if you want the banner image within a border which is shared with the main content (and not with the ad/menu area).
If you do NOT have a band page, it works well to put the background image and border two tables deep instead of one. (On the Band Page, the freindsComments are themselves two tables deep, and outside of the main two deep table).
This can be done without effecting the bottom link area.
It does require that you remove the clear gif spacer to the left, or things will look out of balance. However, for a non BAND page, which wants a top banner, under the top menu area, and in perfect alignment with the main page content, this is probably the best solution
======[add code here for two table deep solution]=======
MOST code that moves the body down, for the sake of placing a top banner, messes up the location of the drop down links in the main menu.
I have found a solution that solves the issue. However, I have so far only updated the code in my generator, and have not yet updated the older code on this page.
Any code which attempts to use position:relative or position:absolute, that effects the top banner area (even if it does not intend to effect that area) will mess up the location of the drop down top menu links.
Most of these solutions work on
- Regular Page
- Band Page
- Film Page
- comedy page
For a Code Generator (which will determine the correct values after you enter the url of your image, and banner location):
Click Here for Top Banner Code Generator
A banner can be added to multiple locations in the top page area,
For those who are interested in an explanations, so you can create and/or modify the code, read the article below.
This will also give you the needed code to place an object (such as a flash swf file) in the top area.
For those who do not want to read through my Explanations and just want some quick code blocks, you can use the below links to jump to the desired page content:
Using the Top of your Background Image as a Top Banner
Placing Custom Banner OR other content (Div, Object, Marquee) at the very TOP of the page, above Ad Banner
Place Banner just under Ad Banner, Keep Google Search Form
Placing image just above the main navigation bar
Placing image just above the main table
Full Example: placing image Under Main Navigation Bar, and placing multiple links on the image
Placing Custom Banner Under the Music Nav Bar
Banner Under Top Menus, Where image border alignment with border around main table is Important
There are multiple techniques one can use to place a custom banner near the top of the Page.
Placement Strategies
There are two basic placement strategies.
(There are more, but only two I recommend, for the top space)
1)Absolute Placement:
I recommend this IF you are very close to the top of the page.
OR (you need to make links AND are still reasonably close to the top of the page.)
OR alignment with your background image is MORE IMPORTANT than alignment with your top menu area (default page content).
2)As a Background Image to Something which is already on the page.
Before the most recent round of core code changes, I recommend this if one was going lower than just below the ad banner, and wanted very accurate placement.
using the top of your background image as a top banner
The below code only creates a margin above the top Ad Banner. It is useful if you want to draw your top banner directly into your background image.
You can place this code at the very top of the about or bio section:
<a class="i">START CODE TO MAKE TOP MARGIN ABOVE AD
<a href="xiii.us/ms/ad-search-menu">MySpace Top Banner</a>
<style>
.i {display:none}
body.bodyContent {margin-top:60px !important}
div.clearfix i i.i {margin-top:0px !important }
{! IF you have a Comedy page, you also need the below.
value needs to be 160 plus top margin !}
div.profileWidth table div ul, div.clearfix i i.i {top:220px !important;}
</style>
END CODE TO MAKE TOP MARGIN ABOVE AD </a>
Putting your own image, marquee, or flash or other content at the very TOP of the page
This code works on the Standard Page, Band Page, Comedy and Film Page.
This code is designed to place the banner (or div content), logically OUTSIDE of the table you are placing the code in. I do this, because too often people have utilized a position command on the table. In these cases, the banner was unable to position outside the table, in IE.
This solution also has code to prevent some very common page customizations from rendering the top banner not visible.
This is the reason my solution, has much more code than most solutions.
But it does work in more cases, with more profiles, than the other code I have seen published.
It is VERY IMPORTANT that this code get placed AFTER any content, in either the To Meet or Bio or Heroes (only if you are not showing groups) or Any of the General Sections on the Band Page
IF in doubt, as to where you can place this code, place it at the END of the Bio or Meet section; UNLESS you already placed structure altering code (opened or closed a div or table) in this space.
<i class=i>!!! Start Code To Apply Top Banner !!!!</i>
</td></tr></table>
</td></tr></table>
<a class="i" href="http://xiii.us/ms/top-banner" title="myspace top banner">
Custom top banner code by Eileen</a>
<div class="xiiiTopBanner" style="position:absolute; top:0px; left:50%; margin-top:0px; margin-left:-410px; z-index:9 !important">
<img src="http://i10.tinypic.com/639n3br.jpg">
</div>
<style>
.i {display:none;}
{!-Create space for image above body-!}
body.bodyContent, body, i i i.x {margin-top:100px;}
{!-The below value needs to be 160 + the height of your top banner -!
div.profileWidth table div ul, div.clearfix i i.i {top:260px !important;}
</style>
<table class=i><tr><td>
<table><tr><td>
<i class=i>!!! End Code To Apply Top Banner !!!</i>
IF you have a block of code, other than just an image (such as a marquee, sliced image OR flash object, or Other), you can still use the above technique.
Just replace what I have placed inside the div.myBanner (I have only an image inside) with your own code block. Your block may consist of an object, another div, a table structure or other.
Placing image just Below the Ad banner
On the standard page, there is a rumor that it is against the terms of service to move the ad banner down. I have not seen this in the terms. The language they use is "obscure". Therefore I would not move it down too far. Use your own judgment.
Because the ad banner is EXACTLY 90px in height, we can measure accurately from the top of the page, to the placement point for our banner.
Therefore I still use absolute placement.
[note: in FF there are an extra 10 pixels above the ad. The extra 10 pixels are caused by a form, that is not used, but is in the code, and takes up space in FF but not IE.
You can eliminate the form.]
Place Banner just under Ad Banner, Keep Google Search Form
Works with Standard Page, Band Page, Comedy and Film Page.
The below code keeps the google search form, and places your banner just below the ad banner.
<i class=i>!!! Start Code To Apply Top Banner !!!!</i>
</td></tr></table>
</td></tr></table>
<a class="i" href="http://xiii.us/ms/top-banner" title="myspace top banner">
Custom top banner code by Eileen</a>
<div class="xiiiTopBannerUA" style="position:absolute; top:90px; left:50%; margin-top:0px; margin-bottom:0px; margin-left:-410px;">
<img src="http://i10.tinypic.com/639n3br.jpg">
</div>
<style>
.i {display:none}
{!-make room Under Ad -!}
div.profileWidth div.clearfix div {margin-bottom:105px !important;}
div.profileWidth div.clearfix div div, div.profileWidth div.clearfix div.profile, div.profileWidth div.clearfix i i.i {margin-bottom:0px !important}
{! the below value needs to be 160px + height of your banner !}
div.profileWidth table div ul, div.clearfix i i.i {top:260px !important;}
</style>
<table class=i><tr><td>
<table><tr><td>
<i class=i>!!! End Code To Apply Top Banner !!!</i>
Using Either of the code blocks above, the image can be turned into a link by replacing this line:
<img src="http://i10.tinypic.com/639n3br.jpg">
With This:
<a href="http://spiff-myspace.blogspot.com"><img src="http://i10.tinypic.com/639n3br.jpg"></a>
Replace both the URL for the link, and the URL for the image, with your own data.
IF you are placing the ad banner, below the Google search, or below any of the top menus, I recommend a different strategy.
The below code blocks all use the background image strategy.
(Links can still be added, but as a separate step).
The following page elements can be easily hijacked for use as a custom banner.
Please see my top banner code generator:
Click Here to Use the Top Banner Code Tool
I have updated the code in that tool, and removed it from this article.
Turning images into a Link
My tool places image banners, which go below the google search (or lower) using a background image property.
This means it is more difficult to tun them into a link.
To turn the image into a link, we are going to use a clear gif, and place the gif over the image, and turn the image into a link.
Because the link image will be clear, it is not as critical that its placement is perfectly aligned.
I will use the same clear gif that is already used on the default myspace page.
The distance, in pixels, from the top of the page, to the bottom of the music navigation bar (where we placed the image) is about 215 pixels.
It varies from 209px to 221 (I measured in IE and FF and in multiple resolutions).
I do NOT want to cover the links on the maroon bar, that is more important than slight overlap into the table space below the image.
Based on this, I am going to use 222px. I will also make my clear gif about 20 px less than the height of my image.
Placing the image just above the main navigation bar
The following page elements can be easily hijacked for use as a custom banner.
Please see my top banner code generator:
Click Here to Use the Top Banner Code Tool
I have updated the code in that tool, and removed the code from this article.
I will update the tool to handle link images very soon.
==== the stuff below this line has not been updated based on the latest code changes. It may or may not still be valid ========================
Get measurements for Links
If you do not know how to do this, and do not have a tool to do this easily, I have created a grid with a clear background. You can temporarily place this grid on your page, to get measurements.
If you want to use my grid, add this code block (it is temporary, you will remove it later).
<div class="grid1" style="position:absolute; top:0px; left:0px; z-index:0">
<img src="http://i11.tinypic.com/4pczehk.gif" >
</div> Here is a picture of what my page looks like, after I have placed the image, and placed the grid on top of the image:
As seen in FF at 96 dpi
As seen in IE at 96 dpi
As seen in IE at 120 dpi
Notice the differences in how the image sits, with relation to the grid.
Notice that in all three cases, the image sits neatly under the main nav bar, even in the case where the navigation bar wrapped to the next line.
Because we are going to place our clear gifs (which will become our links), with reference to the whole page, and not an inner div, we need to measure from top AND center (not left or right).
We also need to know the height and width of the area we are going to link.
I will measure for 4 links. I have the 4 areas outlined in violet on my image.
In each case I am going to use a large area in the center of the image, but insure that I don't include any area which overlaps my top menu.
I get the following:
| top | center of page to edge of link area | width | height |
| 200 | 330 left to left edge | 550 | 75 |
| 300 | 300 left to left edge | 140 | 70 |
| 300 | 120 left to left edge | 140 | 70 |
| 300 | 200 right to right edge | 140 | 70 |
Hint on getting measurements:
If I place an image, left:50%, it places the left side of the image center.
with the rest of the image off to the right.
If I then add a margin-left, it moves the image to the RIGHT, the amount of that margin (creating a margin on the left side). If I make the margin-left negative, it move to the left.
Now that I have my measurements, I can add in my links.
I am going to put each link in a div. I will give each div 2 classes. On class will be used by all my links which use the clear gif image. The other class will be unique to the specific link.
The below code has all 4 links, each in a div.
Then I have the style block.
I undersized my link images, to account for variance in the 4 platforms I was testing with. (Keep in mind, that this variance would be in our actual image placement, and not our clear gif link images, had we used absolute placement for our main image).
Here is the code:
<span class="off">!-Create my Links using Clear Gif Image-!</span>
<div class="myL myL1" >
<a href="http://xiii.us/ms1">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>
<div class="myL myL2">
<a href="http://xiii.us/ms1">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>
<div class="myL myL3">
<a href="http://xiii.us/ms1">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>
<div class="myL myL4">
<a href="http://xiii.us/ms1">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>
<span class="off">!-Use style to position and size-!</span>
<style>
div.myL {z-index:8}
{!-position and size link 1-!}
div.myL1 {position:absolute; top:200px; left:50%; margin-left:-320px;}
div.myL1 img {width:540px; height:70px}
{!-position and size link 2-!}
div.myL2 {position:absolute; top:300px; left:50%; margin-left:-300px;}
div.myL2 img {width:140px; height:50px}
{!-position and size link 2-!}
div.myL3 {position:absolute; top:300px; left:50%; margin-left:-120px;}
div.myL3 img {width:140px; height:50px}
{!-position and size link 2-!}
div.myL4 {position:absolute; top:300px; right:50%; margin-right:-200px;}
div.myL4 img {width:140px; height:50px}
</style>Images of Results:
The grid and purple dashes around the clear gif images are TEMPORARY.
They would be removed from the final page.
in IE 96dpi
in FF 120dpi
My other tests came out somewhere in the same range, I just wanted to show a few differences. Note that I sized my clear gif images so that they were within acceptable bounds, and did not overlap the nav bar above or below my custom image.
Also keep in mind, that whatever inaccuracies we have to tolerate, for the placement of our clear gif, we would have to tolerate for our visible image, if we used strategy 1.
Another interesting thing to note, from the above pictures, is the difference in how the main navigation bar behaves, when it does not all fit within the 800px of width; versus how the maroon music nav bar behaves.
If you want to prevent the main navigation bar from wrapping, it is possible (within limits.
I explain it in this article: MySpace Top Menu Styling
To remove the blue (red on mouseover) from the link images, add this code:
<style>
{! remove border from link images !}
a img {border:none !important}
</style>
Banner Under Top Menus, Where alignment with border around main table is Important
In this example I use the main table as the container for the background image.
This method is preferred if you want the banner image within a border which is shared with the main content (and not with the ad/menu area).
If you do NOT have a band page, it works well to put the background image and border two tables deep instead of one. (On the Band Page, the freindsComments are themselves two tables deep, and outside of the main two deep table).
This can be done without effecting the bottom link area.
It does require that you remove the clear gif spacer to the left, or things will look out of balance. However, for a non BAND page, which wants a top banner, under the top menu area, and in perfect alignment with the main page content, this is probably the best solution
======[add code here for two table deep solution]=======
Thank you for Visiting; Have a Nice Day :-)
Queries hitting other pages of mine, which should be hitting this page:
- myspace header ad banner codes.
- how to put a banner under the advertisements on your myspace
- how to put a picture above band profile
- how to put a photo at top of band page code
- how to add myspace headers like bands have
- how to push down your myspace to add a top banner
- Are we allowed to add a custom banner to the top of the page and push down the ad? I don't know. I have not seen in the rules were it says that we can not.
- How to create space above ad advertisement for custom logo
- mySpace top banner code is easy to apply.
-add cusom size banner top myspace bands layouts
- get custom banner under myspace links
Queries hitting other pages of mine, which should be hitting this page:
- myspace header ad banner codes.
- how to put a banner under the advertisements on your myspace
- how to put a picture above band profile
- how to put a photo at top of band page code
- how to add myspace headers like bands have
- how to push down your myspace to add a top banner
- Are we allowed to add a custom banner to the top of the page and push down the ad? I don't know. I have not seen in the rules were it says that we can not.
- How to create space above ad advertisement for custom logo
- mySpace top banner code is easy to apply.
-add cusom size banner top myspace bands layouts
- get custom banner under myspace links
Labels: myspace banner
posted by u∃∃l!∃ at Monday, May 14, 2007
133 Comments:
Thanks this will come in handy :)
Hi there,
Great site, thanks for your help!!!
www.myspace.com/thekull
im using the code to put links in my image/banner. the only thing thats not working for me is the grid.. do i have to ajust anything in the code to have it view on my profile?? or is ther a certain software i need??
my URL is: http://myspace.com/kweenx666
Dan
you are welcome.
Very nice looking page.
Interesting music.
Diana
I am not sure I understand what you are trying to do.
The grid thing, I suggest, is only supposed to be temporary, to help get measurements. You don't need it.
You should not need special software.
I love your background, especially the square with the pacman game mosters.
Hey man Im trying to put a Banner above the ad and have a normal Body background how would I go about doing this???
phreaknovic
The first code block, in this article, works for that.
Did you try the code, and did it not work for you?
If not, maybe I can look at your page.
Ok kool thanks man for the code and the speedy response!!!! THANKS!!!
Hi there my lovely,
Well, the gap was made everything was snazzy but the image didnt show up, on every variation i made with coding or different image hosting websites i tried.
http://farm3.static.flickr.com/2224/2113119087_cb75bd3a81_b.jpghttp://farm3.static.flickr.com/2224/2113119087_cb75bd3a81_b.jpg
(1024 x 795)
The profile i was trying to make it work on:
http://www.myspace.com/abbi_london_photographic
any help you could give would be fab! xx
abbi, I have the same problem.
How did you fix it?
I want to place the banner on top of the Ad.
The space is created, but the image does not appear. Additionally the 'Use Shortcuts:' scrolldown menu appears.
hey guys can you help me please ... I'm trying to put the a flash movie just under the myspace advertising (top center) like "http://profile.myspace.com/index.
cfm?fuseaction=user.viewprofile&
friendid=167511134"
but i'm not able ... can you help me to know how can i fixed it .? Plz.
You create space for the banner the same way you would if you were putting any other banner in that space.
However, for this a background image won't work, so you need to resort to absolute placement.
Allow for some extra space,since the distance from the top of the page, to the bottom of the top menu, is NOT the same cross browser.
Use the example for placing a banner under the navigation bar, to create the space.
Then use the example for putting a banner at the very top of the page, to place the flash.
Just insure that your top value is not zero, but instead the distance from the top of the page, to where you want your banner.
hi,
when i put the code in and click preview, the submit button is blocked by the preview of the banner, how do i stop this happening?
You have to use safe mode.
anybody know how to remove the red myspace music navigation bar from a band profile??
to remove the maroon nav bar
remove maroon nav bar, click here
ur awesome eileen.
Hi Eileen! I got the top banner image to work, but I have another question. Do you know the code to make the whole top background black?
Because, I have the body of my page with a black background. The sides of the page show stripes, but I would like from the top of the page to the start of the body to be all black.
If you look at my page, you see the top image is on top of the stripes, but I would like it to be black behind the image, down until the top of the body. Know what I mean?
My page is at myspace.com/diadembrand
Thanks so much!
hey thank you so much for all the great tutorials!
i'm trying to make a div band layout for a friend whos in a band i know
however i had a couple of problems in the process of making it:
i keep trying to put the top banner either below or above the myspace ads but it doesn't show up. im not sure if i'm putting the code in the wrong section or what.
also i was wondering if it would be possible to put a black background behind my div image. theres gray spaces on both of the sides of the profile& i was just wondering if there was a code that could change it to black instead of grey.
i would greatly appreciate it if you could give me some suggestions. thank you so much!
heres my page if you need to take a look at it:
myspace.com/dinorawrhxc
--syd
I want to thank you so much for this! I have been looking all over the web for a way to make it look right in both FF and IE.
thanks!
xoxo
THANK YOU SO MUCH!! Only problem i'm having with this code is how the heck do I get rid of all the extra space below the banner?
http://www.myspace.com/rawveganmom
NM I found it!! Yay!!
Hey there,
the code for banner under music nav bar is great..although when theres a roll over ad on my page it gets all messed up. Is there a way to fix this?
thanks
Hey i need to create a link on my girlfriends banner to get to her website that she created...
She and I do not know how to do this...
uhmm...so how do i make the banner clickable to take people to her site???
get at me on myspace
www.myspace.com/daltoniscool500
i used your codes but for some reason the ad banner isnt moved and my inage just lies on top of the mess of things at the top of the page. what could i be doing wrong?
The top banner doesn't show up, only the space where it should be, please help, what should i do?
brandonmangrum77@hotmail.com
Hey - I used your banner code to create one, but put in a div overlay .swf file instead of a .jpeg
http://www.myspace.com/littleminxtv
In I.E. and Safari the repositioning (top and left offset) I did looks great, but in Mozilla it throws the vid almost all the way off screen - how do I code for both platforms?
P
Hey - I used your banner code to create one, but put in a div overlay .swf file instead of a .jpeg
http://www.myspace.com/littleminxtv
In I.E. and Safari the repositioning (top and left offset) I did looks great, but in Mozilla it throws the vid almost all the way off screen - how do I code for both platforms?
P
- I used your banner code to create one, but put in a div overlay .swf file instead of a .jpeg at the top of my myspace page:
http://www.myspace.com/littleminxtv
In I.E. and Safari the repositioning (top and left offset) I did looks great, but in Mozilla it throws the vid almost all the way off screen -how do I code for both platforms?
P
I used your first listed code and placed a banner above the ad. If I change the left margin to -half the width of the image as instructed, it goes off the right edge of my screen. If I adjust it to the center of my screen, my friends tell me it's off the left of theirs. Can you help me with what's wrong?
Thanks!!
i got the codes to work in all browsers except FIREFOX, is there a way to make it look the same through all browsers
thanks
thanks so much. my page is very professional looking now, and i owe much of that to you!
I love you. That was the most helpful thing ever.
How do you put the image over the top of the advertisement? (bring to front)
I still want to see the ads' but just want to place a small gif image over the top of them. Thank you!
Great code, and very helpfull tutorial. I have one question: How to put sliced image under MusicNav Bar, just like:
www.myspace.com/nin
I have spent hours and hours to resolve that code.
Thanx
hi Eileen, I'd like to know if it is possible to make my TOP Banner transparent/opaque...
...I would also like to know how i could possible make my music (http://www.myspace.com/youngmacmar) look something like this page (http://www.myspace.com/bizzybone)
in other words, how can i impose an image over my music page? like the bizzy bone page seen above? thanks!
-MARLON
mar
I do not see that the top banner has any opacity applied at all.
As for the "impose an image over" that is not the best way to get this effect.
The best way, is to Remove the existing content, place your own content, and then place the music player and friends over the top.
Is the content you want to place static in size, or dynamic?
(Will the size stay the same or will it change from browser to browser or over time).
Do you know how to create your content?
IF you can create your content, so that it works outside of myspace, and does NOT use any code that myspace does not accept, leaving a blank space for your music player and one for your friends,
you can easily use this tutorial
Band Div Overlay
The bottom links are required, and the page you refer to has them hidden.
brainislav
That banner was placed using absolute placement.
They created a margin above the main table
body table {margin-top:150px;}
body table table,
body div table {margin-top:0px;}
Then they placed the banner with absolute.
div.bannerClass {width: 805px; height: 250px; position: absolute; margin-left: -403px; left: 50%; top: 230px; }
Notice the side effect, the excess space at the bottom
Instead you can create your extra space using the empty div, that sits up there
i.e.
div div {margin-top:150px;}
table div div {margin-top:0px;}
This works fine as long as you are willing to allow some excess space, to allow for cross browser differences.
Usually it looks just fine.
OR
IF you are very very picky about exact spacing AND willing to move your friends bottom center (just above the comments) there is another way. But it is more complex and rarely used.
hi -
your page is really great - and has made my life a lot easier. It is also good to gain a better understanding of how exactly myspace works. I have been trying to place a banner below the navigation bar at the top. I followed your instructions and it has placed it exactly where I want but the code also places the banner at the bottom of the page - blocking out the links there. Is there a way of getting rid of it?
thanks for your help
http://www.myspace.com/thekazimier
thanks a bunch for the "image on top" thingy...ive been tryin out other sites for hours now to no avail.
www.myspace.com/fredrockz
thanks a bunch for the "image on top" thingy...ive been tryin out other sites for hours now to no avail.
www.myspace.com/fredrockz
I'm trying to add a image above everything on my band page and I tried to use your code and just completely failed!!--I'm not really good at these things, I was using a pregenerated banner but it's not big enough and has all these links--I also have a question on placing backgrounds to where they center perfectly--I know the standard resolution is 1024, but is it possible to get a background that fits all resolutions?? Kinda like some of the professional band pages??--I notice their sites fit all sizes--can you help me??--my band url is:
www.myspace.com/shinethroughshadowmusic--I would appreciate any help--Thanks
Hello Eileen. Great work on all these tutorials. They have helped tremendously.
I have one issue that I'm hoping you can help me with.
I am using your div overlay tutorial for band pages, but I also want to put a custom header above the banner ad. However, when I add the code (from your site) to create a custom header above banner, the banner actually shows up UNDER the div overlay. I've tried adjusting the z-index for the header, but that is not fixing the problem.
Do you have any suggestions on how to get the header to appear on top of the div overlay for a band page?
The page is here: www.myspace.com/dopestylemaker
Thanks in advance for your assistance.
Does anyone know how to put a custom banner at the very bottom of the page?
Hi Eileen,
I've added a banner below the music menu on my band page.
One issue, I would like to move the left margin of the banner/div slightly inwards so the banner edge fits exactly with the edges of the tables below.
Have a look a my page and you should see what i'm aiming for-
www.myspace.com/stupidiscomusic
Any help would be appreciated
Thanks
Felix
This post has been removed by the author.
This post has been removed by the author.
ok i have tried everything on here to get my banner to work.
But none of its working.
The problem that I am having is that when I do all the adjustments and everything it just leaves a big blank space where my banner should be.
My image is 1092x600 and I want it to go above the add so that it is the first thing people see when they see my blog.
The image url is
http://i216.photobucket.com/albums/cc294/Lestat313/hearde-banner2.gif?t=1208857906.
Any help would be appreciated.
hi im having problems with the code for the banner under the music nav bar ... its work great only prblem is the width . my width is 884px not 800px how do i set it to be 884 etc ...
im using the code for the banner underneath the music nav bar how do i set the div width to a high number .... rite now it is at 800px i need it at 884px etc etc.. can any one help asap please
ch33ki Ent™
im using the code for the banner underneath the music nav bar how do i set the div width to a high number .... rite now it is at 800px i need it at 884px etc etc.. can any one help asap please
ch33ki Ent™
fantastic thanks a lot! really helped, easy to follow, even without preview images! however, i am looking for a code to remove the 'myspace music banner' or place the image over the top (bring to front) - if you know how to do this please post!
keep up the excellent tutorials x
"pandu said...
I want to thank you so much for this! I have been looking all over the web for a way to make it look right in both FF and IE.
thanks!
xoxo"
Indeed! I was looking for (and found here) the same thing!!!
Thank you :-D
This post has been removed by the author.
First of all thanks for your help.
I have a question. I'm working on a MySpace artist page and would like to add a self created flash banner right under MySpac music bar. Is this possible and how do I do that?
Thanks in advance :-)
Dirk
Sorry but I forgot to say I want to add a clickable link to the banner.
Dirk
very nice page.
can u help me make the banner fit the whole top page??
www.myspace.com/symphonyofmalice
hit me up on myspace :)
Thanks Eileen
Gus,
Thank you, Eileen. Very handy stuff... you're a godsend.
Hi! I used the top banner generator because I'm new to all of this. I wanted a banner above the main table but below the ad and menu area, and I was able to do this. Is there a simple code to add to the one that was generated to make it a link?
Thanks!
Hi! I've been scouring the internet trying to find a tutorial on how to do this. The past two days I've tried so many different combinations and tricks, but I just can't get the image to appear on IE, everything looks perfect on FF.
I have the same problem that most of the people up there have. The space is there, but no image.
Please help!
I can not re-create the problem, related to banners not showing up in IE.
However, since multiple people have reported this problem, I would like to further investigate it.
Can someone, with this problem (banner shows up in FF but NOT in IE), who used my code (either from this page or via my generator) please leave me a link to the myspace page where the code has been applied.
i would really like to know how to put the music player over top of the banner at the top.
www.myspace.com/apicturesographic
the player is supposed to go into the white space.
Hey, I already have a top picture posted and was trying to add another picture below the menu bar. I tried every code on this page basically but it always displays the image 3 times instead of 1 and I can't figure it out. Any ideas? -Keith
www.myspace.com/killingsworthrecordingco
I only see the image once,
are you talking about the image under the main nav bar, or are you trying to add another one under the red nav bar, using div.clear?
I am going to test my code again, but I am pretty sure I have the needed reverse commands, to prevent the image from showing up 3x,
However, what you describe, sounds like it is showing up in all 3 instances of div.clear
hi eileen!!!
i'm having the same problem as many people. my picture shows up on my editing page, but i cannot get it to show up once the page is saved!! its just space! i tried deleting any existing code... and tried it on FF and IE, and neither work. whats up?
im working on a popular company myspace, and i would prefer to IM you the name so you can check. please IM me on myblindfoldaside as soon as you can. THANKS!!
Hi Eileen,
Thanks for this site. It has been fantastic with helping me create a great MySpace page.
Here's a question maybe you can help with...
I used your code to post a header. Worked GREAT! Looked awesome. And it didn't cover any MySpace ads or the navigation bar so it wasn't violating anything.
I woke up this morning to see YIKES! They changed the look of MySpace and my awesome header is GONE! I can't figure out how to put it back up there. Any ideas?
Thanks for everything!
Hi Eileen,
your site has been very helpfull and I appreciate it very much. I had a banner placed above the main table below the navigation bar and due to the changes on myspace, the banner now appears twice, but not the link. Was wondering if you had a solution for this.
Cheers,
Travis.
www.myspace.com/maedermusic
Oh man the new Myspace update released today, June 18th 2008, has rendered all of my banners useless. I have created a bunch of different sites for bands and many of them are messed up now.
My only option at this point is to redesign the entire main div overlays and not roll with the banners anymore. I'm hoping you can come up with a fixit code before I have to do that.
Here are my problem sites that had the band name banner at the top and now they're gone:
www.myspace.com/mannilown
www.myspace.com/frobeckband
Here is one that I did that doesn't use a banner and remained intact...I wish I would have done this for all of them :(
www.myspace.com/poprocks
Thanks for any help you can proved.
Oh man the new Myspace update released today, June 18th 2008, has rendered all of my banners useless. I have created a bunch of different sites for bands and many of them are messed up now.
My only option at this point is to redesign the entire main div overlays and not roll with the banners anymore. I'm hoping you can come up with a fixit code before I have to do that.
Here are my problem sites that had the band name banner at the top and now they're gone:
www.myspace.com/mannilown
www.myspace.com/frobeckband
Here is one that I did that doesn't use a banner and remained intact...I wish I would have done this for all of them :(
www.myspace.com/poprocks
Thanks for any help you can proved.
Hey guys, I found this to help fix the banner issues for the new June 18th 2008 Myspace update. I've tried this on a band page and my personal page and got it to work:
http://forums.myspace.com/p/4021424/44884752.aspx?fuseaction=forums.viewpost
Don't panic,
I have studied the changes and know how to fix the problems (which differ depending on where your banner is).
As far as changes, that are safe from future myspace modifications, there are not any.
I can not predict what they will change.
Thank you for the post to the myspace forum, for one type of banner/location that fix is as good as anything I would have come up with (in fact that would have been my choice of strategy for that banner location).
With the exception of the music nav bar, the top area, is the same on the standard and artist profiles.
The divs in class=clear (div.clear) are GONE,
I was using these for both banners and to create space for banners.
are the new codes ready to use yet mate?
please can you fix all of them?
cheers
the new code for placing banner just above red music nav bar works great in I.E but not in firefox. my banner is 400px tall. I have to set margin-bottom to 200px to make it work in IE and to the correct 400px for firefox to work. do you have a soluttion? thanks?
The new code for placing custom banner just above the red music nav bar works great in IE but not in forefox, my banner is 400px tall, I have to set margin bottom to 200px to work in IE and to the correct 400px in firefox.. do you have a soluttion to work in both? thanks!
Thankyou for pointing out the problem in IE.
I have identified the cause, and fixed the problem
(now I am curious why FF doesn't have the same problem).
Anyway, it is fixed, but I still haven't done a whole lot of testing, but I did do preliminary testing in IE and FF on a page with NO OTHER customizations.
There is browser specific code in the new myspace default code.