Word Filler

[searls03]

Ok, how would I make a line of text be a certain width......lets say 100px, but on one side I would like to display $product, on the other, $price. In between these would be a filler such as "......". what I need though is for the line to be a certain width, so that when it is typed in, lets say so that it looks like this:

 

product...................................$10

product12345.........................$10

 

so basically the two edges need to align, with "...." as fillers that may be a different number every time, how could I do this?

[Jessica]

This is what HTML tables are for, this is tabular data.

 

[searls03]

I figured I would use a table, but I dont know how I would make the right number of "..."'s. how would I do that?

[Jessica]

Don't, just use a table - why would you want the dots?

[searls03]

it's going to have many items listed one on top of the other, I don't want any table borders...but I want the dots so that the product lines up with the price

[searls03]

makes it easier to read

[Jessica]

Look into zebra striping. Seriously, don't use periods.

[Volter9]

Dude, it's easy. But I think, wisely be if you would use tables. Here's code:

 

<? // PHP Code
function ($before,$after) {
$name = $before;
$price = $after;
$totalLength = 200; // Total length of string
$dotsLength = $totalLength - strlen($name) - strlen($price); // Amount of dots
$dots = str_repeat(".",$dotsLength);
$result = $name.$dots.$price;
return $result;
}
?>

[Pikachu2000]

That will only be even with fixed width fonts. Most fonts aren't.

[haku]

Exactly. The only way it would work would be to use a fix-width font, same as when it's done in print. But the reality of the situation is that it's trying to force something on HTML that is generally handled in other ways in HTML - tables. Which is what Jessica was getting at.

[codefossa]

You should really, really, reallllly use a table. If you must do this though, here's an example in Javascript. You can't line up the dots perfect because it's not a fixed-width font, but the items and prices line up.

 

Demo Page: http://xaotique.no-ip.org/tmp/20/

 

HTML

<div class="list">
   <span>product</span>
   <div></div>
   <span>$10</span>
</div>
<br />
<div class="list">
   <span>product1234</span>
   <div></div>
   <span>$104</span>
</div>
<br />
<div class="list">
   <span>product12345678</span>
   <div></div>
   <span>$102344</span>
</div>
<br />
<div class="list">
   <span>productWhatever321</span>
   <div></div>
   <span>$1040</span>
</div>

 

Javascript / jQuery

// Allow Page To Load First
$(document).ready(function()
{
   var width  = 300; // Width of List
   var margin = 3;   // Margin (left/right) of Dots

   // Cycle The List Items
   $(".list").each(function()
   {
       // Float Children of List Left & Get Width
       var lw = $(this).children().css( "float", "left" ).width();

       // Add Our Dots To Size
       while ($(this).find("div:first").width() + lw < (width - (margin * 2)))
       {
           $(this).find("div:first").append(".");
       }

       // CSS for the Dots Div
       $(this).find("div:first").css(
       {
           "width": width - lw,
           "overflow-x": "hidden",
           "margin-left": margin,
           "margin-right": margin
       });
   });
});

[codefossa]

Or you could just take the dots out to the size of the list width then allow the overflow-x hidden attribute to kick in and you would end up with some partial dots to even it out, but you would still have some end in spaces. The width subtracting the margin will just have the right amount of dots without even using the overflow.

 

So, that's up to you, but easy and quick to change to your liking. If you would like to know how to use an actually table though, like you should be doing, let me know and I can give you an example of that, but I think I did what you wanted.

[Volter9]

Kids, don't use text-align:justify; to make string in whole width

[codefossa]

Kids, don't use text-align:justify; to make string in whole width

That would throw off the spaces and not line up the items / prices.

[searls03]

I realize that this may not be the best way to do this, but it is what was requested. thanks for the help, it is exactly what I want!

[peppericious]

Ok, how would I make a line of text be a certain width......lets say 100px, but on one side I would like to display $product, on the other, $price. In between these would be a filler such as "......". what I need though is for the line to be a certain width, so that when it is typed in, lets say so that it looks like this:

 

product...................................$10

product12345.........................$10

 

so basically the two edges need to align, with "...." as fillers that may be a different number every time, how could I do this?

 

With tables... for your tabular data... and a little styling, you could get this.

 

Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
#wrap {
width:500px;
margin: 40px auto;
}
table {

}
table th {
background-color: lightBlue;
}
table td {
border-bottom:1px dotted red;
}
</style>
</head>

<body>
<div id='wrap'>
<table width="100%" cellpadding="2">
<tr>
<th align="left" scope="col">widget</th>
<th align="right" scope="col">price</th>
</tr>
<tr>
<td>whatever</td>
<td align="right">$1.00</td>
</tr>
<tr>
<td>whatever else</td>
<td align="right">$1.25</td>
</tr>
<tr>
<td>a third widget</td>
<td align="right">$11,000</td>
</tr>
</table>
</div>
</body>
</html>