Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    2 part question that will prob lead to more..

    Hello,
    I'm a noob here so please be nice and excuse me if the answer is obvious. I'm currently taking intro to HTML and css but seem to have missed something or I've just been staring at it too long.

    Site: http://dmhfwp.com/

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Here's a start:
    Body {
    padding: 10px 10px 0 10px;
    }
    Takes care of 10 of the 20.

    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.
    Last edited by sunfighter; 05-08-2013 at 04:07 PM.

  • Users who have thanked sunfighter for this post:

    Htownclown (05-15-2013)

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Here's a start:
    Body {
    padding: 10px 10px 0 10px;
    }
    Takes care of 10 of the 20.

    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.

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    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:

    Code:
    <body>
      content
    </body>
    It should be more like this:

    Code:
    <body>
        <div class="container">
            content
        </div>
    </body>
    Then, you center the container class like so:
    Code:
    .container {
        width: 960px;
        margin: 0px auto;
    }
    My signature :)

  • Users who have thanked ttkim for this post:

    Htownclown (05-15-2013)

  • #5
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    33
    Thanks
    1
    Thanked 8 Times in 8 Posts
    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.
    Last edited by Judgment Day; 05-08-2013 at 10:23 PM.

  • Users who have thanked Judgment Day for this post:

    Htownclown (05-15-2013)

  • #6
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Judgment Day View 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.

    Thanks for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •