MySpace - Aligning the Body

Catching Up

So far we've learned how to change the background of the entire page and the main body section of our MySpace profile. If you need a review, please visit MySpace Backgrounds to see what we did.

Here's where we were:

I had originally thought that to create the left and right borders on the main body/content area of the page would be easy. Just add a border to the table's left and right sides and then make sure that the interior tables have no border.

I'll start with the code for the borders and add them to what I had already coded for my page's background. Remember, all of this code goes in the About Me section of your profile.

<style>
body
{
background-color:333333;
background-image:url(http://www.some-web-place-for-pictures.com/bg.gif)
}
table, tr, td
{background-color:333333;}
table {
border-style: solid;
border-color: 111111;
border-width: 6px;
border-top: none;
border-bottom: none;
}
table table {border: none;}
table table table td{border:none;}
</style>


My profile now has a border on the left and right sides of the main content area.

MySpace is a bit different than the typical webpage in that members are constrained by coding that by today's standards are not optimal. The table table and table table table td styling is needed to keep the interior sections of the main page from having borders. Without those additional 2 statements, I would have a mess of extraneous gray lines all over the page, as shown below.

MySpace Navigation Bars - Header & Footer Width

But, we appear to have a new problem as the two primary navigation menus appear to have different widths. Both of them appear wider then the rest of the main page content and the footer now is as wide as the entire page.

Here's what they look like with the border but not the correct width and placement.

The width correction applies to both the top navigation and footer menus. To correct the width, make the following additions/changes to your styles.

table {width: 800px}

table table {width: 100%}

Setting the table width to 800px forces the edges of the main content area and navigation bars to be the same width. The table table width setting is needed to keep the interior sections (contact, friends, etc) from also being 800px wide.

Unfortunately, for some strange reason, while that change does make the footer the proper width, it is no longer centered. Make the following additions/changes to your styles.

body {text-align:center;}

table {margin-left:auto; margin-right:auto;}

table tr, td {text-align: left;}

Like with the widths, every time we make a change we have to break it for the interior sections. The body style centers all text which we don't necessarily want, so we need the last change to return everything to normal left alignment. The margin-left and right styles will cause the footer area to be centered and more fluid. (Fluidity in web design is when a web page's design can maintain spacing and proportion when the browser window is resized.)

MySpace Navigation Menus

Putting a simple border around the main content of a MySpace profile page turned into hours of trying to get the edges of the heading menu and footer menu to have the same width as the rest of the content. By using CSS styling that both sets and unsets the widths and text placement we are able to give our page borders and keep everything nicely aligned.

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials and MySpace Tutorials.