Add vertical separator between menu elements

  • Graphener

    #5145

    Hi,

    Could somebody tell me how to separate menu elements by a grey vertical-centered line ?

    I tried with the following code but when I highlight the menu, there is space between the separator and the highlighted background:

    #header-menu > li {
    border-right-color: grey;
    border-right-width: 0.5px;
    border-right-height:1px;
    border-right-style: solid;
    }

    Any better code?

    Thank you in advance

    ronangelo

    #30856

    Try this

    #header-menu > li {
    border-right: 0.5px solid grey;
    margin: 0;
    }
    Mod

    Kenneth John Odle

    #30857

    Thank you. This is what I need to do on one of my blogs.

    You can combine that code for a border into a single declaration. Also, there is no “border-height” property.

    The extra space you mention is coming from a margin attached to each <li>. You can clear it by setting it to 0px.

    Something like this:

    #header-menu li {
    border-right: solid 1px #999999;
    margin-left: 0px;
    }

    Graphener

    #30858

    Thanks for you both, but I don’t see any difference between my code and the yours; I still have a space between the separator line and the background!

    Also, the separator touches the up and down line!

    I’d like that the separator line doesn’t touch the upper and bottom borders, but to fits only in a medium position, like in the menu in the following websites:

    http://www.dailymail.co.uk/home/index.html

    or this one:

    http://www.economist.com/

    On this last one, you will see that there is a background and no space between the separator and the highlighted background.

    In my case, there is a space! I would like not to have it in the menu!

    PS: I used the height line to shorten the separator length, but this didn’t work, the line still touching both upper and bottom borders!

    Regards,

    Mod

    Kenneth John Odle

    #30859
    Quote:
    I don’t see any difference between my code and the yours

    Look again. We added margin:0 to eliminate the space.

    Quote:
    I used the height line to shorten the separator length

    As I stated, there is no border-height property.

    Graphener

    #30860

    I’m describing what I see. The space is still there, even with “margin:0” code!

    If there is no “border-height” property, what we can use to reduce the length of separator? How to make it shorter, as in the links above?

    ronangelo

    #30861

    Try this…

    #header-menu li {
    margin: 0 !important;
    }

    #header-menu li a {
    border-right: 0.5px solid #999;
    margin: 6px 0;
    }

    Graphener

    #30862

    Thanks but it doesn’t work at all!

    Did you try it and worked for you?

    It doesn’t for me!

    I noticed that values less than 1px are not considered!

    Mod

    Kenneth John Odle

    #30863
    Quote:
    I noticed that values less than 1px are not considered!

    A pixel is, by definition, the smallest unit a screen or monitor is capable of displaying. Anything smaller will not be displayed.

    They are using a border, but Firebug revealed to me that their entire list is enclosed in another div padding. That is how they are getting a shorter border.

    You have to be careful of making false assumptions. A lot of people (newbs and pros alike) will often ask “How do I use A to do B?” The assumption is that A will do B, when often that’s what it was not designed to do.

    A better question is “Which tool/technique/program do I need to achieve B?”

    ronangelo

    #30864
    Quote:
    Thanks but it doesn’t work at all!

    Did you try it and worked for you?

    It doesn’t for me!

    I noticed that values less than 1px are not considered!

    oops I didn’t realize that.. I was following your example but yeah anything lower than 1px that’s not 0, will display 1px.

    like what Mr. Odle said, try to find a different approach if the solution you have, doesn’t work.

    the code I posted above does this:

    2Sp8w.jpg

Viewing 10 posts - 1 through 10 (of 15 total)

You must be logged in to reply to this topic.