Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css borders

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #34057
    cybershot
    Participant

    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.

    #85551

    Use a left and a right border for each nav item of 1 px.

    #85554
    cybershot
    Participant

    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.

    #85558

    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.

    #85563
    cybershot
    Participant

    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.

    #85565

    @cybershot Here is a pure CSS technique but it won’t work in IE8 or below: http://jsfiddle.net/sl1dr/aMsXM/

    #85566
    cybershot
    Participant

    I figured it out using a little css3. Thanks for the help Josh.

    #85567

    @cybershot No worries, mind posting the working code?

    #85568

    @stevencrader That only gives one border. @cybershot wants two different colors.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.