Can you help me with my navigation bar?

[Hulbert Lee]

Hi, I'm currently trying to make my navigation bar fully appear on one line for all browsers: http://howtofocusbetter.com/

The only problem is that in Firefox, there's some white space at the end, and if push it any further, then it looks good in Firefox... but overflows to the next line in Chrome. What I want to do is to push the navigation bar further to the right, without it overflowing to the next line.

Do you know how I can do this?

Some clues that I've gotten so far are:

• overflow:hidden
• white-space

No idea what these mean though... Any help would be appreciated. Thanks in advance.

[ralph.m]

Hi Hulbert. Welcome to SitePoint.

In a situation like this, it might be better to give the UL overflow: hidden; and put the green background color on the UL. That way, that color will span the whole width of the page without gaps. Then just reduce or remove the left/right padding on the LIs until the links don't drop in any browser. The reason for overflow: hidden is that it causes the UL (the container) to wrap around its floated children (the LIs). (By default, floated items hang out of their container.)

Another option—since this is a fixed width design—is to give each individual LI a set width that just fits the design, in which case you'd remove the left/right padding on the LIs and on the <a>s.

Hope that helps.

[Hulbert Lee]

Hi Ralph, wow... first of all, you have quite a few posts here... congrats! Thanks for your reply and help.

Secondly, to tell you the truth, um... I'm having a little bit of trouble understanding what you just said. I'm really an amateur when it comes to the CSS language, but I'll try to comprehend this as we proceed. First I have a few questions:

What does UL mean? How is it different from LI? And how would I go about making "the UL overflow: hidden" and putting "the green background color on the UL"?

[dresden_phoenix]

Overflow has many uses. However what ralph referring to is its ability to clear floats.

You see floated items do not EXPAND their parent elements. In other words, since you floated all the LIs, the UL essentially think it's empty and collapses to height of 0 ( essentially). The best method to prevent this is to give the UL overflow:hidden; and set its background color to match. At this point the UL will "see" the elements inside itself and adjust its height accordingly.

Of course, your meny wull still wrap into two lines, but this is simply because the content is just too wide. But at you wont have that awkward "L".

I DONT recommend this. But you could , instead of floating the LI's give them display:inline-block; (aside from older browser compatibility issues) , the LI will behave just like floats , but you wont need the overflow:hidden;. Still the element's will wrap down, just like the float. One way to fix that is to give UL {white-space:nowrap;} . Just as the name implies, "nowrap" line keeps LI's from wrapping around wen the edge of the container is reached. This meas the LI will extend beyond the width of your page as needed w/o wrapping. I dont think this is what you want... having main menu buttons go past the right edge of the page shell??? If you THEN added overflow:hidden; to the UL the part of the LI that overflows the UL would be cropped of and invisible .. which would keep things nice and tidy but also would mean that those LI items would not be visible to visitors, which is bad.

[Hulbert Lee]

Hi Dresdon, it seems like what you have said is somewhat risky...

I went to another forum and someone said that the reason it wasn't working was because I was running into a box model problem. He suggested changing the padding and margins to 0, and then going up from there trying to use ems or percentages instead of pixels. He didn't specify how to do this though? Can you help me with this?

[Paul O'B]

Hi Dresdon, it seems like what you have said is somewhat risky...

I went to another forum and someone said that the reason it wasn't working was because I was running into a box model problem. He suggested changing the padding and margins to 0, and then going up from there trying to use ems or percentages instead of pixels. He didn't specify how to do this though? Can you help me with this?

That's nonsense I'm afraid and won't help you. You have been given the correct answers above.

1) This is what Ralph mentioned.

#navigation{
float:none;
overflow:hidden;
width:100%;
}
.nav{
background-color: #003D52;
overflow:hidden;
width:100%;
}
#navigation .nav li.page-item-575{
float:right;
padding:0;
}

The div holding the ul and list element is changing from floating to non floated so that it stretches to 100% width automatically and the overflow:hidden is added to clear the child floats. The background colour is then put on the ul so that it fills in any gaps left by the list elements. The last list element is then floated right and the padding from the list removed so that it sits flush and allows a little more space for browsers differences.

You cannot make a number of items fit exactly across the screen by using the content (text) + padding. Browsers render text widths at different sizes and with rounding issues also coming into play there could be differences of up to 25px along the length of a line so that approach will never work.

2) A better approach would be not to float the last list item, remove horizontal padding from the list and anchor and then set the last list item to overflow:hidden and it will automatically fill the rest of the space and allows a greater soak up for browser text width differences.

Here is the code to add to do that. (this is mutually exclusive to the other code I gave you so use one or the other and not both).

#navigation{
float:none;
overflow:hidden;
width:100%;
}

#navigation .nav li.page-item-575{
float:none;
overflow:hidden;
padding-right:0;
padding-left:0;
text-align:center;
}
#navigation .nav li.page-item-575 a{
padding-right:0;
padding-left:0;
}

Just add that code after the existing styles in your css.

3) A third and more convoluted approach would be to set the width exactly for each item in pixels so that they add up to the total width. You wouldn't need horizontal padding as you could just set text-align:center on each element. This has the benefit that text size can be increased quite a bit before before the nav breaks as there is room in each list item to expand without impact on anything else.

Number 2 is my recommended approach but be aware that users with larger font sizes or when the browser's text size is resized will see your text wrap to the next line and break the layout.

[deathshadow60]

You're also using dynamic fonts in a fixed width layout -- which is just ASKING for the layout to... well...
http://www.cutcodedown.com/for_other...brokenMenu.jpg

If you're going to make fixed width containers you're restricting yourself to using fixed metric fonts (px), and even then it's probably going to break somewhere.

Of course the massive mess of HTML is really fighting you on this -- admittedly 99% of that is wordpress' fault, but I'd suggest looking up the ways to neuter wordpress's menu code into something SANE before even TRYING to tackle the layout.... with all the inlined presentation, endless classes, DIV and P for nothing, outdated nonsense like class="clear", improper/nonsensical heading orders -- it's not exactly shocking you're ending up with 16k of markup for 441 BYTES of plaintext -- so easily three or four times as much HTML as should be used for such a page. Hardly a surprise at that point you'd be having trouble styling something as simple as a menu... since it's 1k of markup doing 400 bytes job with all the redundant/pointless title attributes, pointless classes, div around it for nothing, absolute URL's... Often leaves me asking "how the devil do people work with this mess".

Now I'm not saying the coders of wordpress are inept at HTML... oh wait, no, that's EXACTLY what I'm saying -- then they use the excuse of all the extra stuff making it EASIER for less experienced developers to work with?

[Hulbert Lee]

Hey everyone, I got the issue fixed. Thanks for all your help!