MySpace Layout Design: A Fun-Filled Journey
So, you want to design a MySpace that doesn’t look like your typical Tom-approved page. Well, be prepared to enter a fun-filled journey that will involve weird coding, browser incompatibility, and my personal favorite – constant MySpace code changes that will likely ruin your page.
How do you combat this? In some cases, you can’t – if MySpace changes something significant, there is a possibility that no matter how well designed your page is, it will still throw it off. But your best bet to avoid as much of this as possible is to keep your coding simple. You can still make a very intricate looking page with fairly simple code – and the less convoluted your coding is, the less likely it is to not work tomorrow. Here’s five tips that should help you create a MySpace page that doesn’t look like this: http://www.myspace.com/ffrreedd
1. Use layout creator sites for what they’re good for – the basics.
There’s loads of layout sites out there that’ll let you enter exactly the layout you want and promise to give you the code to make your page look just like that. The problem is, most of these sites aren’t exactly up to date, and your page won’t look right when you actually put the code into MySpace. Or, it’ll work in one browser, but look like a hot mess in all the others. However, some of these sites are good for the basics. I highly recommend using the Katamari Layout Generator to get the code to hide everything on your page. The coding on here is solid, and it won’t hide things MySpace does not allow you to hide. Which brings me to my next point…
2. Don’t hide stuff you’re not supposed to hide.
Nobody really likes having MySpace ads on their page. And absolutely everybody hates how any links you put on your page get turned into that msplinks crap. My advice to you regarding these issues? Get over it. Sure, you can do a quick search on Google and find the code to hide that top ad bar, but guess what? MySpace knows about that code. And that other one. And that other one you just thought up now. And if they find that code in your profile (which they will because they run periodic checks) they will take all the coding out of your page altogether, thus ruining it. Yes, it sucks. But in my opinion getting rid of the ads is not worth taking that chance. You can still make a beautiful page that leaves all those things in tact.
3. Design first – then start coding.
MySpace coding is difficult enough without trying to do it before you really know what you want your page to look like. I suggest making a version of your ideal page in Photoshop and then starting the process of making your MySpace page look like that. You may realize that not everything you wanted to do is possible in MySpace, but at least you’re starting with a general idea.
4. My Divs: let me show you them.
Once you have your Photoshop version made, divide every individual piece into divs. A “div” is essentially a section of your page. I recommend any time you would like there to be a space between two parts, you make a new div. For example, this is what my page looks like in its finished form:
.
And this is how I divided it into divs:
.
To give you an idea of what the coding looks like, I’ll show you my code for Div 1, which is my photo:
<style>
.Div1 {width:430; height:370;_height:380}
.Div1 {z-index:5; position:absolute; left:50%; top:185px; margin-left:-375px;}
.Div1 {background-color:none ;}
</style>
<div class=”Div1″>
<img src=”http://img.photobucket.com/albums/v703/mirablue/mepicture.jpg” border=”0″ alt=”Photobucket” />
</div>
The top half of your div – the parts between <style> and </style> contains your instructions for where the div should sit on your page. The second half of your div – the parts between <div class> and </div> contains the pictures and text you want to go in that section.
5. Internet Explorer hates you.
Anyone with any sort of web design experience knows that IE is a pile. But, for some inexplicable reason, a lot of people still use it. So, you need to make your page compatible. I can tell you right now that your biggest issue will be with spacing. IE does not read line heights the same way good browsers do, so you won’t be able to simply use the <br> html tag to create your spacing.
You should instead create your spacing through the position of your divs. However, you will still run into a problem with the size of your divs being different in IE – which is where the underscore hack comes in. You can see this in the above code here:
{width:430; height:370;_height:380}
I’m not going to go into how exactly this works – mostly because it’s already been covered by many other people who can explain it far better than me. I’d suggest reading this post from mdibb.net, for a very simple explanation.
- Amirah / blendetta.com
by David Sawyer McFarland. It claimed to be “The book that should have been in the box”. After reading the first few chapters I totally agreed with that statement.
Unlike a lot of people I still browse the web, check my email, and send instant messages using my computer – not my cell phone. My Razr2 uses 3G technology so I do get broadband speed, but I personally don’t see the point of surfing on a 2.2” screen. With that all being said I know that I’m part of an increasingly shrinking minority.
