Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Watch Video

Posted January 5, 2015 6:30pm by

When I don't add a photo on my about page there is a space in-between the top of the page and my header.

When I don't add a photo on my about page there is a space in-between the top of the page and my header. How do I fix this?

2 Answers

January 5, 2015 7:45pm

I have to admit that this stumped me for a moment, but I finally figured out that it has to do with the styles applied to the header element. More specifically, the header has a "float: left;" property attached to it that causes problems with spacing and is unnecessary. Removing the "float: left;" property will ensure that there is no space between the header and the top of the page. In that course, there are no media queries, so there is officially no reason for the header element to have a float applied to it whatsoever. I don't know what Nick was thinking lol.

January 5, 2015 8:53pm

I am also stumped. I applied the code as posted to a workspace and everything rendered properly. As mentioned before it seems that the normalize css is not being applied for some reason.

January 5, 2015 9:27pm

In the about.html page, though, the header did look as though it had a slight margin applied to it when you don't have a picture on the page in the header section. I scoured the CSS and couldn't find any applicable margins that might have caused that. But, I noticed that the header element had a float applied to it for no reason at all. And that float was what caused the spacing issue.

My guess is that Nick just accidentally put in an extra float property. But removing the float property takes away the spacing issue.

January 5, 2015 6:35pm

Hey Joel Lithgow,

That style you are seeing is the result of browser based styles that are put on to every page by the browser. You can get rid of those default browser styles by downloading and linking "normalize.css" into your document. Just be sure to put it on your page so that it sits above (and is thereby loaded before) your own stylesheet (or inline styles) so that your styles aren't overwritten i.e.

<!-- Link to styles in a folder called "css" -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/mystyles.css">

Here is the download page for normalize.css. If you just click the big green download button, it will open up the stylesheet. You can do a right click on it (or whatever click opens context menus for you), and then select "Save target as" or "Save link as" or a command similar to that. Then you can save it wherever you want and link it like you would any other stylesheet.

January 5, 2015 6:53pm

I have the normalize.css in both of my pages so far, however it works perfectly fine on the index.html but not the about.html file and the code is exactly the same except the <section> which does not have a photo.

January 5, 2015 7:13pm

Can you post the code from your about.html page? Here is how to post your code (in case you haven't done it before) and be sure to leave blank lines above and below code blocks.

code

January 5, 2015 7:15pm

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Joel Lithgow | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Joel Lithgow</h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul>
                <li><a href="index.html">Portfolio</a></li>
                <li><a href="about.html" class="selected">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
            <h3>About</h3>
            <p>Hi my name is Joel Lithow and this is my photoghphy portfolio where I share all of my favorite work. When I am not taking photo's I enjoy playing games with my brothers, going on hikes with friends, and learning about programing.</p>
        </section>
      <footer>
            <a href="http://twitter.com/joellithgow"> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> </a>
            <a href="http://facebook.com/joellithgow"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a>
        <p>&copy; 2014 Joel Lithgow.</p>
      </footer>
    </div>
</body>
</html>

January 5, 2015 7:20pm

I don't see anything too out of the ordinary there besides that doctype should be DOCTYPE but this isn't a solution to your problem.

Go ahead and post your "main.css" if you would, as well.

January 5, 2015 7:22pm

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Joel Lithgow | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Joel Lithgow</h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul>
                <li><a href="index.html" class="selected">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
            <ul id="gallery">
                <li>
                    <a href="img/numbers-01.jpg">
                        <img src="img/numbers-01.jpg" alt="">
                        <p>Experimenation with color and texture.</p>
                    </a>
                </li>
                <li>
                    <a href="img/numbers-06.jpg">
                        <img src="img/numbers-06.jpg" alt="">
                        <p>80's inspired disco number.</p>
                    </a>
                </li>
            </ul>
        </section>
      <footer>
            <a href="http://twitter.com/joellithgow"> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> </a>
            <a href="http://facebook.com/joellithgow"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a>
        <p>&copy; 2014 Joel Lithgow.</p>
      </footer>
    </div>
</body>
</html>

When I changed the Doctype to DOCTYPE and refreshed that it worked so I changed it back to lowercase to see if this was the issue but it wasn't, all of a sudden it works now. I guess I just had to quit Dreamweaver and reopen it.

January 5, 2015 7:25pm

I'd like to see "main.css" so that I can see what your styling is doing to the page.

January 5, 2015 7:27pm

/**********************************
GENERAL
***********************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
    margin: 0 0 1em;
}

/**********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: .5% 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/**********************************
NAVIGATION
***********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/**********************************
FOOTER
***********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/**********************************
PAGE: PORTFOLIO
***********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}

/**********************************
COLORS
***********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Joel Lithgow

Joel Lithgow

When I don't add a photo on my about page there is a space in-between the top of the page and my header.

2 Answers

Marcus Parsons

Marcus Parsons

Keith Kelly

Keith Kelly

Marcus Parsons

Marcus Parsons

Marcus Parsons

Marcus Parsons

Joel Lithgow

Joel Lithgow

Marcus Parsons

Marcus Parsons

Joel Lithgow

Joel Lithgow

Marcus Parsons

Marcus Parsons

Joel Lithgow

Joel Lithgow

Marcus Parsons

Marcus Parsons

Joel Lithgow

Joel Lithgow