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:
|
|
|
Jul 20 2009, 10:56 PM
Post
#2
|
|
Senior Member Group: Staff Alumni Posts: 7,063 Joined: Jul 2008 Member No: 670,288 |
Adding a Top Banner If you want to add a top banner to your layout, there are two ways of going about it. You can put a top banner above the navigation, or you can put one below the top banner. I will not be going over how to add a top banner above the navigation, but here is how to put one under the navigation. With the following code, here are some important aspects you'll have to look at: Line 1: .profileWidth table {margin-bottom:###px; width:800px; } Line 5: width:###px; height:###px; Line 7: margin:0px 0 -400px -###px; What each line means: Line 1: Margin-bottom is the height of your top banner image.. Line 2: The width and height are the dimensions of your top banner image. Line 7: Just edit the very last property in that line. For example, in this code, I have the number -###. You will change the number to the height of your image, but make sure the negative symbol is there. This code goes at the very top of your Band Biography section. If it gets placed anywhere, it will not create the right gap. CODE <style> .profileWidth table { margin-bottom:1150px; width:800px; } .rail { display:none; } .gap { background:url() top left no-repeat; width:900px; height:1150px; position:absolute; top:0; left:50%; margin:0px 0 -400px -1150px; </style> <div class="gap"></div> Okay, now your going to have to use some DIV positioning codes to position your top banner in between the gap. If you are not familiar with DIV codes, you might want to check out this tutorial for more information and practice. Use the following code: CODE .topbanner {position:absolute; left:50%; top:###px; margin-left:###px; _margin-left:###px; width:###; height:###px; z-index:1;} I didn't put style tags between the code, because you should add this piece of coding to your stylesheet. It makes it a lot easier to find things, and it throws some more organization into your stylesheet. All you have to do here is change the ### symbols to the number that works for you. As you can see, there are two margin-left properties. _margin-left:###px; is a fix for Internet Explorer to get it to work right in both Internet Explorer and Firefox. Do not change left:50%; to any other percent. Almost everyone does this, and that's where they run into their problems. left:50%; makes sure everything stays in the same area in both browsers. Now just add the DIV class in the Band Bio section and you're set: CODE <div class="topbanner">
Image code here </div> |
|
|
Aug 16 2009, 04:18 PM
Post
#3
|
|
Newbie Group: Member Posts: 1 Joined: Aug 2009 Member No: 742,441 |
Adding a Top Banner tutorial is great and it really help me but when I set my top banner logo and clicked preview all was great but I can't submit or edit.what ever of those two I click nothing happens :S what's wrong and how to fix it? I use this setup CODE <style> .profileWidth table { margin-bottom:800px; width:600px; } .rail { display:none; } .gap { background:url(myimage) top left no-repeat; width:900px; height:1150px; position:absolute; top:175; left:115%; margin:0px 0 -400px -1150px </style> <div class="gap"></div> I got it what did I do wrong.the width:900px; height:1150px was the problem :] I just put it on width:600px; height:800px and now is good.thanks again! keep up the good work |
|
|