HTML - using ......... to fill an empty area

Styles137 · Dec 19, 2005

I am looking to create a nice looking menu, but I am having trouble finding the right way to produce this result:

Menu Item
Description..................$price

Menu Item2
Description longer.......$price

I am currently using a table where the menu item spans 2 cols and on a new row, description and price are their own cols. I want the .... to fill in any empty space between the description and the price. I'm using ASP to connect to my databse. Please let me know if you have any suggestions. Thanks.

cLFlaVA · Dec 19, 2005

you would probably be able to create an image of maybe five dots, and then apply this image as the background of your table cell, repeating only horizontally. You could also look into bordering the bottom of the table cell with a dotted or dashed border. you will need to determine whether or not you wanted the dots to appear below the text, or just between the text.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Styles137 · Dec 19, 2005

I just want the dots between the last letter in the description, all the way to the $ sign in the price. I will try the background, but I'm afraid this will fill-in spaces where I do not want the dots to be seen... for instance, if the description is too long, and jumps down another row, the dots will fill in to the right of any empty space on the first row. Thanks for the post.

cLFlaVA · Dec 19, 2005

here is something else you may want to try. other people might tear this apart though - i haven't put much thought into it...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
td {
    border-bottom: 1px dotted black;
}

td * {
    background-color: #fff;
    position: relative;
    bottom: -2px;
}
</style>
</head>

<body>

<table style="width: 100%;">
    <colgroup>
    <colgroup style="text-align: right;">
<tr>
<td><span>my stuff is expensive</span></td>
<td><span>$100.00</span></td>
</tr><tr>
<td><span>your stuff is cheap</span></td>
<td><span>$10.00</span></td>
</tr><tr>
<td><span>her stuff is fairly priced</span></td>
<td><span>$50.00</span></td>
</tr></table>

</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Styles137 · Dec 19, 2005

OK, I tired both of these, and they are basically what I am looking to do... but I am still running into one last bit of trouble. When I try using the img as a background, I see the dots behind the description and the blanck space to the right of it. Here is a really messy example of what I mean

.d.e.s.r.p.t............... $7.00

Of course the dots are not in-between the letters, they are behind it.

When I use the dotted border, instead of the dots being behind the description, they appear under it...

description 7.00
...........................

It's almost there, but I only want the white space filled, and what makes it tough is the fact that some descriptions take up more than one line

this is a ling description that will take up more
than one line.....................................................7.00

See the problem. Thanks for the posts

cLFlaVA · Dec 19, 2005

you did not try my complete second suggestion. you will need another element within the div to make it work, and you probably have not done that.

same thing with the first example, you will need to style the text within your td, by giving it the same background as your surrounding area. for example:

Code:

<td><span>my stuff goes here</span></td>

you can apply the image background to the [tt]td[/tt] and then apply a solid white background to the span. you will then need to position the span relatively over the background image, by using a negative "bottom" style, as i have shown above.

it's messy, but it works. i can't assure you it is a cross-browser solution, as i have not tested in multiple browsers.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Styles137 · Dec 19, 2005

I appologize, I did look at the code and plugged in only certain parts. I will try this again with the entire code, and see if I have better results. Thanks again.

cLFlaVA · Dec 19, 2005

here's something that works pretty well in IE 6.0.2800 and FF 1.0.7. the html and css validate, as well.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
<style type="text/css">
td {
    border-bottom: 1px dotted black;
}

td * {
    background-color: #fff;
    color: #000;
    position: relative;
    bottom: -3px;
}

td.right {
    text-align: right;
}
</style>
</head>

<body>

<table style="width: 100%;">
    <colgroup></colgroup>
    <colgroup></colgroup>
<tr>
    <td><span>my stuff is expensive</span></td>
    <td class="right"><span>$100.00</span></td>
</tr><tr>
    <td><span>your stuff is cheap</span></td>
    <td class="right"><span>$10.00</span></td>
</tr><tr>
    <td><span>her stuff is fairly priced</span></td>
    <td class="right"><span>$50.00</span></td>
</tr></table>

</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Styles137 · Dec 19, 2005

Here is a curve - what if I only want this to appear in one of my tables on this page

cLFlaVA · Dec 19, 2005

1) give your dotted table an id.

Code:

<table id="dotted">

2) change your css slightly:

Code:

<style type="text/css">
#dotted td {
    border-bottom: 1px dotted black;
}

#dotted td * {
    background-color: #fff;
    color: #000;
    position: relative;
    bottom: -3px;
}

#dotted td.right {
    text-align: right;
}
</style>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Styles137 · Dec 19, 2005

Thanks - I appeciate the help. This should get me moving again.

LuckySyringe · Dec 19, 2005

I've got an option, but its a pain to update...
You put the description and price in two table cells on one row, sperated by a blank cell with the repeated period image. Then you put that into a table that is inside another table, with the product name in a seperate row above it.
ie:

Code:

<table width="500">
  <tr>
    <td class="title">Product</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td class="description">Product Description</td>
          <td class="spacer">&nbsp;</td>
          <td class="price">$100</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

...and in the stylesheet...

Code:

.spacer
{
background-image:url(period.gif);
background-repeat:repeat-x;
}

...and sorry for the late post.

-> LuckySyringe

cLFlaVA · Dec 20, 2005

i would stay away from nesting tables if i were you. use them like they were meant to be used. you'll find yourself in design hell if you want anything changed.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

HTML - using ......... to fill an empty area

Styles137

IS-IT--Management

cLFlaVA

Programmer

Styles137

IS-IT--Management

cLFlaVA

Programmer

Styles137

IS-IT--Management

cLFlaVA

Programmer

Styles137

IS-IT--Management

cLFlaVA

Programmer

Styles137

IS-IT--Management

cLFlaVA

Programmer

Styles137

IS-IT--Management

LuckySyringe

Technical User

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor