Adding graphic lines between list elements. (Solved)

[kuran]

Please see the attached picture to see what I want to achieve.Right now I have the horizontal lines embedded as a .jpg image between each <li> element in the html. Is there a way to use CSS so it places these images in the same way? I would prefer to keep using bitmaps so the effect is as standardized as possible, if that makes sense. Also, is it possible to attach the 'nieuw' element in a clean CSS way to the final element in the list? I want it to be positioned so it matches the end of each line... right now I am doing it in a messy way with absolute positioning and its own separate div.Thanks for any help!

[Ingolme]

For the dotted line, just give a bottom border to your <li> elements: border-bottom: 1px dashed #999;For the little text, I'd put it in a <span> and float it to the right.

[kuran]

For the dotted line, just give a bottom border to your <li> elements: border-bottom: 1px dashed #999;For the little text, I'd put it in a <span> and float it to the right.

Thank you Ingolme, I've wormed my way to the solution using your great advice.Using span to add 'nieuw' to the <li> element works out, however I can't seem to force the word 'nieuw' to appear on the same line as the <li> element. Right now it jumps to the second line, appearing below the <li> element..

[Ingolme]

If you place it before the text of the li element and then float it it will appear on the same line.You can use line-height to adjust how far the dotted line is from the text.

[kuran]

If you place it before the text of the li element and then float it it will appear on the same line.You can use line-height to adjust how far the dotted line is from the text.

Thank you, that did the trick!