SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal nav placement issue

    Hi all,

    I'm having a bit of a spot with my horizontal nav. When you bump up the font size of the browser, you'll see that the nav will slide out of place.

    I tried giving it a AP (with a RP on the wrapper to establish a new containing block) but no luck. What are my tired eyes and over cooked brain missing?

    page
    css
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    One thing you can do is change the navcontainer top margin to px instead of em.

    Code:
    #navcontainer {
    margin-top:128px;
    }
    But a better thing to do is create a separate header div, outside the wrapper, and have the background image on the header repeating, so that it can increase in size vertically.

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    One thing you can do is change the navcontainer top margin to px instead of em.

    Code:
    #navcontainer {
    margin-top:128px;
    }
    But a better thing to do is create a separate header div, outside the wrapper, and have the background image on the header repeating, so that it can increase in size vertically.
    Hi Ralph,

    px are no option being the whole page liquid. The other solution seems indeed better .. gonna give it a try 2morrow
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To align the flexible height nav with the background bottom when font-size changes, you want the nav bottom to stay at a set pixel length from top and not allow it to grow/shrink its height downwards.

    The background height is 152px. The nav height is the total of current line-height plus padding and bottom border.

    To place nav-bottom at the 152px length from page-top: Give the navcontainer a top margin of that length reduced by its thickness of padding and bottom border. Then pull the nav list up by its line-height. Also give the links an inline-block display to get the padding applied and for cross-browser consistency also set a line-height value.
    Code:
    #navcontainer {
    /*	margin-top : 8em; */
    	margin-top :149px;
    	line-height :1.2em;
    }
    #navcontainer ul {
    	margin-top :-1.2em;
       white-space : nowrap;
    }
    #navcontainer ul li a {
       background : #c2c2e0;
       padding : 1px 1.875em 1px 1.875em;
       color : #484500;
       text-decoration : none;
       border-bottom : 1px solid #565656;
       border-right : 1px solid #565656;
       position : relative;
    	display :inline-block;
    }

    Edit)
    But I think Ralph gave you the best fitted solution here.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works like a charm Erik. It's a direction i hadn't considered ... i kept wrecking my brain over using relative measures instead of px to place the nav bottom

    Still haven't tried Ralph's solution but it's always nice to have some alternatives
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •