The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> dotted line, make css for dotted line
aziz
post Feb 27 2020, 02:31 AM
Post #1





Group: Members
Posts: 2
Joined: 27-February 20
Member No.: 27,209



Hi
how i can make a css for dotted line
Example:
director . . . . . . . . . . . . . m. j. Richard
producer . . . . . . . . . . . . .mani rasoul
Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 27 2020, 07:27 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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).


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 27 2020, 10:01 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 27 2020, 10:08 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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

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/...ot-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/....com/dotleader/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 27 2020, 03:31 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aziz
post Feb 28 2020, 02:25 AM
Post #6





Group: Members
Posts: 2
Joined: 27-February 20
Member No.: 27,209



maybe I can fix my problem with them
thanks all
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 28 2020, 11:53 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I've peeked now. The one I remembered, https://web.archive.org/web/20080805144916/...ot-leaders.html , is done with a dotted border, not a background image as I thought.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:00 AM