Skip navigation
steve0308
steve0308 Calculating status...
Currently Being Moderated

Help with dividers on menu items

Jun 19, 2012 11:54 AM

Hi, and thank you in advance to anyone who can help me with the following …

 

I have a very simple menu bar that consists of four menu items, each separated by a black divider to the right of each item.  The problem is I’d like to get rid of the last divider only.  I’ve read to add a class to the last item and then remove the right divider that way, but I can’t seem to make that work.

 

Here’s an example of what I mean …

 

Link 1 | Link 2 | Link 3 | Link 4 |

It’s the divider after Link 4 that I’d like to get rid of.

 

My CSS looks like this

 

#navMenu li  {

                position: relative;

                margin: 0px;

                float: left;

                list-style-type: none;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 0px;

                padding-left: 0px;

                border-right-width: 1px;

                border-right-style: solid;

                border-right-color: #000000;

}

 

Thank you.

607 Views   8 Replies   Latest reply: Ben Pleysier, Jun 19, 2012 5:33 PM
 
Replies
  • John Waller
    Currently Being Moderated
    1. John Waller,
    Jun 19, 2012 12:23 PM   in reply to steve0308
    Report

    Add a class to the last menu item only (to act as a hook for the CSS):

     

    <li class="last">

     

    Then create a new CSS rule for that li only

     

    #navMenu li.last {

    position: relative;

    margin: 0px;

    float: left;

    list-style-type: none;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 0px;

    border-right: none;

    }

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Jun 19, 2012 1:43 PM   in reply to steve0308
    Report

    You can also do this quite nicely with the CSS nth-last-child pseudo-selector.  No HTML required.

     

    #navMenu li  {

    position: relative;

    margin: 0;

    padding:0;

    float: left;

    list-style-type: none;

    border-right: 1px solid  #000;

    }

     

    /**no border on last list item**/

    #navMenu li:nth-last-child(1) {

    border-right:none;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • steve0308
    Currently Being Moderated
    3. steve0308,
    Jun 19, 2012 1:52 PM   in reply to John Waller
    Report

    Thanks' for your help, I've read about doing that in the past, however your explanation of it worked.

     

    Thanks' again.

     
    |
    Mark as:
  • steve0308
    Currently Being Moderated
    4. steve0308,
    Jun 19, 2012 1:56 PM   in reply to steve0308
    Report

    Thank you Nancy, I'll give that a try on another page, my head is still spinning from the last explanation (which I did get to work)

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    5. John Waller,
    Jun 19, 2012 2:12 PM   in reply to Nancy O.
    Report

    Agreed.

     

    Just doesn't work in IE8 or earlier.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Jun 19, 2012 2:29 PM   in reply to John Waller
    Report
    Just doesn't work in IE8 or earlier.

    When it comes to eye candy, I honestly don't care about the inferior browsers anymore. 

    Nth-child is very handy.  I use it quite a bit except where it might cause real problems in inferior browsers.

     

     

    Nancy O.

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    7. John Waller,
    Jun 19, 2012 3:02 PM   in reply to Nancy O.
    Report

    I agree.

     

    It's a factor for some people on some projects.

     

    Not a factor for me or you.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    8. Ben Pleysier,
    Jun 19, 2012 5:33 PM   in reply to Nancy O.
    Report

    Nancy O. wrote:

    When it comes to eye candy, I honestly don't care about the inferior browsers anymore. 

    This is the real Nancy!!!

     

    Gramps

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points