Help - Search - Members - Calendar
Full Version: Using Sliced Image as banner
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
andrew29
Jan 3 2010, 09:35 AM
Ok, so i made my sliced image that i want to use as a banner for a band myspace im designing. I basically want it to go:
Advertising
Navigation Menu/Search Bar
My own sliced banner

I've searched through the tutorials and threads on here but cant find anything that explicitly says 'use this code in this section etc'. So far whenever i put it in the bio section it just shows up in there. When i used the top banner coding section in the pinned tutorial, it didnt show up at all?

Cheers
Andrew
Mickey
Jan 3 2010, 09:48 AM
Post your codes and a link to your page.
andrew29
Jan 3 2010, 07:30 PM
Ok, here is my entire code for the profile. As you can see the sliced image coding is in there where i thought the tutorial said to put it. The Margins work fine as the gap is there for the banner but it just doesn't show up, i dont know wyhy. Here's the code:

CODE

<style>
.profileWidth table { margin-bottom:874px; width:800px; }
.rail { display:none; }
.gap {
background: top left no-repeat;
width:1201px; height:874px;
position:absolute; top:0; left:50%;
margin:0px 0 -874px -1150px;
</style>

<div class="gap"></div>


<style>
.topbanner {position:absolute; left:50%; top:100px; margin-left:100px; _margin-left:100px; width:400; height:200px; z-index:1;}

<div class="topbanner">
<table id="Table_01" width="1201" height="874" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="http://i94.photobucket.com/albums/l101/andrew_29/sliced%20ramshackle%20images/alleyway-sliced_01.gif" width="1201" height="797" alt=""></td>
</tr>
<tr>
<td>
<a href="http://home.myspace.com/index.cfm?fuseaction=user">
<img src="http://i94.photobucket.com/albums/l101/andrew_29/sliced%20ramshackle%20images/alleyway-sliced_02.jpg" width="155" height="77" border="0" alt=""></a></td>
<td>
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=513235720">
<img src="http://i94.photobucket.com/albums/l101/andrew_29/sliced%20ramshackle%20images/alleyway-sliced_03.jpg" width="310" height="77" border="0" alt=""></a></td>
<td>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.messageV3&friendID=513235720">
<img src="http://i94.photobucket.com/albums/l101/andrew_29/sliced%20ramshackle%20images/alleyway-sliced_04.jpg" width="191" height="77" border="0" alt=""></a></td>
<td>
<img src="http://i94.photobucket.com/albums/l101/andrew_29/sliced%20ramshackle%20images/alleyway-sliced_05.jpg" width="196" height="77" alt=""></td>
<td>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=513235720">
<img src="http://i94.photobucket.com/albums/l101/andrew_29/sliced%20ramshackle%20images/alleyway-sliced_06.jpg" width="163" height="77" border="0" alt=""></a></td>
<td>
<a href="http://vids.myspace.com/index.cfm?fuseaction=vids.channel&ContributorID=41655837">
<img src="http://i94.photobucket.com/albums/l101/andrew_29/sliced%20ramshackle%20images/alleyway-sliced_07.jpg" width="186" height="77" border="0" alt=""></a></td>
</tr>
</table>
</div>
.orangetext15 {display: none;}
.whitetext12 {display: none;}

table table div embed, table table div object {position:relative; z-index:9;}

table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color:transparent;
background-image:url(http://i94.photobucket.com/albums/l101/andrew_29/backgroundsplattercompressed.jpg);
background-position: top center;
background-repeat: repeat Y;
background-attachment: fixed;
}

table table table table, table table table td{
background-image:none;
background-color:000000;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:10pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:FFFFFF;
font-size:10pt;
font-weight:normal;
font-style:bold;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:FFFFFF;
font-size:12pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a {
color: FFFFFF!important;
font-family: Arial !important;
}

a:hover {
color: 5d0073 !important;
font-family: Arial !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:5d0073;
font-size:12pt;
font-weight:normal;
font-style:bold;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

table table table table, div table table table{
border-style:none;
}


tr {background-color: transparent;}

.contactTable {display: none;}


.friendsComments{visibility:visible !important;display:box;position:absolute; left:900px;top:2140px;z-index:3;]
.friendsComments td{visibility:visible !important;border:none;z-index:3}

</style>



We have a gig on the 9th and had been hoping to launch the revamped myspace just before that, so if anyone could help soonish that would be greatly appreciated
Mickey
Jan 4 2010, 07:05 AM
Posts merged.
andrew29
Jan 7 2010, 07:28 AM
Bump, sorry to seem impatient but we really want to have it finished before our next gig on saturday...
Mickey
Jan 7 2010, 08:02 AM
You need to close and open stylesheets with the correct tags. Take a look at this bit:

CODE
<style>
.topbanner {position:absolute; left:50%; top:100px; margin-left:100px; _margin-left:100px; width:400; height:200px; z-index:1;}

<div class="topbanner">

It needs to look like this:

CODE
<style>
.topbanner {position:absolute; left:50%; top:100px; margin-left:100px; _margin-left:100px; width:400; height:200px; z-index:1;}
</style>

<div class="topbanner">


Same goes for this:

CODE
</div>
.orangetext15 {display: none;}

It needs to look like this:

CODE
</div>

<style>
.orangetext15 {display: none;}
andrew29
Jan 8 2010, 07:19 AM
Thanks for your help mate, got it working much better now. Just one query, in the tutorial it said not to change left:50%; to any other percentage or it would screw everything up. After playing around with the other Pxl margins and not being able to position it correctly i changed it to 10 out of curiosity. For some reason that centred it and works on both IE and Firefox, is that gonna lead to problems later on or is it fine?
Mickey
Jan 8 2010, 07:34 AM
It'll lead to problems, mate. Leave left: 50%; alone. What you need to change is the margin-left value. If you need to move things further to the left, add a minus sign before the value so it becomes negative.
andrew29
Jan 8 2010, 08:21 AM
I see, i'd set the left margins to 0 and it was still to far across. I didn't know you could use negative values. It works perfect now

Just 1 tiny extra query now, the myspace music links are the same colour as background of the bar its on. Its fine if you hover the mouse over because the links are purple, but is there a way of coding colour for specific text? If it's complicated/more than a few lines of code dont worry, but if it's a quick fix it would be greatly appreciated.

Thanks for all your help with this mate
Mickey
Jan 8 2010, 09:45 AM
Add this in between a set of <style> tags:

CODE
.subnavItems a {color: 000000!important;}

Replace the hex code according to your liking.
andrew29
Jan 8 2010, 06:53 PM
It works! Thanks again mate, you can close this thread now
tokyo-rose
Jan 8 2010, 07:13 PM
Topic closed and moved to MySpace Resolved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.