Add vertical separator between menu elements
-
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
ModThank 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;
}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:
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,
ModQuote:I don’t see any difference between my code and the yoursLook again. We added
margin:0
to eliminate the space.Quote:I used the height line to shorten the separator lengthAs I stated, there is no border-height property.
ModQuote: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?”
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:
Viewing 10 posts - 1 through 10 (of 15 total)
- 1
- 2
- You must be logged in to reply to this topic.