MySpace Band Layout Tutorial Options

[deadmellotron]

Version 2 of my Band Layout Tutorial is out now! Please use that topic from now on. Thanks! - TJ

http://www.createblog.com/forums/index.php?showtopic=234986

This post has been edited by A1Bassline: Jul 21 2009, 12:28 AM

Reason for edit: Version 2 is out. - TJ

[xii3]

yes! just what I was looking for.
thanks
:]

[DigitalDawn]

Awesome Tutorial, Im having one problem tho... The layout looks totally different in Mozzilla Firefox, how do I get the code to look uniform?

[carnageedesigns]

its a good tut,
but whenever i used it everytime the left side div never workd,
neither did hiding the entire left side,
dunno if im doing it wrong?
do you put your coding into bio, or band members section?


please tell me i need serious help with this.

[kaylamerenda]

Hey.. I am so new to doing layouts.

When I add the stylesheet to the band bio section... it doesnt code anything.
it just has a bunch of coding in the band bio section.
but the layout doesnt change at all.

[Mike]

^Are you sure you have <style> tags at the beginning and the end of your stylesheet codes?

[kaylamerenda]

i am just so confused.
like he gives us the coding, but i have no idea what everything means.

[deadmellotron]

^ I have explanations provided in the coding.

[kaylamerenda]

lol i know.
i didnt mean that to come off rude.
im sorry..

i got all of it until i got to the headers part.
like i see where to put our image, but there is so much other stuff, i dont know where i need to adjust it at...

[Sn00ch-FGFX]

hey, i thank you so much for this tutorial, it works great in firefox, but on internet explorer the entire left side div is right on top of the top friends section...

here is the link www.myspace.com/joshadamscountry

when viewed in firefox the div on the left is positioned fine, but on IE its messed up.

what do i do? I HATE THE FIREFOX/INTERNET EXPLORER DIFFERENCES!!!

MAKE THEM THE SAME!!

(now that i have gotten that out, can somebody please help me!)

thanks
Sn00ch-FGFX

[Mike]

^Look for this bit in your codes:

CODE

<style type="text/css">
.tg_left {position:absolute; top:765px; margin-left:-405px; left:50%; width:325px; height:1500px; background-color:FFFFFF; z-index:2;}
</style>

Add top and margin-left attributes with underscores before them so it ends up looking like this:

CODE

<style type="text/css">
.tg_left {position:absolute; top:765px; _top:765px; margin-left:-405px; _margin-left:-405px; left:50%; width:325px; height:1500px; background-color:FFFFFF; z-index:2;}
</style>

Now edit the values on the attributes with the underscores before them so they show up properly on Internet Explorer. See if that does it.

[deadmellotron]

Thanks for pointing that out! I'll edit the tutorial tonight!

[Sn00ch-FGFX]

THANK YOU SOO MUCH!

that worked perfectly, i just hope it works in safari too. lol

you guys are life savers, thanks for the quick reply.

great tutorial btw, and thank you as well for your slicing tutorial. helped out a lot

real easy to follow.

be easy buddy

Sn00ch-FGFX

[deadmellotron]

^ Thanks! The code Mike gives you should work in Safari, but pixels may be off by like 2 or 5. Nothing big though.

[Sn00ch-FGFX]

my friend just checked it on his mac, and he said the left side div is all the way down near the comments.. idk what the hell to do. i have never heard of editing the code seperatly for firefox, IE, and safari.

this is rediculous.

i didnt follow your whole tutorial, i just used the coding for the left side of the page, i already had the background and the top header on there, would that have something to do with it?

i dont have a mac to edit on, so i cant do the same thing i did for IE.

please help a frustrated designer!

Sn00ch-FGFX

[jaydee22]

Hey hey man. I did the slicing deal and everything else. Replaced all the code with the right addresses to the images for the buttons on photobucket. I'm just stuck at how to make it my top banner for my bands myspace. Any help would be much appreciated. Amazing tutorial btw. I just don't how to/where to code that long ass banner code in there to make it show up where my top banner should. Thanks!

[Sn00ch-FGFX]

you should have the original code for the header in notepad or something, after uploading the images to photobucket, you copy and paste the direct links to their corresponding place.

after that, you will have to refer to this tutorial, about how to make the blank space needed to place the header. once you have your blank space, at the correct dimensions, you will need to use this code

CODE

<style type="text/css">
.masthead {position:absolute; top:XXXpx; margin-left:XXXpx; left:50%; width:XXXpx; height:XXXpx; z-index:2;}
</style>

<div class="masthead">
<img src="IMAGEURLHERE" />
</div>

you have to work with the positioning which he explains in the tutorial, but where it says img src=IMAGEURLHERE, you delete that and paste your entire code that you worked on in notepad there.

that should answer your question, and if not, then i would be glad to try and help u further!

Sn00ch-FGFX

*******can somebody please answer my previous post?? PLEASE! thanks

[jaydee22]

Thank you so much. That totally worked for the most part. All the links are there and the top image is in place, just one thing... and I think this will make it easier for you to help me trouble shoot this bitch. Lol:

http://www.myspace.com/losingautumnrock

All of the links are spread across the page. Is that a margin issue? Or some other deal. Thanks a lot for your help!

[Sn00ch-FGFX]

on my firefox, i cant see a problem. just looks like u need to make the space a little bigger, your header is cutting off the top of the music player.

but i cant see a problem with your links.

Sn00ch-FGFX

[jaydee22]

Wow, thats weird. I think maybe safari? Because when I manually resize the window the links go with it. I can actually drag the links back into place by dragging from the corner of the browser page and resizing it. And on mine it's not cutting off the top of the player. You think it's just a safari thing?

[Sn00ch-FGFX]

i am having a problem with safari too, if you read my post above.

i have my page aligned perfectly on firefox, and on IE, but my friend checked it on safari and said it was all messed up.


here is the site:
Click Here

its a myspace that i have been workin on for a friend, i think its just safari doesnt like this kind of code or something!

if i cant figure out how to fix it, then i will have to delete all my work and make his profile look more basic, and i dont wanna do that, that is a lot of work, and i dont want it to be for no reason.

sn00ch-FGFX

[jaydee22]

Thanks a lot bro. I'm figuring it it out. Lol. Decided to just do the top banner over again, but when I put the code in for having the top banner below both navigation bars, the gap happened, but it's actually between the music nav bar and the home nav bar. Lol. Any ideas? Thank again!

[Sn00ch-FGFX]

no prob man, i love to help out!

but im not quite sure what you mean..

maybe take a screen shot of what you are seeing, and i might be able to help you further, or you can wait for mike, he seems to know everything. lol

if u post a screenshot, ill try to help as much as i can.

if u ever need help with photoshop or any designing stuff, im your man, but im still only intermediate at HTML. lol

good luck.
Sn00ch-FGFX

[Mike]

Snooch, try adding "px" to the top attribute with the underscore in your left column code. (the one with .tg_left on it or something).

Jaydee22, try redoing the whole top banner process again and make sure you cover the seventh step of the tutorial.

TJ, I edited your tutorial to fix a broken [code] tag and to replace the bullets with numbers to make it easier for viewers.

[jaydee22]

This is what I'm seeing:

click to enlarge

The gap is between the two nav bars. =/

Reason for edit: Please use [thumb] tags instead of [img] tags when posting large images. - Mike