SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need help with a horizontal navigation menu

    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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...
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    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.

    Quote Originally Posted by capescafe View Post
    So why inline-block and not just display: block?
    display:block will make them sit on top of each other.

  5. #5
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Awesome! it worked. Thanks very much to @sdleihssirhc and @ralph.m. Increased the line-height and changed it to inline-block.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •