please help me make something like a band layout where they have the links image mapped in the banner, how to create a band layout Options

[msdazzlebackgrou...]

i already know how to make div overlays and image maps, but i don't know how to make a band layout. for example, do i put it all in the "bio" section? please if someone could make a video tutorial, that would be awesome.

how does one go getting the links on the banner "mapped" please be as detailed as possible. and how to customize the contact box and where to put the specifications please there is no good tutorials out there, for example like this layout, just the concept! i have their source code, but i have no idea where to start. once someone shows me, I can learn fast if it's detailed, thanks! http://www.myspace.com/neyo

[Mickey]

Check this out for a full band customization tutorial, as well. That should help loads if you already know how to work with DIVs and such.

[msdazzlebackgrou...]

here is what i have so far, how do i move the bottom image with links on it on top of the banner instead of under and between the default myspace links?

CODE

<style>
.profileWidth table { margin-bottom:1250px; width:1150px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:1250px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -1150px;
.table_01: {position:absolute; left:50%; top:-30%; margin-left:-340px; _margin-left:25px; width:1250; height:1150px; z-index:1;}
</style>

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

<style>

.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;
}

.table_01{
width: 1250px;
height:1150px;
margin-left: 50%;
margin-left: -300px;
top: -2000px;
}

body {
background-color: 000000;
background-image:url();
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

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

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
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:9pt;
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: 666666 !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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

</style>


<div class="table_01">
<table id="Table_01" width="1250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_01.jpg" width="1250" height="778" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_02.jpg?t=1251169968" width="216" height="372" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vaTIxNi5waG90b2J1Y2tldC5jb20vYWxidW1zL2NjMTkxL2F0b3JkMTk4Ny9EaXNwYXJl
GF5b3V0XzAzLmpwZw==">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/DispareLayout_03.jpg" width="375" height="236" border="0" alt="" /></a></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vaTIxNi5waG90b2J1Y2tldC5jb20vYWxidW1zL2NjMTkxL2F0b3JkMTk4Ny9EaXNwYXJl
GF5b3V0XzA0LmpwZz90PTEyNTExNjk4NTM=">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/DispareLayout_04.jpg" width="439" height="236" border="0" alt="" /></a></td>
<td rowspan="2">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_05.jpg?t=1251169997" width="220" height="372" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_06.jpg?t=1251170015" width="814" height="136" alt="" /></td>
</tr>
</table>
</div>

[Mickey]

Replace your codes with this:

CODE

<style>
.profileWidth table { margin-bottom:1250px; width:1150px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:1250px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -1150px;
}
.table_01 {position:absolute; left:50%; top:174px; margin-left:-625px; _margin-left:625px; width:1250; height:1150px; z-index:1;}
</style>

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

<style>

.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: 000000;
background-image:url();
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

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

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
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:9pt;
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: 666666 !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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

</style>


<div class="table_01">
<table width="1250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_01.jpg" width="1250" height="778" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_02.jpg?t=1251169968" width="216" height="372" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vaTIxNi5waG90b2J1Y2tldC5jb20vYWxidW1zL2NjMTkxL2F0b3JkMTk4Ny9EaXNwYXJl
GF5b3V0XzAzLmpwZw==">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/DispareLayout_03.jpg" width="375" height="236" border="0" alt="" /></a></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vaTIxNi5waG90b2J1Y2tldC5jb20vYWxidW1zL2NjMTkxL2F0b3JkMTk4Ny9EaXNwYXJl
GF5b3V0XzA0LmpwZz90PTEyNTExNjk4NTM=">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/DispareLayout_04.jpg" width="439" height="236" border="0" alt="" /></a></td>
<td rowspan="2">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_05.jpg?t=1251169997" width="220" height="372" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/disparelayoutslicedmiages_06.jpg?t=1251170015" width="814" height="136" alt="" /></td>
</tr>
</table>
</div>

[msdazzlebackgrou...]

thanks, that worked. can you also tell me how to put the banner on the top of the myspace banner ads and search box?

[Mickey]

Try this code:

CODE

<style>
.profile {display:none!important;}
div div table div {display:none;}
.clearfix table div div {display:block;}
</style>

That should hide everything but the advertisement. That, I can't help you hide since it's against MySpace's TOS. Topic closed & moved.