- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I am trying to use borders to seperate my nav. Using borders as the pipe character instead of an image. I got it working fine. Each link has a white border on the right except the last one. I said li:last-child border none. It works. The question I have now, is how can I get a 2 pixel border with two colors? so I want a 2 pixel border the left side or one pixel would be one color and the right side would be another. basically looks like two lines touching each other that are a different color. I am trying to accomplish this with css instead of an image.
Use a left and a right border for each nav item of 1 px.
well, that almost works. but my issue is that I can’t get rid of the border on the last li. I would also need it to be gone on the first. Here is what I am doing now
#access .menu-header li {
float: left;
position: relative;
border-right: 1px solid #020202;
border-left: 1px solid #292928;
}
#access .menu-header li:last-child {
border: none;
}
it works for the middle navigation but not the last or the first so well.
This works cross-browser: http://jsfiddle.net/sl1dr/aMsXM/
Not the most semantic way to do it bet that way you won’t have any issues in older version of IE.
yea, that is a good method. But my menu is being generated by wordpress. So adding first and last classes could be difficult. I am trying to do it without adding those classes.
@cybershot Here is a pure CSS technique but it won’t work in IE8 or below: http://jsfiddle.net/sl1dr/aMsXM/
I figured it out using a little css3. Thanks for the help Josh.
@cybershot No worries, mind posting the working code?
@stevencrader That only gives one border. @cybershot wants two different colors.