Results 1 to 2 of 2

Thread: [RESOLVED] Horizontal Menu Bar Help

  1. #1

    Thread Starter
    Fanatic Member clarkgriswald's Avatar
    Join Date
    Feb 2000
    Location
    USA
    Posts
    743

    Resolved [RESOLVED] Horizontal Menu Bar Help

    I am trying to make a horizontal toggle bar with rounded edges. I am not sure if there is a specific name for the component or not, but it's basically a bar that contains 2 or more items and is usually used to toggle the view mode or sorting element on a page.

    Here is the jsfiddle I am using: https://www.w3schools.com/css/tryit....l_black_active


    I updated the ul style to:

    Code:
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    and the li a style to:
    Code:
    color: #000;
    I can't seem to figure out if there is a way to have the border of the ul element appear seamlessly with the active li element. What I mean is, if you look at the active item, you can see "gap" between ul border and the li element. It is not really a gap per se, as the border is actually visible, but because the active li color is different, it gives the illusion that the active item isn't the same height.

    The border on the ul element makes it cleaner as I don't have to handle border styling on the individual elements, but at the same time, it creates this issue that I am presenting here. Any help would be appreciated. Hopefully I explained this well.

  2. #2

    Thread Starter
    Fanatic Member clarkgriswald's Avatar
    Join Date
    Feb 2000
    Location
    USA
    Posts
    743

    Re: Horizontal Menu Bar Help

    I think I got it..

    box-shadow: inset 0px 0px 0px 1px #ccc;
    box-sizing: border-box;

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width