mySpace Layout Tutorial

[Sean]

In the last few months in my spare time i have been playing around a little bit with mySpace templates and i must admit trying to create a clean style is hard. If you think just because you can design Websites from scratch using only CSS this task will be easy then think again, unlike most stylesheets where you can use DIV and ID tags the CSS in mySpace is more CSS hacks for table layouts.

For example:

table table table {
 border:1px solid orange;
 background-color: orange;
 }

table table table td {
 border:1px solid black;
 background-color: black;
 }

In this tutorial i am going to attempt to define all the tables using bright colors so we can see exactly how the layout works.

Because i am not sure how this will look myself im not sure how this Tutorial will end up, maybe helpful maybe not lol.

First of all im going to test the below code:

table {
 border:1px solid red;
 background-color: red;
 }

table td {
 border:1px solid blue;
 background-color: blue;
 }

Which looks like this:


Where Blue is table td and red is table.

Most of my reason for creating this tutorial was to have a resource for myself which i could look back on and see in screenshot form how the page layout works with CSS. What im going to do now is just add a screenshot and code for every table. And at the end i will add all the CSS together and see how it looks then. You can also see a preview here on my test mySpace account. MySpace.com - Bluepearl - 27 - Male - AU - www.myspace.com/bluepearltest

Visit my blog here for the complete tutorial

[Fragalot]

hahahahah, that is one UGLY theme! hhahahah

good to explain how it works tho gj

[Sean]

sif man this is the best template i have ever designed, its going to go gold i tell ya

[GamerRadar]

lol, how do i put the background like yours? where it stays centered and static?

[Sean]

This is the code i used:

	background-repeat: repeat;
	background-attachment:fixed;
	background-position: top center;
	background-image: url(http://bluepearl-design.com/myspace/backgrounds/fuschia-background.jpg);

Remove the repeat line if your using a single image that doesnt need to be repeated.

[GamerRadar]

Thank you.

Was helpful, im trying to create my own myspace layout :P

[Sean]

Good luck man, at first it can be frustrating but its worth it in the end