Making a Band Layout, Version 2 |
Making a Band Layout, Version 2 |
Jul 20 2009, 09:20 PM
Post
#1
|
|
Senior Member Group: Staff Alumni Posts: 7,063 Joined: Jul 2008 Member No: 670,288 |
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:
|
|
|
Oct 14 2009, 11:27 PM
Post
#2
|
|
Newbie Group: Member Posts: 2 Joined: Oct 2009 Member No: 749,118 |
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"/> |
|
|