Bloated Code for Navigation Bar

[BTC]

#nav, #nav ul{
width:100%;
margin:0; padding:0;
list-style-type:none; list-style-position:outside;
position:relative;
line-height:25px;
z-index:30;
}

#nav a{
width:117px;
margin-right:2px;
display:block;
font:bold 10px Verdana, Geneva, sans-serif; text-decoration:none;
background:#000; color:#A0A0A0;
font-size:10px; text-decoration:none;
line-height:25px;
}

#nav a:hover{background:#404040; color:#FFF}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:110px;
top:25px; left:5px;
}

#nav li ul a {
padding-left:10px;
width:120px; height:auto;
float:left;
text-align:left;
line-height:25px;
z-index:30;
background:#C8C8C8; color:#000;
}

#nav ul ul {
top:auto;
}	

#nav li ul ul {
left:110px;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block}

I currently have this code for the navigation bar on my site and I feel that it is very bloated for a simple navigation bar. I took this code from another site and change it for my needs. I am by no means a master of CSS and I don't really know how to make this code much simpler, but I feel that the same effect could be created with much less code.

Am I just thinking too much or can this be coded better and simpler?

[Paul O'B]

Hi,

As you don't have multiple nested menus you can lose the extra hover rules as there is nothing for them to target.

You may be interested in Jasons menu in this thread which shows a neat way of creating dropdown menus.

Roughly your css would look like this:

#nav, #nav ul {
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    line-height:25px;
    z-index:30;
}
#nav li,#nav li a {
    float:left;
    position:relative;
    height:25px;
    width:117px;
    overflow:hidden;
    font:bold 10px/25px Verdana, Geneva, sans-serif;
    background:#000;
    color:#A0A0A0;
    text-decoration:none;
}
#nav li{margin:0 2px 0 0}
#nav a:hover,#nav li:hover a,#nav li:hover li a:hover {
    background:#404040;
    color:#FFF
}
#nav li:hover li a {
    background:#C8C8C8;
    color:#000;
    text-indent:10px;
    text-align:left;
}
#nav ul {
    position:absolute;    
    width:100%;
    top:25px;
    left:0;
}
#nav li:hover {overflow:visible}

Although I'd be a little concerned with the 10px fonts as they are a little small.

You should also remove this nonsense from the html as it is invalid and unnecessary as far as I can see.

<li><a href="contact_us.html">CONTACT US</a></li>
                    <!--[if IE]><br style="display:none" /><![endif]-->
                    <!--[if !IE]><!--><li><br /></li><!--<![endif]-->
                    <li><a href="#">ABOUT US</a>

You can't put a break between closing and opening list tags and there's no need for it as you can clear the other elements if needed as long as your top menu items are the same height.

I also notice that you have an IE only stylesheet that contains many unneeded rules. You should only have the differences in the IE stylesheet and indeed you probably only needed to give them to ie6 rather than all IE. I would hazard a guess that nearly all could be removed with a little more care in the coding.

Hope that's a start

[BTC]

Hi,

As you don't have multiple nested menus you can lose the extra hover rules as there is nothing for them to target.

You may be interested in Jasons menu in this thread which shows a neat way of creating dropdown menus.

Roughly your css would look like this:

#nav, #nav ul {
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    line-height:25px;
    z-index:30;
}
#nav li,#nav li a {
    float:left;
    position:relative;
    height:25px;
    width:117px;
    overflow:hidden;
    font:bold 10px/25px Verdana, Geneva, sans-serif;
    background:#000;
    color:#A0A0A0;
    text-decoration:none;
}
#nav li{margin:0 2px 0 0}
#nav a:hover,#nav li:hover a,#nav li:hover li a:hover {
    background:#404040;
    color:#FFF
}
#nav li:hover li a {
    background:#C8C8C8;
    color:#000;
    text-indent:10px;
    text-align:left;
}
#nav ul {
    position:absolute;    
    width:100%;
    top:25px;
    left:0;
}
#nav li:hover {overflow:visible}

Although I'd be a little concerned with the 10px fonts as they are a little small.

You should also remove this nonsense from the html as it is invalid and unnecessary as far as I can see.

<li><a href="contact_us.html">CONTACT US</a></li>
                    <!--[if IE]><br style="display:none" /><![endif]-->
                    <!--[if !IE]><!--><li><br /></li><!--<![endif]-->
                    <li><a href="#">ABOUT US</a>

You can't put a break between closing and opening list tags and there's no need for it as you can clear the other elements if needed as long as your top menu items are the same height.

I also notice that you have an IE only stylesheet that contains many unneeded rules. You should only have the differences in the IE stylesheet and indeed you probably only needed to give them to ie6 rather than all IE. I would hazard a guess that nearly all could be removed with a little more care in the coding.

Hope that's a start

Thank you Paul for your advice. I'm sure you can tell that I am still new at this and my code is very sloppy.

I have one question about the font size. Is there anyway I can increase the font size without having to widen the entire webpage layout?

[BTC]

Paul,

I plugged in the code that you gave me and this is what I got: link

The bars are not aligning? Did I do something wrong?

[Paul O'B]

Did you remove the "nonsense" from the html that I pointed out earlier

<!--[if IE]><br style="display:none" /><![endif]--><!--[if !IE]><!--><li><br /></li><!--<![endif]-->

You can increase the font-size in the menu a couple of px without changing anything at the moment. (Or you could use percentage so that IE users can scale the text also.)

[BTC]

Did you remove the "nonsense" from the html that I pointed out earlier

<!--[if IE]><br style="display:none" /><![endif]--><!--[if !IE]><!--><li><br /></li><!--<![endif]-->

You can increase the font-size in the menu a couple of px without changing anything at the moment. (Or you could use percentage so that IE users can scale the text also.)

Paul I got rid of those "if statements" and that fixed it, thank you!

I have another question, how can I increase the font size when the "tips & techniques" is right at the edge? I increased the font size to 12px and that bar only showed, "tip &", with techniques being left out.

[Paul O'B]

Why don't you move your google search up to the blank space in the top right and then the menu can span two whole lines with a lot more room to increase the text size.

Trying to squeeze text content into small spaces never works so always allow room to breathe. A webpage isn't a piece of paper that you can fill with little drawings but a living thing that needs room to breathe and grow. You are trying to squeeze content into your design rather than letting the content dicate the design.

[BTC]

Why don't you move your google search up to the blank space in the top right and then the menu can span two whole lines with a lot more room to increase the text size.

Trying to squeeze text content into small spaces never works so always allow room to breathe. A webpage isn't a piece of paper that you can fill with little drawings but a living thing that needs room to breathe and grow. You are trying to squeeze content into your design rather than letting the content dicate the design.

Paul,

That's a very good analogy. I agree with you concerning the design. I am going to move the search form up and expand the navigation bar.

I'm sorry I have another question. What is the difference between using "%" on your font statements and using "px" or "em"?

And I see a lot of coders using this form to declare the font size: "85%/150%"

How are the two numbers different than just saying "85%"? What does the first number (85%) do differently than the second (150%)?

Once again, thanks Paul for your help!

[Paul O'B]

I'm sorry I have another question. What is the difference between using "%" on your font statements and using "px" or "em"?

% and em are basically the same when referring to font-size.

1 em = 100% and .5em = 50%. etc.

They refer to the font-size of the parent (whatever that may be). If you set a font to be .75em then it will be three quarters the size of it's parent.

The beauty of ems/% is that you don't need to know what px it equates to as you are creating a relationship between fonts based on the base font-size of the parent.

If the user has set their page to be a default 24px then a font specified as .75em would equal 18px (which is three quarters of 24px and assuming the parent is still the body and not a parent div with a smaller font-size because the font size will compound as it is based on its own parent).

On the other hand if someone has set the base font-size to 13px then .75em will equal 9.75px (but will be rounded up to 10px in most browsers).

The drawback of ems is that they aren't pixel perfect and you get slight rounding issues.

And I see a lot of coders using this form to declare the font size: "85%/150%"

That is just a shorthand way of stating font-size/line -height in one go. the first is the font-size and the latter is the line-height which will be based on the font-size you just set. Font shorthand is very specific so read the link above as you have to provide minimum values and as wilt all shorthand any omitted values are set to their defaults.

[BTC]

% and em are basically the same when referring to font-size.

1 em = 100% and .5em = 50%. etc.

They refer to the font-size of the parent (whatever that may be). If you set a font to be .75em then it will be three quarters the size of it's parent.

The beauty of ems/% is that you don't need to know what px it equates to as you are creating a relationship between fonts based on the base font-size of the parent.

If the user has set their page to be a default 24px then a font specified as .75em would equal 18px (which is three quarters of 24px and assuming the parent is still the body and not a parent div with a smaller font-size because the font size will compound as it is based on its own parent).

On the other hand if someone has set the base font-size to 13px then .75em will equal 9.75px (but will be rounded up to 10px in most browsers).

The drawback of ems is that they aren't pixel perfect and you get slight rounding issues.

That is just a shorthand way of stating font-size/line -height in one go. the first is the font-size and the latter is the line-height which will be based on the font-size you just set. Font shorthand is very specific so read the link above as you have to provide minimum values and as wilt all shorthand any omitted values are set to their defaults.

Paul,

This is great information, thank you very much! I am going to bookmark this thread.

One more question,

In the navigation menu code, why does the line height have to be stated in "nav, #nav ul" and again in "#nav li,#nav li a"? Wouldn't the children inherit the parent value?

#nav, #nav ul {
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    line-height:25px;
    z-index:30;
}
#nav li,#nav li a {
    float:left;
    position:relative;
    height:25px;
    width:117px;
    overflow:hidden;
    font:bold 10px/25px Verdana, Geneva, sans-serif;
    background:#000;
    color:#A0A0A0;
    text-decoration:none;
}

[Paul O'B]

In the navigation menu code, why does the line height have to be stated in "nav, #nav ul" and again in "#nav li,#nav li a"? Wouldn't the children inherit the parent value?

#nav, #nav ul {
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    line-height:25px;
    z-index:30;
}

Yes you should be able to remove that line-height without ill effect (or from the children instead). (It all depends if there are specificity issues or not as that will over-rule the inheritance.)

The best way to check something is to "try it and see". Sometimes browsers do odd things so just keep your eyes open.

[BTC]

Paul,

I moved the search form at the top near the banner and expanded the navigation bar across the page.

I don't know what happened to subcategories? I didn't see that black background when I was observing the page locally in Firefox.

I cant get the navigation bar to center. I tried "margin: 0 auto;" "text-align:center" and decreasing "width:100%" to "width:95%". I just cant get it to work?

And I cant get the search form to align at the top right of the page? I tried using the clear and it keeps going under the banner image. I set "top:0px; right:0px" and that did nothing?

Here is the link

[Paul O'B]

Hi,

The search bar isn't positioned so co-ordinates will do nothing. Add position:absolute and remove the float and then add a stacking context to the parent with position:relative so that the absolute element has a current context rather than being based from the viewport.

e.g.

#pageWrapper {
    position:relative;
}
#mainBanner .right {
    position:absolute;
    z-index:99;
    top:10px;/* adjust to suit*/
    right:120px;/* adjust to suit*/
    width:130px;
    margin:0;
}

The black background is the background of the list showing through because you have changed the size of the anchor so it no longer matches the width of the list element.

Either Remove the background:

#nav li {background:transparent}

Or you can resize it like this

#nav li ul a {
  background: none repeat scroll 0 0 #C8C8C8;
  color: #000000;
  float: left;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  text-align: left;
  width:140px;
  z-index: 30;
}

To center the nav just do it by hand because its floated and acan't be done automatically without changing a few things around. Just remove the width and nudge it into position.

#nav {width:auto;margin:0 0 0 10px}/* adjust to suit*/

Why is there a wrapper around your page that does nothing?

<div id="center">

...

It has no styles applied so remove it. You already have a pagewrapper. (You also have a div around the menu when you didn't really need one - it looks like most of mainmenu rules are not needed including the border.)

Don't use the center tag as it is deprecated in strict and you should use css instead.

[BTC]

Hi,

The search bar isn't positioned so co-ordinates will do nothing. Add position:absolute and remove the float and then add a stacking context to the parent with position:relative so that the absolute element has a current context rather than being based from the viewport.

e.g.

#pageWrapper {
    position:relative;
}
#mainBanner .right {
    position:absolute;
    z-index:99;
    top:10px;/* adjust to suit*/
    right:120px;/* adjust to suit*/
    width:130px;
    margin:0;
}

The black background is the background of the list showing through because you have changed the size of the anchor so it no longer matches the width of the list element.

Either Remove the background:

#nav li {background:transparent}

Or you can resize it like this

#nav li ul a {
  background: none repeat scroll 0 0 #C8C8C8;
  color: #000000;
  float: left;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  text-align: left;
  width:140px;
  z-index: 30;
}

To center the nav just do it by hand because its floated and acan't be done automatically without changing a few things around. Just remove the width and nudge it into position.

#nav {width:auto;margin:0 0 0 10px}/* adjust to suit*/

Why is there a wrapper around your page that does nothing?

<div id="center">

...

It has no styles applied so remove it. You already have a pagewrapper. (You also have a div around the menu when you didn't really need one - it looks like most of mainmenu rules are not needed including the border.)

Don't use the center tag as it is deprecated in strict and you should use css instead.

Thanks Paul for your help, I really appreciate it!

I got everything to work except the navigation bar centering. I am going to mess around with the code and change the css template and than I will see if everything works.