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
ERNESTO ESPARZA
1,312 PointsI set the "header" as margin: 0 0 10px 0; but the small white portion on the "header" does not desapear, why ?
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
ERNESTO ESPARZA
1,312 PointsHello Timothy, thanks for your suport !!
I check my HTML and all seems ok... so far...
So far this is all I have :( ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Training web page</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/maincss.css"> </head> <body> <header> <a href="index.html"> <h1>Ernesto´s Web page training</h1> <h2>Master Gallery</h2> <h3>Please select a picture for detail information</h3> </a> </header> <section> <ul> <li> <p>cars pictures</p> <img src="main_pics/cars.jpg" alt=""> </li>
<li>
<p>House picutures</p>
<img src="main_pics/house.jpg" alt="">
</li>
<li>
<p>Dogs pictures</p>
<img src="main_pics/dog.jpg" alt="">
</li>
</ul>
</section>
<footer></footer>
</body>
</html>
.css file
/********************************** HEADING ***********************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
a{
text-decoration: none;
}
3 Answers
Damien Watson
27,419 PointsHi Ernesto,
I think the white space you're referring to is actually a margin set on the page body, not the header, so try adding this to your css:
body {
margin:0;
padding:0;
}
ERNESTO ESPARZA
1,312 PointsHello Damien
Thanks for helping, you were right, the "body" was related, but I had to add more code to fix the problem:
body{ float: left; margin: 0; padding: 0; width: 100%; }
Your comment was a lot of help this issue, thanks for supporting on this item !
Damien Watson
27,419 PointsHey Ernesto, Glad to hear you have it fixed, though now I'm curious. The body width is 100% wide by default and you shouldn't have to float it.
The reason that the space is appearing at the top is because the header has 'float:left;'. 'float' wraps the container around the contents which means you have to then set 'width:100%' to force it back out. The 'header' is 100% wide by default anyway, so you could simplify these two lines by writing the below. Especially if you want your header to be 100% wide.
body { margin:0; padding:0; }
header { margin: 0 0 30px 0; padding: 5px 0 0 0; }
Does this make sense?
ERNESTO ESPARZA
1,312 PointsHello Damien !
You were right !! with this code I solve my issue, I´ve been playing with the values and it make sense to me now, I was mixing body & header values some how and getting crazy results.
I really appreciate your knowledge sharing and support, I understand this basic concepts now !!
Thank a lot !!
Damien Watson
27,419 PointsSweet! No problems, happy to help. :)
Timothy Hooker
15,323 PointsTimothy Hooker
15,323 Pointshard to say without seeing more. just a thought, could be your html....
one trick people do sometimes looks like this
so your closing "greater-than" eliminates spaces inserted by the html which, if there are 12, are evaluated to one space. Again, without seeing more or what your white space is... where it is in relation to the header. It's hard to help.