Tony D. Tony D. - 3 months ago 13
CSS Question

Simulating nav menu borders with images instead of borders in CSS

What I'm after is a menu that looks something like this:

| one | two | three | four|


Using CSS and borders one can accomplish something similar to this by:

.myContainer > ul > li{
border-right: 1px solid purple;
}

.myContainer > ul > li:first-child{
border-left: 1px solid purple;
}


I have been provided vertical images that the customer would like to use as the borders. Great. No biggie. Until I tried to implement it:

.nav-main > ul > li{
background: url('/Images/vertLine.png')no-repeat right top;
}

.nav-main > ul > li:first-child{
background: url('/Images/vertLine.png')no-repeat left top;
}


The output that this gives me is:

| one two | three | four|


Any thoughts on how I can achieve this using images?

Answer

Mutiple background images

.nav-main > ul > li{           
    background: url('/Images/vertLine.png')no-repeat right top;
}

.nav-main > ul > li:first-child{           
    background: 
      url('/Images/vertLine.png')no-repeat left top,
      url('/Images/vertLine.png')no-repeat right top;
}
Comments