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
Unsubscribed User
6,281 PointsWhite space between header and the top of the page. (Only on About page)
Hello guys
I have some troubles. There is a white line between above my green header. This only occurs on the About page and is not a problem on my Portfolio and Contact page.
I have tried to find the problem, but i cant. Anyone know where the problem is and where i should look?
16 Answers
Amy Tucker
13,273 PointsNo problem. BTW, I copied and pasted your code into my own file and loaded it and it looks good on my end - in Chrome :)
Amy Tucker
13,273 PointsIf it's only on the about page, it sounds like the trouble could be in your html. Can you post the code for that page?
Unsubscribed User
6,281 PointsHello Amy. Here it is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Supreme Design af Leopold</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Thomas Leopold</h1>
<h2>Web-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>Eksperiment med farve og tekst.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Laver en hyggelig hjemmeside.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Treehouse er godt.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Jeg er bange.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Nu skal jeg snart leget med photoshop :D.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/Thomas.leopold.5"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
<p>© Alt på denne side tilhører Thomas Leopold - 2015</p>
</footer>
</div>
</body>
</html>
Amy Tucker
13,273 PointsIt looks like you're missing your <head> tags, which should surround your top block of code (from the first <meta> to the last). Then the <body> tag also seems to be missing, it should start before <header> and end after </div>. Then all of it should be between <html> tags (except the DOCTYPE at the top). Not sure if some of these errors are copy/paste related, but the missing <head> and <body> tags in particular might be the cause of the white space.
Amy Tucker
13,273 Points"head" tags around the top block of code "body" tags before the first header tag and after the last div "html" tags around everything except DOCTYPE... Apologies for answering literally and not paying attention to how the markup works on this page. Hope this helps :)
Unsubscribed User
6,281 PointsHi again Amy.
I think i've made a copypaste error.. Dont know what happened. I will try add my code again:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Supreme Design af Leopold</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Thomas Leopold</h1>
<h2>Web-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>Eksperiment med farve og tekst.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Laver en hyggelig hjemmeside.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Treehouse er godt.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Jeg er bange.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Nu skal jeg snart leget med photoshop :D.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/Thomas.leopold.5"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
<p>© Alt på denne side tilhører Thomas Leopold - 2015</p>
</footer>
</div>
</body>
</html>
Unsubscribed User
6,281 PointsI dont know why it removes some of the code when i insert.
</head> <body> <header> <a href="index.html" id="logo"> <h1>Thomas Leopold</h1> <h2>Web-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>Eksperiment med farve og tekst.</p> </a> </li> <li>
Unsubscribed User
6,281 PointsMmm it removes the body tags. :S
Amy Tucker
13,273 PointsThat's interesting - it makes me wonder if it removed those tags when you copied from index.html and pasted into about.html, or if it's just happening here?
Unsubscribed User
6,281 PointsYes it's very strange.. But no I have the <body></body> html in the About page.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header>
Unsubscribed User
6,281 PointsOmg. I just copied 4 lines of code consisting of the </head> then the <body> then <header> and so on. But it removes is..
Unsubscribed User
6,281 PointsAnd then it removes it again.. What is the problem?
Unsubscribed User
6,281 PointsCan i upload a screenshot?
Amy Tucker
13,273 PointsYes the Markdown Cheatsheet at the bottom has a way for you to put up an image - that might be better
Unsubscribed User
6,281 Pointsfile:///Users/thomasberg98/Desktop/Sk%C3%A6rmbillede%202015-04-11%20kl.%2011.41.06.png
Unsubscribed User
6,281 Points
Unsubscribed User
6,281 PointsIm not sure how to do that
Unsubscribed User
6,281 PointsSorry for being a little retarded :D
Amy Tucker
13,273 PointsI was having the same problem - I don't know where that image file is supposed to live. I wouldn't be surprised if this forum page is stripping those tags out on purpose so it doesn't conflict with the page itself... so if those body tags are really there, I don't know where the problem is. If you can figure out how to post an image, I'll check back in the morning. Everything else looks correct though. Which is mind boggling.
Amy Tucker
13,273 PointsThere's also tips on posting code in the Markdown Cheatsheet that might help
Unsubscribed User
6,281 PointsOkay now i try again to post code inside ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Supreme Design af Leopold</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Thomas Leopold</h1>
<h2>Web-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>
<img src="img/nick.jpg" alt="Photograph of Nick" class="Profile-photo">
<h3> About </h3>
<p> Hej mit navn er Thomas, og dette er en forsøgs hjemmeside</p>
<p> Hvis du vil følge mig på facebook, så siger jeg bare nej hejhej</p>
</section>
<footer>
<a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/Thomas.leopold.5"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
<p>© Alt på denne side tilhører Thomas Leopold - 2015</p>
</footer>
</div>
</body>
</html>
Unsubscribed User
6,281 PointsWell, this makes it hard to view, but atleast it shows code now. However, I think I will ignore this error. But thank you for the assist :)
Evan Sennott
685 PointsEvan Sennott
685 Pointssame thing happens to me thomas. I have some info that could help you. The .profile-photo is the cause of this problem when i write float:left; it causes there to be space on top. and by the way i have figured out how to fix the problem itself yet.