QUESTIONS: Involving sliced layout! Please halp D: Options

[catrousel]

Okay. First off, I'm pretty down with div layouts. I know how they work and how to use them - but only recently (read: yesterday) did I learn how to slice. I understand MOST of it, except just the following things (the coding part):

1) How do you get the sliced layout to work in myspace? Yes, I know you have to put it in a div. And that's what I did. I want the layout to be centred on the page, under the ad - like this;
http://www.myspace.com/dave_is_asian
And I tried putting the table code in between <div align="center"> and </div>. I put all my coding into the "about me" section, and the layout literally appears in the "about me" section, instead of over everything.

2) How do you get comments to work with these kinds of layouts? For example;
http://www.myspace.com/isafad

Gah, I'm so frustrated, I've tried everything I could find.
The layout now is;
http://www.myspace.com/totestornottotest
and it's currently coded with plain divs. Now, if you're browsing with a 1024x768 resolution, it appears that the layout's centred in the middle of the page. but with a larger screen, it's to the left.

Sooooooo yeah! Sorry I'm so wordy, guys! Hopefully one of you can help me out :)
PS - yeah, this is my first post. I'll get 'round to actually sprucing up my createblog profile and posting, etc, when I've gotten my head around this :D

My code (yep, aware that I've gotta upload my images and all that jazz... aaaaand that I've got a ton of spacers but I'll live with them)...

<div align="center">
<table id="Table_01" width="1000" height="751" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="images/whamlayout_01.jpg" width="343" height="251" alt=""></td>
<td colspan="2">
<img src="images/whamlayout_02.jpg" width="283" height="251" alt=""></td>
<td colspan="2">
<img src="images/whamlayout_03.jpg" width="374" height="251" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/whamlayout_04.jpg" width="343" height="42" alt=""></td>
<td>
<img src="images/whamlayout_05.jpg" width="97" height="42" alt=""></td>
<td>
<img src="images/whamlayout_06.jpg" width="186" height="42" alt=""></td>
<td colspan="2">
<img src="images/whamlayout_07.jpg" width="374" height="42" alt=""></td>
</tr>
<tr>
<td>
<img src="images/whamlayout_08.jpg" width="208" height="457" alt=""></td>
<td colspan="4">
<img src="images/whamlayout_09.jpg" width="580" height="457" alt=""></td>
<td>
<img src="images/whamlayout_10.jpg" width="212" height="457" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="208" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="135" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="186" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="162" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="212" height="1" alt=""></td>
</tr>
</table>
</div>

[catrousel]

Ooh, and what if I wanted to make the layout continuous?

[fixtatik]

1. try assigning a class to the main div, with a fixed width of 1000px.

CODE

.maindiv { width:1000px; position:absolute; left:50%; margin:150px 0 0 -500px; }

2. are you just looking to put the comments in a scroll box? whatever the case, you can move / adjust / customize the comments by using .friendsComments { }. myspace has also added in a separate table class within the comments, called ".columnsWidening". this is referring to the right column of your comments area (where the date & comments themselves are).
3. i'd actually suggest getting rid of the spacers (it's just adding to load time). instead, try using <br style="line-height:6px;" /> in place of all of the spacer images.

[catrousel]

Hey, grr, thanks for your reply... but I really don't understand anything of what you've just said.

I'm not accustomed to using CSS to code my div layouts, I've always used HTML. So I don't really get where I'm supposed to use that code you suggested... or... HOW to use it?

And everything else kind of just floated right by me, sorry. I don't get it, haha.

[fixtatik]

the div that you have, instead of using <div align="center">, try changing it to <div class="maindiv">. then, you'd add in <style></style> tags with the maindiv code:

CODE

<style type="text/css">
.maindiv { width:1000px; position:absolute; left:50%; margin:150px 0 0 -500px; }
</style>

basically, what it's describing is that you want the div positioned absolutely within your page, meaning you determine the margins from the top, right, bottom and left sides of the page. "left:50%;" means that you want the left side of "maindiv" to be positioned 50% from the left of a visitor's screen (percentages allow for "liquid css," meaning that they'll look like you want it to look on any resolution - provided of course, they don't have an 800x600 resolution, or they'll have a scroll bar on the bottom).

margin:150px 0 0 -500px; is telling browsers where you'd like the div positioned after you move it 50% from the left. 150 pixels from the very top of the browser, and 500 pixels to the left. obviously, 500 is half of 1000, so you'd have the div positioned in the exact center of the page.

for the comment, you'd add that code between the style tags, as well, and position it similar to how you did the maindiv.

CODE

<style type="text/css">
.maindiv { width:1000px; position:absolute; left:50%; margin:150px 0 0 -500px; }
.friendsComments { width:1000px; position:absolute; left:50%; margin:901px 0 0 -500px; }
</style>

the code ".friendsComments" is what myspace calls the table that contains your friends' comments...simple enough. again, a width of your choice (i used 1000 pixels to match that of your table). we're going to use 901 pixels from the top of the page, first to move it 150px from there (which is below the advertisement) and an extra 751px (the height of your table).

if you use <div align="center">, that simply centers everything within the div itself - it won't center it on the page.

as for it appearing in your "about me" section instead of over the page, did you remove the other tables? if not, use this to get rid of everything else:

CODE

<style type="text/css">
.maindiv { width:1000px; position:absolute; left:50%; margin:150px 0 0 -500px; }
.friendsComments { width:1000px; position:absolute; left:50%; margin:901px 0 0 -500px; }
.navigationBar, .profileInfo, .userProfileURL, .contactTable, .interestsAndDetails, .userProfileDetail, .userProfileSchool, .userProfileNetworking, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .blurbs td.text, .friendSpace, .orangetext15, table div { display:none; }
div table div, table table div { display:block; }
</style>

what the new part does is tell browsers to not display any of the tables (except for your friends' comments) that are written into the code by myspace.

i can try to explain it a little better if you need me to.

[catrousel]

Okay, wow, I pretty much understand everything now. I just have to test it out to see if it works.

Thanks so much!