9 replies [Last post]
monkey_man
Offline
Regular
Last seen: 12 years 2 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Is there anyway you can have dividers in a horizontal menu that has them in between each seperate list itm (

  • )but not on the last one?
  • I currently have a menu that is laid out using:

    #topmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    }

    #topmenu li {
    padding: 0 1.5em 0 1.5em;
    display: inline;
    border-right: 1px dotted #ffffff;
    }

    the menu looks like this:

    Home ¦ News ¦ Services ¦ Contact Us ¦ (divider at the end)

    desired menu:

    Home ¦ News ¦ Services ¦ Contact Us (last divider removed)

    This creates the perfect divider but the first list item has the divider to the right but none to the left which looks exactly as it should do but obviously as this places the divider to the right of each list item, this results in the last list item having a divider on the left (from the preceding list item) and one on the right. To make this look symmetrical i'd need to lose the divider to the right of the last list item.

    Is this possible?

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 2 years 3 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    I would give the last item

    I would give the last item in the menu a class and change the border to 0

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 46 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Simply use a class on the

    Simply use a class on the last item that removes the border rules.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    monkey_man
    Offline
    Regular
    Last seen: 12 years 2 weeks ago
    Joined: 2007-05-16
    Posts: 32
    Points: 0

    Thanks

    Thanks for the advice... I feel so dumb now!

    The hardest part is going to be seperating the list as it is pulled from a database but i guess thats my problem.

    Triumph (not verified)
    Anonymous's picture
    Guru

    monkey_man wrote:The hardest

    monkey_man wrote:
    The hardest part is going to be seperating the list as it is pulled from a database but i guess thats my problem.

    It's probably easier to test for the first list item than the last if you don't know how many there are going to be in the database. Smile

    monkey_man
    Offline
    Regular
    Last seen: 12 years 2 weeks ago
    Joined: 2007-05-16
    Posts: 32
    Points: 0

    not working

    I've added:

    #topmenu li .page_item7 { border-right: none; }

    and the last menu item has a class="page_item7"

    but nothing removes the border??

    monkey_man
    Offline
    Regular
    Last seen: 12 years 2 weeks ago
    Joined: 2007-05-16
    Posts: 32
    Points: 0

    been dumb again

    placed li in the css when i shoouldn't have...

    sorry for wasting peoples time

    jinoturistica
    Offline
    Enthusiast
    Jinotega, Nicaragua
    Last seen: 12 years 39 weeks ago
    Jinotega, Nicaragua
    Timezone: GMT-6
    Joined: 2007-11-16
    Posts: 152
    Points: 0

    There is a reason for those | separators

    There is a reason for those separators. Some screen readers will read out consecutive links as one long string. the | separator causes them to read as separate links. Unfortunately, using borders does NOT satisfy this WCAG criteria as screen readers wouldn't know a border if they saw it.

    When writing your list out from the database do this ...

    dim sep '''your pipe separator initially blank
    sep = ""
    write "

    "

    Just doin' my best at www.jinotega.com
    Tony Robins

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 46 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    However as pertaining to the

    However as pertaining to the use the poster requires them for they are simply adornment and not important other than as a visual cue, the anchors are in a list construct so they fulfill the necessary separation between anchor links WCAG requirement; only if they were anchors inline running into each other does the problem occur.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    jinoturistica
    Offline
    Enthusiast
    Jinotega, Nicaragua
    Last seen: 12 years 39 weeks ago
    Jinotega, Nicaragua
    Timezone: GMT-6
    Joined: 2007-11-16
    Posts: 152
    Points: 0

    logical. accepted. end.

    Smile

    Just doin' my best at www.jinotega.com
    Tony Robins