Need help with a horizontal navigation menu

[capescafe]

I'm working on a general template right now just practicing working with responsive layout techniques. I haven't gotten too far with the layout but I'm having problems with the navigation bar once it gets up to a screen size between 480 and 768px. I think I just haven't fully mastered the floats and positioning with css because I just don't quite understand why it's not working. It will first be a vertical menu on small screens and then move up to a horizontal nav bar that I wanted to have it be 100% of the window and the links be centered within the nav bar. So I'm having a problem the text above and below the nav bar. For some reason the subheading and second level heading are overlapping with the nav bar and I'm not exactly sure why. Normally I'd probably just keep adding margin heights to make it look right but I'd like to do this right and understand why it's doing what it's doing.

Here's the URL where I uploaded my files. http://www.capescafe.com/templates/ Let me know if you need me to paste any code in here. Actually it looks like the top heading may be overlapping the navigation a little bit on the desktop layout also.

[sdleihssirhc]

The overlapping on the bottom is caused by your navigation's <li> and <a> elements being inline, combined with the top/bottom padding the <a>'s have. The quickest fix is to set them to "display:inline-block" rather than "inline", but you may have to mess with it.

The overlapping on top is beyond my expertise; I think it's caused by the line-height being exactly the same as the font-size (so the lower-hanging bits "descenders" on the letters stick out a little). But now we're getting into "inline formatting model" territory, which I don't understand a whole lot (as I recently demonstrated).

Off Topic:


I really like the way you did those banners along the bottom, indicating the sizes...

[capescafe]

The overlapping on the bottom is caused by your navigation's <li> and <a> elements being inline, combined with the top/bottom padding the <a>'s have. The quickest fix is to set them to "display:inline-block" rather than "inline", but you may have to mess with it.

The overlapping on top is beyond my expertise; I think it's caused by the line-height being exactly the same as the font-size (so the lower-hanging bits "descenders" on the letters stick out a little). But now we're getting into "inline formatting model" territory, which I don't understand a whole lot (as I recently demonstrated).

Ok I'll have to check that out then. So why inline-block and not just display: block? I guess I'll have to look up inline-block to read more about that one. I've always used either inline or block. Never thought about the line-height. I haven't finished formatting the other elements yet but I wanted to get the navigation right first. But maybe once I fix line-height that'll fix it.

Off Topic:


I really like the way you did those banners along the bottom, indicating the sizes...

Yeah I got that from a tutorial by David Cochran at Web Design Tuts+ http://webdesign.tutsplus.com/tutori...uery-reporter/. Super helpful when designing for responsive layouts.

[ralph.m]

The overlapping on top is beyond my expertise; I think it's caused by the line-height being exactly the same as the font-size

Yes, that's it. Line height ought to be bigger than that.

So why inline-block and not just display: block?

display:block will make them sit on top of each other.

[capescafe]

Awesome! it worked. Thanks very much to @sdleihssirhc and @ralph.m. Increased the line-height and changed it to inline-block.