Skip navigation
Currently Being Moderated

Where's that space coming from?

Nov 19, 2012 12:20 PM

I am confused... I created this page:

http://sarahpellerdesign.com/shannon/index.html

 

And then I created this one:

file://macintosh%20hd/Users/sarahpeller/Art/sarahpellerdesign/site/sha nnon/sound%20with%20menu.html

 

And there is a space between the nav bar and the image below on the second page, but not the first.

 

Anyone know why this might be?

 
Replies
  • Currently Being Moderated
    Nov 19, 2012 12:22 PM   in reply to sarahpeller

    Your second link goes to your hard drive, we cannot see that.

     

    A space between the top of a page and the elements on it is usually caused by the default margin being left in place on the <body> tag. To remove it, add the css below...

     

    body {

         margin:0;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 5:30 PM   in reply to sarahpeller

    As Jon said, we can't see your second link unless you ship your computer to us.

     

    Another thing to look for in code view is an empty paragraph, heading or break tag between your nav & image. Any of those will create white space.

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 19, 2012 10:17 PM   in reply to sarahpeller

    Sarah,

     

    Could you please upload the 2nd webpage on your server and give us a link - similar to your 1st link? This is the only way we can check.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 2:51 PM   in reply to sarahpeller

    On lines 76 and 77, you have 2 <br /> tags.  Remove them.

     

    Also validate code and fix your errors.   http://validator.w3.org/

     

    <div align="center"> is deprecated in HTML4.01 and not supported by HTML5.

     

    See Centering Pages, Images and other elements with CSS

    http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements _with_CSS-16640.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 20, 2012 10:47 PM   in reply to sarahpeller

    As Nancy said, "center" tag is deprecated.

     

    To center your content horizontally on your page, use this:

     

    CSS:

     

    #container{

    margin: 0 auto;

    width: 950px;

    }

    HTML:

     

    Replace Line 38 with:

     

    <div id="container">

     

    That should center your content horizontally while keeping the main width at 950px.

     

    Do not use <br> tags. Use <div> only and use clear tags in CSS to clear your spacing.

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points