CSS MySpace editing help...

[Mr Salek]

So I'm playing with CSS for the first time, trying to fix myself up with an über-sexy MySpace profile. I've used a tutorial (http://5thirtyone.com/myspace-part1-div-overlay) to start me off and teach me the basics, but I've hit a problem. For some reason I can't move the main body of text. When I do, the div overlay moves too, which is bloody annoying. Here's all the code I've got:

CSS
<style type="text/css">
.main {
position: absolute;
left: 0%;
top: 0px;
z-index: 1;
}

.text {

}

.title {
font: italic bold 26px times;
}

.picture {
position: absolute;
top: 20%;
left: 20%;
z-index: 2;
}

.pics {
position:absolute;
top: 60%;
left: 20%;
}

.commentbox {
position: absolute;
top: 80%;
right: 20%;
}

textarea {
background-color: FFFFFF;
border:1px solid;
border-color: 000000;
}

input{
background-color: FFFFFF;
border:1px solid;
border-color: 000000;
}

</style>


HTML
<div class="main">
<table style="width: 1272px;
height: 823px;
cellpadding: 0px;
cellspacing: 0px;
background-color: #AD0101;
">

<tr><td valign="top">

<div class="picture">
<div class="title">Sebastian</div>
<img src="http://img265.imageshack.us/img265/309/defaultfq1.png"><br>
Blog Message Me</div>


<div class="text">
<table>
<tr>
<td valign="top" align="right" width=150><div class="title">moi</div></td>
<td width=300px>
<br>Hi, I'm Sebastian. I'm 15 years old and I live in Hampshire in the south of England. My main passions in life are music and languages. I have some brilliant friends, a small selection of which you can see on this page.
</td>
</tr>
</table>
<br>
<table>
<tr>
<td valign="top" align="right" width=150><div class="title">la musique</div></td>
<td width=300px>
<br>As I mentioned above, I love music. I listen to a wide range of composers; from Beethoven to Shostakovich, Schubert, Rachmaninov and Gershwin. I play the violin solo, in the Hampshire County Youth Orchestra and Hampshire County Chamber Orchestra and various other small chamber groups.
</td>
</tr>
</table>
<br>
<table>
<tr>
<td valign="top" align="right" width=150><div class="title">les langues</div></td>
<td width=300px>
<br>And then there's the languages. Having Danish and Iranian parents, I was thrown in at the deep end. I did OK, and now I'm speaking French, German, Danish, Italian, Japanese and Latin.
</td>
</tr>
</table>
<br>
<table>
<tr>
<td valign="top" align="right" width=150><div class="title">contactez-moi</div></td>
<td width=300px>
<br>E-mail: sebastian.salek@gmail.com<br>
MSN: sebastian.salek@gmail.com<br>
Skype: sebastian.salek<br>
MySpace: http://www.myspace.com/mrsalek
</td>
</tr>
</table>
</div>

<div class="pics">
<div class="title">les images</div>
<table>
<tr>
<td><img src="http://img78.imageshack.us/img78/4374/lesimages1tf5.png"></td>
<td><img src="http://img78.imageshack.us/img78/4374/lesimages1tf5.png"> </td>
<td><img src="http://img78.imageshack.us/img78/4374/lesimages1tf5.png"> </td>
<td><img src="http://img78.imageshack.us/img78/4374/lesimages1tf5.png"> </td>
</tr>
</table>
view all

<div class="title">mes amis</div>
<table>
<tr>
<td><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2NoYW5ueV9ib3k="><img src="http://img19.imageshack.us/img19/665/richardbandwcr0.png" border="0"></a></td>
<td><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2tpc3NpbmdfaW5fdG hlX3JhaW45OQ=="><img src="http://img71.imageshack.us/img71/6590/jobandwws1.png" border="0"></a> </td>
<td><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL21ldHJvcG9saWE="><img src="http://img510.imageshack.us/img510/7961/mattbandwhq5.png" border="0"> </td>
<td><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3F1ZWVuX29mX3RoaX NfaGVsbF9ob2xl"><img src="http://img505.imageshack.us/img505/1762/vickybandwsp9.png" border="0"></td>
</tr>
<tr>
<td><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2NlcHVzc2luYm9vdH M="><img src="http://img254.imageshack.us/img254/5906/sambandwwc0.png" border="0"></td>
<td><img src="http://img233.imageshack.us/img233/7968/charlottebandwea3.png"> </td>
<td><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2tpc3NtZW1pc2VyeQ =="><img src="http://img505.imageshack.us/img505/3880/livibandwqn9.png" border="0"> </td>
<td><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2NvbnRhZ2lvdXNiYX Nz"><img src="http://img253.imageshack.us/img253/6703/russellbandwfa7.png" border="0"> </td>
</tr>
</table>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm 0/ZnVzZWFjdGlvbj11c2VyLnZpZXdmcmllbmRzJmZyaWVuZGlkPT ExMTcwMTI5MCZteXRva2VuPWFiMjc4M2FkLWZkNzgtNDNjYS1i Y2ZjLWQwNmY4NGMwMGRjMQ==">view all</a>
</div>

<div class="commentbox">
<form method="post"
action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="InsertFRIENDID">
<textarea name="f_comments" cols="30" rows="5"></textarea><br />
<input type="submit" value="Send">
</form>
</div>

</td></tr></table></div>

My profile (not my real profile obviously, just a test page) can be found here (http://www.myspace.com/sebastiantestpage).

Any help would be greatly appreciated. Cheers!

[Timmeh]

Hmm, I'm not quite sure what your problem is here... do you mean that the profile is jammed in the top right corner? That one's easy to fix, just play with top and left in .main.

If you mean the floating picture, then just bump it over by changing

.picture {
position: absolute;
top: 20%;
left: 20%;
z-index: 2;
}

However, I spy a potential problem. You've set the width of main statically by expanding it around a table; this is potentially going to cause problems with the dynamic positions of the other divs. Basically, someone with a very big screen could end up seeing a red background and a load of divs floating off to the side or someone with a very small screen could see a lot of overlap. You're better off either setting all the positions to an exact px location or using %% to have it expand to that % position within it's container.

[Midget]

this (http://www.bbzspace.com/overlay/) would be far, far quicker

[MeatwagonAction]

this (http://www.bbzspace.com/overlay/) would be far, far quicker

Or this (http://www.pimp-my-profile.com).

[Timmeh]

Those editing things are all well and good if all you want is a pretty myspace. Not much good if you want a pretty myspace while learning html though ;).

[Mr Salek]

The thing I'm having problems with is the text in the top left corner. It won't move unless I set it's position to absolute, and then it takes the overlay with it :(

I've also noticed that I need different sized overlays for different sized browers. Can I just make it massive and use the overflow function?

And are you basically saying that I should avoid using % because of screen sizes?