Is there an easy way to make a dot leader in html?

K

Korgun

Supreme [H]ardness
Joined
Mar 9, 2000
Messages
6,619
my boss is a dot leader whore, he loves it a lot. uses it every chance he gets.

on our web site we have a price list, i was wondering if there is an easy way to align the price part

Item....................................................................................$2.00
Itemwithalongname....................................................................................$2.00

I know the logical way would be to just have a table and items on left price on right, but he really really wants the dot leader.... can i have a table and force it to use dot leader?
 
Well, this is assuming you know CSS, but it sort of works (well, it works, just haven't tested it thoroughly). Just whipped it up after trying various methods, was a fun challenge :) : www.blisspc.com/files/dotleadex.html

Any questions at all, feel free to ask me. Right now it's fluid, but can be adjusted to fixed widths. It's still a rough draft, didn't really pay attention if I was using the right tags for the job.

I have no idea how to do this with tables, so if that's what you were looking for, can't help you.

EDIT: Haven't tested it with gecko browsers, so not sure how it would look there. Just did a clean Windows install last night, haven't installed all my programs yet.

EDITx2: Made a minor change to the html. I know it's missing stuff to make it validate (end of html tag, etc), but it's just an example.
 
dotleader.jpg


Doesn't work too well in Mozilla.
 
fat-tony said:


Doesn't work too well in Mozilla.
Click to expand...
That seems to only be happening because I didn't use enough dots to fill in the whole line. It looks fine on mine since I'm only at 1024, but guessing you're at a higher resolution. Will be adding more dots to it now so it looks right for you guys. Forgot about that detail.~

Regardless, the "filling with dots" method definitely isn't as pretty as a repeating background. The repeating background wouldn't look awful when you look at the code, and it's probably less prone to problems.

EDIT: Thanks for pointing that problem out, by the way.
EDITx2: So that it's clear, adding more dots will fix things no matter what resolution. The "overflow: hidden" attribute will make sure any content wider than the user's screen width is truncated, hence no scroll bar no matter what res.
 
another option, albeit somewhat less appealing than css, is to have the script that generates the listing put it in <pre> tags and calculate the length of each part and fill in with dots depending on the length you want .... but i prefer the css option ;)
 
you could also use a { border-bottom: 1px dotted black; } CSS rule to get more-or-less the effect, though it will look more like a perforation and less like a dot leader in Gecko.
 
sweet. thanks Anarchonixx

i don't know CSS (i'm new to this webmastering deal hehe)

anyways if i were to copy paste your code (with your permission. If i were to do it do i have your permission? it's for new york university's printing services dept) and replace the parts i need with what you have would this work? :) i do understand what is going on, i have a little bit of programming knowledge (took c++ in college) so yay :)

otherwise it's just add a dot, remove a dot until they all look similar but if people over ride fonts or font sizes it'll look different on everyone's computer

tim_m, thanks for the post but i wouldn't even know where to start. since i can see Anarchonixx's code and what it produces it's easy to understnad. (sorry for my nooobocity)

lomn75 , just like tim_m i'm not quite sure how to go about doin that. but i do understand teh concept :D

soon i'll get into the nitty gritty, right now i just need to finish this page to get my boss off my back :)
 
Korgun said:
i don't know CSS (i'm new to this webmastering deal hehe)

anyways if i were to copy paste your code (with your permission :) if i were to do it do i have your permission? it's for new york university's printing services dept) and replace the parts i need with what you have would this work? :) i do understand what is going on, i have a little bit of programming knowledge (took c++ in college) so yay :)
Click to expand...
Have at it. One problem I did find with the example is that you must have all the stuff inside a div (didn't try anything else, though) or the "center" div won't show properly. Didn't really find out what was up with that, but didn't bother since in almost any case I could think of, you'd want the list of things in its own div. I'm just blabbering now... Anyway, if you encounter any problems at all, or want a better explanation of what everything in there does and why it's behaving as it is, just post 'em or IM me. GL.
 
Im sure it would be easy to do with a fixed width font like courier.

A fixed width font is pretty much a font where all the characters are the same width, so you can align stuff for stick men and dots

.O............................ These should be aligned
-|-
/ \........................... With each other.
 
You must log in or register to reply here.
Back
Top