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

CSS

Posted by Adam Akers
Adam Akers
7,357 Points

nav ignores bottom-margin: 0;

So I found this site I'm trying to emulate for practice. It didnt seem too complicated at the time, which is why I chose it, but I am struggling with the navigation part of the page. The page is here: http://maban.co.uk/

My biggest struggles right now is that the nav elements I select are ignoring bottom-margin:0; even if I declare them as block level elements.

The other struggle is getting the nav buttons to extend the whole height of the header.

code here: http://codepen.io/MrAdam/pen/KwrpmP

1 Answer

Tim Knight
Tim Knight
28,888 Points

Adam,

I've forked your codepen and made some adjustments. The site you're using as an example actually uses a list for the navigation and the height is determined by the padding on the top of navigation blocks. Take a look at my version and see if that helps you.

http://codepen.io/timknight/pen/VYVLNG?editors=110

Adam Akers
Adam Akers
7,357 Points

Wow.... I have no idea what I was thinking! Cant believe I didn't set that as an unordered list and used paragraph tags instead haha.

I will give this another crack, with the proper elements!

Thanks Tim! I appreciate the help!

edit: im terrible with treehouse formatting...

Adam Akers
Adam Akers
7,357 Points

So just another question...

You were able to remove the whitespace above just by using 

body {margin:0}

is this a better way to solve the whitespace issue than setting a padding in the header like what Guil suggests in the Layout course?

I've been trying to use margin: 0 to clear that whitespace on my own, but for some reason cant get it to work. Is there some other tricks I have to apply to get this to work?

Tim Knight
Tim Knight
28,888 Points

Adam,

The important thing to know is there will always be more than one way to accomplish something. Setting the body to have a 0 margin is a way to "reset your baseline". That allows you to get an element to the edge of the window. This is the case because the body has a default margin of about 8px. From here you'd likely create a container in your body that would control the margins that you wanted instead of depending on the body's default. If you look at a browser reset like normalize.css you'll see on line 19-21 that they reset the body this way.

Another option is that you could absolutely position your header at the top using something like:

.main-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

But than you'd have to put a top margin on the body element so it would start below this header, you'd have to also assign a height to the .main-header, and do all sorts of other things if you wanted it to work appropriately for a responsive interface... so I tend to find it much more appealing to just reset the body's margin.

I'm not sure about Guil's suggestion as I'm not clear on the specifics of his suggestion, but I imagine that he's speaking to a particular context or problem within the video.