Horizontal nav placement issue

HTML & CSS
1

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

2

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 :slight_smile:

Still haven’t tried Ralph’s solution but it’s always nice to have some alternatives :smiley:

3

One thing you can do is change the navcontainer top margin to px instead of em.

#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.

4

Hi Ralph,

px are no option being the whole page liquid. The other solution seems indeed better … gonna give it a try 2morrow :slight_smile:

5

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.


#navcontainer {
[COLOR="Red"]/*[/COLOR]	margin-top : 8em; [COLOR="Red"]*/
	margin-top :149px;
	line-height :1.2em;[/COLOR]
}
#navcontainer ul {
[COLOR="Red"]	margin-top :-1.2em;[/COLOR]
   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;
[COLOR="Red"]	display :inline-block;[/COLOR]
}

Edit)
But I think Ralph gave you the best fitted solution here. :slight_smile: