I don't seem to be able to cleanly add a border to the items in the primary links menu.
I want to get the effect of a vertical bar that divides the menu items, using a border-right: CSS rule.
However, because of the height set on the navbar, the border looks too short.
Setting a height on the LI doesn't work because they're inline, rather than floats (as I think they were previously).

Is there anything you can suggest?

Comments

joachim’s picture

joachim commented

Got it sussed :)

Set the LI to float:left, and the A to display:block so they fill up the space and :hover and .active looks right.
Also, I think I was getting tripped up by the presence of the navigation anchor point.

You might want to add a note to the comments of the docs warning to be careful of styling #navbar a -- use #navbar #primary a to be sure not to catch the anchor point by mistake.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented

Joachim, which browser are you using?

I’ve had other reports of CSS styles for a being applied to <a name="top"></a> and <a name="navigation" id="navigation"></a>, but I haven’t experienced it, so I want to get the comment correct when I document it.

I was thinking of adding:

  #navigation
  {
    position: absolute; /* Take the named anchors out of the doc flow   */
    left: -10000px;       /* to prevent any anchor styles from appearing. */
  }

But I’d like to test it.

joachim’s picture

joachim commented

I'm using Firefox 2.

What really threw me is that if I set a float on the A, I get the first link on one line, followed by the remaining links on the next, and that happens even when I make sure not to catch the anchor:

  #navbar #primary a {    
    float: left;
    background: #ddffff;
  }

I've figured it out.
The first floated A gets taken out of the row of inline LIs and put to the left of them. The next As all have to go beneath the LIs. The reason is that the LIs have PADDING -- set in various places. This means they take up space even though with the As floated out they are completely empty elements. If you set a background-color on the LIs you can see it.
Kill the padding and it's fine -- it's new to this version of Zen and Drupal's system.css seems to be adding it too, which as far as I can tell it didn't before.

And actually -- now I try it out, setting a display:block that catches the anchor is ok. The following works fine on Firefox and IE6:

  #navbar a {
    color: white; 
    font-weight:bold;
    text-decoration: none;
    
    line-height: 1.75em;
    display: block;
    padding: 0 1em;
    
    border-right: 1px solid #6191C5;
    }

For reference, then, this is what I have for block-type links with highlighting:

  #navbar #primary li {    
    float: left;
    padding:0;
    
  }
  #navbar #primary a {
    color: white; 
    font-weight:bold;
    text-decoration: none;
    
    line-height: 1.75em; /* set the height of #navbar and the related content margin in the layout.css to match this */
    display: block;
    padding: 0 1em;
    
    border-right: 1px solid #6191C5;
    }
  #navbar #primary li.first a {   
    border-left: 1px solid #6191C5;
    margin-left: 1em;
  }
  
  #navbar #primary a.active {
    background: #69B1FF;
    color: white;
    }
  #navbar #primary a:hover {
    background: #69B1FF;
    color: #5C0082;
    }

Feel free to include that in docs if you like :)

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Title: adding a border to primary menu elements? » change inline styling method for navbar links from inline to float
Category: support » feature
Status: Active » Fixed

I changed the default inline method for navbar links to:

  #navbar li /* A simple method to get navbar links to appear in one line. */
  {
    float: left;
    padding: 0 10px 0 0;
  }

  /* There are many methods to get navbar links to appear in one line.
   * Here's an alternate method: */
  /*
  #navbar li
  {
    display: inline;
    padding: 0 10px 0 0;
  }
  */
catch’s picture

catch
he/him
Primary language English
commented

Just a quick note that display: inline on list items has inconsistent behaviour between FF and IE - I haven't yet run up against this with navigation, but when I made the "who's online" block into a comma separated list via css, IE fails on both :after and wrapping. I'd imagine with a large number of primary links it'd do the same thing.

I dealt with this for myself by overriding theme_item_list to insert newlines after each </li> (now a handbook page, although I'm not sure it really deserves one): http://drupal.org/node/199861

Doesn't help with the specific bug here, but since I saw this issue I thought it'd be worth mentioning.

Anonymous’s picture

Anonymous (not verified) commented
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.