Does anyone know how to make a nice right aligned leader line in HTML? My client has a list of products with prices and wants it to look like it does on her order form - which uses dotted leader lines. But putting them in manually does not work right - its crooked looking. Is there a way to do this in HTML?

Thanks
Kristi

Could you post an example of what your talking about?

Kristi an example would help. Do you have an image of what the client wants.

The way I usually add dotted lines is through css and using the border property on one of the elements. You can set borders to to be dotted or dashed though the border-style property.

It sounds like you have a form and how you structure the form will determine where the best place to add the border will be.

As for the right aligned if I could see an image of what you're looking for and maybe also a link to the page in question or the code for the page I could probably help more with how to set it up. If I'm understanding right I don't think you're going to need to add something to align the border. It will be more a case of structuring the html to display the border where you want it to be.

I usually do that, like Van Gogh said, with CSS, but example will be helpful

please dont forget to post an example of the design or any refernce website for the desired look.

Well, its pretty simple. For instance, in Word they have a form like this:

Carpeting. . . . . . . . $ 30.00
Lamps . . . . . . . . . . $ 22.00
Tables (2) . . . . . . . $135.00
Silverware . . . . . . . $ 80.00
Stools (4). . . . . . . . $220.00
Chairs (10) . . . . . . $280.00
Tables (2) . . . . . . . $135.00
Lamps . . . . . . . . . . $ 22.00

I am not sure if you can tell, but if I just manually type in the dots and the prices, it looks 'wavy'. In Word, you can set the decimal points to line up, or have a dot leader that goes to the right, then you type in the price and things line up exactly. I can just forgoe the dots and us table cells to align things, but the dot leaders are nice because in a long list you see where you are. I just thought there must be some way to do this in HTML. Thanks!

There is no leading dots in HTML or CSS, it's just not capable of it. You have to either use a border as suggested, or you fake it with a background image - or you abandon the idea altogether. At some point you have to tell a client that there's a big difference between print and the web and the web does not work like Word - or any other word processor for that matter. We all want to keep our clients happy, but sometimes it's just not possible to do what they want.

In your case, I think I'd use a background image of a single dot, set to repeat horizontally, and spaced over to clear the words.

You might consider using alternating colors with a table to get things across. It looks slightly nicer and is quite easy.

 
<style>
table {
border: 0;
border-collapse: collapse;
}
td.desc1 {
width: 130px;
text-align: left;
}
td.price1 {
width: 130px;
text-align: right;
}
td.desc2 {
width: 130px;
background: #ddd;
text-align: left;
}
td.price2 {
width: 130px;
background: #ddd;
text-align: right;
}
</style>
 
 
<table>
  <tr>
    <td class="desc1">Carpeting</td>
    <td class="price1">$30.00</td>
  </tr>
  <tr>
    <td class="desc2">Lamps</td>
    <td class="price2">$22.00</td>
  </tr>
  <tr>
    <td class="desc1">Tables (2)</td>
    <td class="price1">$135.00</td>
  </tr>
  <tr>
    <td class="desc2">Silverware</td>
    <td class="price2">$80.00</td>
  </tr>
  <tr>
    <td class="desc1">Stools (4)</td>
    <td class="price1">$220.00</td>
  </tr>
  <tr>
    <td class="desc2">Chairs (10)</td>
    <td class="price2">$.00</td>
  </tr>
  <tr>
    <td class="desc1">Stools (4)</td>
    <td class="price1">$220.00</td>
  </tr>
  <tr>
    <td class="desc2">Chairs (10)</td>
    <td class="price2">$280.00</td>
  </tr>
  <tr>
    <td class="desc1">Tables (2)</td>
    <td class="price1">$220.00</td>
  </tr>
  <tr>
    <td class="desc2">Lamps</td>
    <td class="price2">$22.00</td>
  </tr>
</table>

Thanks everyone. I was pretty sure there wasn't anyway to do that, but I wanted to double check with others 'in the know' in case there was something out there I wasn't awar of yet - like some fancy CSS. There are many go-arounds - I will just do that instead.

Thanks!
Kristi

This really won't quite do the same thing, but you could set the data up in a table with three columns. That way you could line up things better, though it probably still won't be quite what you want. You might be able to get something close.

Originally Posted by Grafiti4u

I can just forgoe the dots and us table cells to align things, but the dot leaders are nice because in a long list you see where you are. I just thought there must be some way to do this in HTML. Thanks!

If you do use a table then an easy way to get the functionality of the dotted lines across the page is to change the background color of every other table row.

Just create two style rules with background colors and add them to each table row tag alternately down the table.

example:

.tr1 {background-color:#E2E2E2;}
.tr2 {background-color:#D0D0D0;}

Or you could leave every other row white and just leave off one rule.

I think it makes a wide table easier to read as you don't lose place as you scan across.

Why not use a fixed width font say courier or lucida console. that way it wont look all wavy

Carpeting. . . . . . . . $ 30.00
Lamps. . . . . . . . . . $ 22.00
Tables (2) . . . . . . . $135.00
Silverware . . . . . . . $ 80.00
Stools (4) . . . . . . . $220.00
Chairs (10). . . . . . . $280.00
Tables (2) . . . . . . . $135.00
Lamps. . . . . . . . . . $ 22.00

eh eh?