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

Home Forums CSS Image seperator in splitted unordered list css Reply To: Image seperator in splitted unordered list css

Tom Houy

You’re missing the closing LI tags in that example.

Are you saying that you split the LI tags into two groups and wrapped them in separate UL tags and now want a vertical separator image between the two? If so, just float both unordered lists beside each other. Then on the second unordered list, add the separator image as a background. Set it to not repeat, and position it from the left and vertically as you like. Then add some extra padding to the left of the second unordered list approximately equal to the width of the image, or whatever looks best.

If instead, you used CSS to somehow split up two of the LI items vertically, you could use a similar technique by applying a custom class to one of the LI’s, and assigning it a background image, set to no repeat, position it from the bottom and align it horizontally as you like.