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
Tage Smith
2,997 Pointsheader
Okay, so my header did get thicker after following along with Nick, the letters aren't as cut off, but there's still a white line at the top.
My code: header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
h1 { font-family: "Roboto", sans-serif; margin: 15px 0; font: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
8 Answers
notf0und
11,940 PointsDisregard my last answer. You can and do fix it alongside the video. Pay attention to the very beginning of the video and you should have it in no time.
Maybe post your CSS if you really can't get it, and we'll try to help :)
Michael Davis
10,035 PointsTry this course to get more familiar with Developer Tools... it would help you greatly with your question, but would take more than just a quick answer in the forum to explain. Especially without being able to link to your work and see it to help.
Tage Smith
2,997 PointsI'm not to that point in the track, I'll have to wait until I get there.
David Makowski
13,676 PointsA css reset is some standardized code, which u most take from some website like http://meyerweb.com/eric/tools/css/reset/ and paste it into your css.
Browsers put styles on some of the elements by default. And they are not always the same on all the browsers. The "reset" code removes those, (or at least some of them, I think you can find different versions) to make your style appear the same on all browsers or have exact control.
With the "inspect element" in chrome, you can click on the "magnifier" symbol and then hover over your header...it will show which element is causing the white line. Probably it's some margin.
Tage Smith
2,997 PointsSo where in my css do I paste the one from the website? Does it matter?
Andrew Stelmach
12,583 PointsThe gap at the top is usually solved by giving the header element some padding. However...
You might be missing a dot in front of 'header'. So, .header instead of header. Your html probably says <div class="header"> no?
notf0und
11,940 PointsDo you have a CSS reset enabled?
To (hopefully) see exactly what's causing this styling issue, you could right click the white bar, then select "Inspect Element" if you're using Chrome, or something similar if you're using Firefox. Once you do that, a window should pop up at the bottom of your screen, or possibly in a new window. On the very right of that window there are the styles, and that's where you'll want to look for margins or padding applied to your header, body, and html.
Hope that helps :)
Tage Smith
2,997 PointsDumb question but what's a 'css reset'? Also, I am using chrome I right clicked "inspect element" but now I don't quite know what I'm looking for.
notf0und
11,940 Points"A CSS reset is a set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn't know, every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible." http://www.cssreset.com/what-is-a-css-reset/
A reset would set a default look to your webpage across all the different browsers, as well as getting rid of some pesky occurrences, like this white bar at the top of your page.
Through the Web Design course, Nick uses a reset named Normalize.css, which you can download here: http://necolas.github.io/normalize.css/. Installation is simple: Step 1, place it beside your CSS file. Step 2, add it to your HTML before your main CSS file, like so
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
And that's it! See if adding the reset helps at all.
If you can't work the Element Inspector now, I think you can get by, but definitely try to get comfortable with it. For now, try setting this rule in your CSS:
body {
margin: 0;
padding: 0;
}
Hope this was all understandable :P Please let me know if your problem still isn't fixed by Normalize.css or that CSS.
Tage Smith
2,997 PointsI pasted it into the code, it doesn't seem to work, is there another step I am missing?
Tage Smith
2,997 PointsWhat's the step if I've already pasted it into the code?
notf0und
11,940 PointsWhat do you mean, pasted that CSS into the code? And have you solved the white bar problem?
Tage Smith
2,997 PointsIt was already pasted into the code. It didn't do anything, was there something else that I needed to do?
Andrew Stelmach
12,583 PointsIf that doesn't work, post your html here.
Tage Smith
2,997 PointsMy main html file or my css file? Also, there's two "header {}" things in my css file. I tried adding a "." to both of them, one of them negated the exercise, the other took out the header and text complete, the header ended up being all white.
Tage Smith
2,997 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Thing | thing</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100italic,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.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>thing.</h1>
<h2>The thing.</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Hamburgers 1</a></li>
<li><a href="about.html">Hamburgers 2</a></li>
<li><a href="contact.html">Hamburgers 3</a></li>
</ul>
</nav>
</header>
Here's my html for the header. I appreciate the help.
Tage Smith
2,997 PointsSo my code is not showing up in the comment, how do I make it appear so you can see it?
notf0und
11,940 PointsTage, I've edited your comment to show your HTML. Press edit to see how it's done, or go here: https://teamtreehouse.com/forum/posting-code-to-the-forum
Tage Smith
2,997 PointsSO it's NOT an ellipsis, what is that accent?
Tage Smith
2,997 PointsNew problem. I somehow managed to fix the line at the top, but now my pics are all out of whack. Here's the html for what's going on now:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>THING | BY Thing</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100italic,900' 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>GARSH.</h1>
<h2>The thing.</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Hamburgers 1</a></li>
<li><a href="about.html">Hamburgers 2</a></li>
<li><a href="contact.html" >Hamburgers 3</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="index.html">
<img src="img/numbers-01.jpg" alt="">
<p>picture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>picture</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>picture</p>
</a>
</li><li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>picture</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>picture</p>
</a>
</li>
</ul>
<p>picture</p>
</section>
<footer>
<a href="http://twitter.com/tshsavage"><img src="img/twitter-wrap.png" alt="twitter logo" class="social icon"></a>
<a href="http://facebook.com/tage.savage"><img src="img/facebook-wrap.png" alt="facebook logo" class="social icon"></a>
<p>$ $ TAGE $ $</p>
</footer>
</div>
</body>
</html>
notf0und
11,940 PointsIt's 3 backticks ( ` ) then language, then code, then 3 backticks to close the code block.
```html
code goes here
```backticks to close the codeblock
notf0und
11,940 PointsCan you link me to the workspace preview so I can see how the images are out of whack, or maybe post your CSS along side your HTML? Alignment issues are tough to help solve with just HTML.
Tage Smith
2,997 Points
Tage Smith
2,997 PointsOk, the weird thing is that that pages that have the <section id= "primary> are fine, but the main page is messed up. Sorry for all the frustration...
notf0und
11,940 PointsOk, so the issue is still that your main page has the white bar, and that your other pages are fine?
Tage Smith
2,997 PointsYes. That was a little unclear. This page: http://web-3oba9tjste.treehouse-app.com/contact.html and the /contact page are fine, but the main page is not.
notf0und
11,940 PointsI have to admit, I'm not sure what the issue could be. The only other suggestion I can make is to restart from that video with a new Workspace, and see if the issue still exists after that. Do keep your current Workspace, however. It will be good for comparing and finding the issue.
Since this is a new issue, and this post is 2 days old, you could also create a new post and hope someone can help find out why only the one page has the white bar.
Sorry I couldn't be of more help, Tage :(
Tage Smith
2,997 PointsI don't know how, but I figured it out.
Tage Smith
2,997 PointsTage Smith
2,997 PointsWhich video are you referring to? The one in previous comments or the one that I'm asking about now? (how do you go back to that video from this forum, btw?)