Making a Band Layout, Version 2 Options

[YDG]

MySpace Band Layout Tutorial

Welcome to Version 2 of the Band Layout Tutorial! This tutorial will help you out in making those professional looking layouts that graphic designers are making for these rising bands. A lot of people are getting into this kind of thing, and resources for Band Layouts are very slim, so I hope this topic helps anyone out that needs the help and resources.

Rules:

• Do not spam this thread.
• Please look through other posts to see if a problem similar to yours is resolved.
• If you see a broken link, unavailable screenshot, or non-working code, please report it to me.
• If you are having any trouble, feel free to ask in here or PM me.
• If you leave me a PM, please give me a week to reply before sending me more PM's.
• If you have any requests for my tutorial, please post in this topic.

Table of Contents:

1. Getting Started
2. Changing the Look & Feel
3. Adding a Top Banner
4. Slicing Images
5. Working With Image Rollovers
6. Creating A Custom Left Side
7. Adding Headers
8. Moving Blogs to the Left Side
9. Adding a Shows Header
10. Finishing Up
    --------------------
11. Frequently Asked Questions

[norm311]

Mike,

I've noticed you've been able to solve some problems with weird IE formating. I have one of my own and I'd really appreciate your help. The code I've been working with looks great in Safari, but in Internet Explorer the left column is too far right. It actually overlaps the right column completely. How can I change my code so it'll work properly in both IE and safari?

Thanks so much,
Travis

Here is the link to the myspace I'm working on:
http://www.myspace.com/213123434341412321321434

And here is my code:

CODE

<i class="i">!!! Start Code To Apply Top Banner !!!!</i>
<a class="i" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy90b3AtYmFubmVy" title="myspace top banner">
Custom top banner code by Eileen</a>
<style>
{!- make room at bottom of div.profileWidth -!}
div.profileWidth table {margin-bottom:480px !important;}
{! apply banner as bkgd image !}
div.profileWidth{background-image:url(http://i269.photobucket.com/albums/jj66/norm311/Banner08.jpg)!important; background-position:center bottom !important; background-repeat:no-repeat !important;}
{!- reverse -!}
table.rail, .i, .i i.x {display:none;}
</style>

<i class="i">!!! End Code To Apply Top Banner !!!</i>





<style>

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry{
background-color: transparent !important;
color: ###### !important;
width: 417px !important;
border-collapse: collapse !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 15px !important;
padding: 0 !important;
table-layout: fixed !important;
position: relative !important;
background-image: url(http://i269.photobucket.com/albums/jj66/norm311/News02.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
overflow: hidden;
_background-position: 0px 2px;
_margin-left: -4px !important;
_margin-top: 0px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr{
display: inline;
margin: 0 !important;
padding: 0 !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td{
display: block !important;
margin: 0 !important;
padding: 0 !important;
width: 449px !important;
font-family: Arial;
color: ###### !important;
clear: both !important;
font-size: 1px !important;
line-height: 0px;
vertical-align: middle;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td a{
float: right;
line-height: 35px;
color: ######;
padding: 0px !important;
margin: 0px !important;
padding-right: 5px !important;
position: relative;
z-index: 6;
font-weight: normal;
font-size: 10px !important;
display: block;
height: 80px;
text-transform: Capitalize;
_font-size: 10px !important;
_width:120px;
_text-align:right;
_font-weight: normal;
_postion: absolute !important;
_margin-top: -4px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.text{
line-height: 1px;
position: absolute;
display: block;
border-bottom: 1px dotted dimgray;
border-color: ######;
width: 443px;
color: ######;
padding: 0px !important;
margin: 0px !important;
padding-left: 5px !important;
z-index: 5;
font-weight: normal;
font-size: 10px !important;
height: 35px;
_font-size: 10px !important;
_margin-top: -3px !important;
_font-weight: normal !important;
_margin-left: -3px !important;
_width:449px;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.btext{
display: block;
float: left;
width: 50px !important;
height: 43px;
font-size: 1px;
overflow: hidden;
color: ###### !important;
line-height: 300px;
}




html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td span.orangetext15{
display: block !important;
height: 52px !important;
width: 399px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 1px;
overflow: hidden;
background-image: url(http://i269.photobucket.com/albums/jj66/norm311/Friends00.jpg);
background-repeat: no-repeat;
color: 000000 !important;
line-height: 10px !important;
margin-top: -3px !important;
}


.shows {position:absolute; top:1075px; left:50%; margin-left:-42px; _margin-left:###px; width:325px; height:52px; z-index:1;}
table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 52px;
text-indent: -999999px;
background: transparent url() bottom left no-repeat;
}

.tg_left {position:absolute; top:1192px; left:50%; margin-left:-403px; _margin-left:000px; width:325px; height:900px; z-index:1;}

.nametext{background-color:transparent;font-style:normal;
text-transform:none;border:0;
font-weight:normal;color:white;font-family:helvetica narrow;}


.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(http://i269.photobucket.com/albums/jj66/norm311/Picture3-1.jpg);
background-position: top center;
background-repeat: repeat;
background-attachment: scroll;
}

table table table table, table table table td{
background-image:yes;
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="shows">
<img src="http://i269.photobucket.com/albums/jj66/norm311/Shows01.jpg" />
</div>

<div class="tg_left">
<img src="http://i269.photobucket.com/albums/jj66/norm311/Members00.jpg" />
<img src="http://i269.photobucket.com/albums/jj66/norm311/FullBand.jpg" />
<br></br>
<img src="http://i269.photobucket.com/albums/jj66/norm311/OrlandoWeekly.jpg" />
<br></br>
<img src="http://i269.photobucket.com/albums/jj66/norm311/BelieverApparelAd01.jpg" />
<br></br>
<img src="http://i269.photobucket.com/albums/jj66/norm311/SupportFrom00.jpg" />
<img src="http://i269.photobucket.com/albums/jj66/norm311/Gibson.jpg" />


</div>


<img src="http://i269.photobucket.com/albums/jj66/norm311/Videos02.jpg" />



<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="225" width="400">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3373218&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://vimeo.com/moogaloop.swf?clip_id=3373218&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" height="225" width="400" wmode="transparent" />
</object><p>


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="225" width="400">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3373412&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://vimeo.com/moogaloop.swf?clip_id=3373412&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" height="225" width="400" wmode="transparent" />
</object><p>



<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="225" width="400">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3169743&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://vimeo.com/moogaloop.swf?clip_id=3169743&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" height="225" width="400" wmode="transparent" />
</object><p>



<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="225" width="400">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2322302&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://vimeo.com/moogaloop.swf?clip_id=2322302&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" height="225" width="400" wmode="transparent" />
</object><p>

<img src="http://i269.photobucket.com/albums/jj66/norm311/ShowOct22.jpg"/>