Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ dotted line

Posted by: aziz Feb 27 2020, 02:31 AM

Hi
how i can make a css for dotted line
Example:
director . . . . . . . . . . . . . m. j. Richard
producer . . . . . . . . . . . . .mani rasoul
Thanks

Posted by: Christian J Feb 27 2020, 07:27 AM

QUOTE(aziz @ Feb 27 2020, 08:31 AM)

Hi
how i can make a css for dotted line

You can make CSS borders dotted, but this doesn't look like a border to me:

QUOTE

director . . . . . . . . . . . . . m. j. Richard
producer . . . . . . . . . . . . .mani rasoul

None of these ideas sem very good alas:

You could make a dotted border underneath the whole line (including the text), then make the text cover it somehow.

Or you could use a 3-column table, with the middle column containing empty cell using a dotted botton border.

Or you could use real text for the dots, just like in your example (maybe with a monospaced font).

Posted by: pandy Feb 27 2020, 10:01 AM

Maybe this?
https://www.w3.org/Style/Examples/007/leaders.en.html

Someone came up with a trick for this maybe 10 years ago when CSS tricks were the rage. As I remember it was about making the dots fill any width. But I can't remember what or who and I don't find it in my notes either.

I guess a background image tiling horizontally could be one way, but what I think of was something more elegant.

Posted by: pandy Feb 27 2020, 10:08 AM

It was easier once I realized what those dots are called.

Haven't viewed source and seen how it's done yet, but it seems to be images after all. Still, looks nice.
https://web.archive.org/web/20080805144916/http://home.tampabay.rr.com/bmerkey/examples/dot-leaders.html

Also had this URL. But that site is also gone and Wayback Machine doesn't have it.
http://www.ugcs.caltech.edu/~takoyaki/css-test/tables/

And a third one is linked to from the first page above.
https://web.archive.org/web/20080915172615/http://www.lenef.com/dotleader/

Posted by: Christian J Feb 27 2020, 03:31 PM

QUOTE(pandy @ Feb 27 2020, 04:01 PM)

Maybe this?
https://www.w3.org/Style/Examples/007/leaders.en.html

Cool!

QUOTE

Someone came up with a trick for this maybe 10 years ago when CSS tricks were the rage.

I think I read about it here ten years ago, can't remember. Didn't even know the proper name for it.

Posted by: aziz Feb 28 2020, 02:25 AM

maybe I can fix my problem with them
thanks all

Posted by: pandy Feb 28 2020, 11:53 AM

I've peeked now. The one I remembered, https://web.archive.org/web/20080805144916/http://home.tampabay.rr.com/bmerkey/examples/dot-leaders.html , is done with a dotted border, not a background image as I thought.