If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

A). Why do I have white space at the bottom of each page? Why is my content pushed to the bottom within the white space? See "Video" or "Image" page for example. Why doesn't my gradient cover entire page?

B). Shouldn't my content (photo's, video player etc..) be laying on of the Surferboy image?

I have no doubt that the pages are working correctly however, they're not how I want them to be laid out. I'm lost. Any details with examples to my code would be appreciated.

Hint: Get rid of code your not using. Don't just comment it out. If you want to save it have two files, one with the comment out sections and one for use with out the clutter.

Okay. I (think...) I'm following your direction however I get the same results. Hard to say if I'm reading too much into it or not. Are you simply saying that I should completely remove everything except the "padding" from the body tag? Should I not place an image and or gradient within the css? More lost..
Thank you in advance.

Most sites give their body a padding and margin of 0. Here are some things that you did to your body.

Code:

body {
width: 960px;
margin: 0px auto;
padding: 10px 10px 0 10px;
}

Change padding to 0 and that white space at the bottom of the page disappears.

Now, I know that you set the width and gave your body a margin of "0 auto" to center your content, but you don't normally do that to the body. You create a container for your web page and center that instead. In other words, the HTML normally isn't like this:

Users who have thanked ttkim for this post:

I'm going to second what ttkim said by mentioning to not add any sort of padding to the actual body tag. In fact, I would ensure that no margins and padding are an issue for older, inconsistent browsers (like IE7) by adding:

body { margin:0; }

There are also padding definitions on line 61 of your stylesheet. Remove that and what ttkim said, and you should be okay. It's unfortunate, but once you get more advanced, you'll find that some browsers, especially older ones, interpret defaults like the body tag a bit differently. That's why many people have what's known as "resets" and "normalizers". They typically assign attributes to eliminate (as much as they can) this issue so that every browser is truly on a clean slate.

To add, I just looked at the source code, and you seem to have a div element outside of the body tag.

Code:

<div class="body">
</div>
<body>
"more code"

That's an invalid coding structure, so you might want to move that below the <body> tag.

Users who have thanked Judgment Day for this post:

I'm going to second what ttkim said by mentioning to not add any sort of padding to the actual body tag. In fact, I would ensure that no margins and padding are an issue for older, inconsistent browsers (like IE7) by adding:

body { margin:0; }

There are also padding definitions on line 61 of your stylesheet. Remove that and what ttkim said, and you should be okay. It's unfortunate, but once you get more advanced, you'll find that some browsers, especially older ones, interpret defaults like the body tag a bit differently. That's why many people have what's known as "resets" and "normalizers". They typically assign attributes to eliminate (as much as they can) this issue so that every browser is truly on a clean slate.

To add, I just looked at the source code, and you seem to have a div element outside of the body tag.

Code:

<div class="body">
</div>
<body>
"more code"

That's an invalid coding structure, so you might want to move that below the <body> tag.