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!
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
Becky Pate
1,667 PointsAdditional padding/ margin can't work it out!
Hello I have additional padding/ margin above the header area but I can't figure out where it's coming from. I don't think I can attach a screenshot here but basically there's a block of body colour, then the header area, then the body colour again. I don't know why the body is appearing at the top of the page above the header. Does it make sense? Here's a link to my codepen: http://cdpn.io/ycGvl Thanks :)
David Valles
18,487 PointsWell.. shoot, my code snippets didn't go through.. take two:
Take out your 'h1' elements that are tucked in the 'a' element.
Then, in css, target 'header a' element for styling.
Becky Pate
1,667 PointsThanks David. The only thing is, if I do that, what happens if I have other links in the header area? How do I apply the link only too 'rpatey'?
David Valles
18,487 PointsHi Becky,
You could set an id or class to your links. The id is unique, so only works per element. The class is general, so multiple elements can be grouped into a class. Then in CSS, select the id or class and set your style.
Becky Pate
1,667 PointsHi David, I've just tried to do what you suggested and got myself in a pickle! Do you have any example code where you've done this? Thanks.
David Valles
18,487 PointsHi Becky... I've got the code for you. Let's see if I can pass it along.
Here's the HTML.
<body>
<div id="wrapper">
<div id="header">
<a href="https://twitter.com/rpatey">rpatey</a>
</div>
<div id="body">
<a href="https://twitter.com/rpatey">
<img align="center" src="Rebecca Pate.png" height="150px" width="150px" alt="Rebecca Pate">
</a>
</div>
<p>coming soon...</p>
</div>
</body>
Here's the CSS:
#header {
font-size: 10em;
font-weight: bold;
color: #0066FF;
}
body {
font-family: 'Raleway', sans-serif;
color: #0066FF;
background: #FFFFED;
text-align: center;
margin-top: 0px;
text-decoration:none;
}
Becky Pate
1,667 PointsThanks for this David. I understand it.
Just one very quick question (then I promise that's it!!)...
What is the 'wrapper' for?
David Valles
18,487 Pointsit's simply a container div that encapsulates your page. then you can apply a global style to the entire page, like setting the width of a page. It's your choice to keep or not, but seems to be a common practice as you see in many code examples.
Becky Pate
1,667 Pointsah cool, got it thanks so much for your help!
2 Answers
Brad L'estrange
2,085 PointsIn your CSS element body you have margin-top: 50px; that might just be your problem. :)
Kevin Korte
28,147 PointsThis is the correct answer.
Becky Pate
1,667 Pointsthank you, that worked.
David Valles
18,487 PointsDavid Valles
18,487 PointsBecky, Your <h1> is tucked in the <a> link. Try:
<a href="https://twitter.com/rpatey" class="btn">rpatey</a>
Now, maybe in CSS target <header> <a> for styling.
Hope that helps!