Forum Moderators: not2easy
That means that the .... only shows between the lines.
The 'putting behind' can be done with CSS positioning or more easily by using a background image which is horizontally repeated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>variable width center elipsis</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#a{float:left}
#bak{background-image:url('image.gif');height:1em;margin-left:100px;margin-right:100px}
#b{float:right}
</style>
</head>
<body>
<div id="a">this is A</div><div id="b">mojo B</div><div id="bak"></div>
</body>
</html>
You must have a fixed width of no elipsis (background image) for both sides though. This can be kept the same value for each entry (probably best. Also note you should use em instead of px), or you could tweak the width for each item, but that takes either lots of work, or some javascript.
Of course you could get a pretty much perfect effect if you could set the background colors to cover (then you could use all sorts of methods, and you wouldn't have to assign widths), but you said that wasn't realyl an option.
I think gibbles idea was great though; just set a bottom border around he whole thing (not just inbetween, because that can't really be done). The outcome will be that the line will go under the price and item names too, but I do not consider that a downside at all, just a special trait.
You may also want to consider usage of alternating background colors instead of the elipsis style. This is quite popular, and can be done nicely with CSS.
[edited by: Xapti at 5:49 am (utc) on Aug. 15, 2007]
<style type="text/css">
.row {
width: 50%;
margin: auto;
}.dots {
padding: 0;
border-bottom: dotted black thin;
}
.product {
float: left;
margin: 0;
padding: 0;
}
.price {
float: right;
margin: 0;
padding: 0;
}
</style>
<div class="row">
<div class="product">longer product name</div>
<div class="price">$19,999</div>
<div class="dots"> </div>
</div>
<div class="row">
<div class="product">product</div>
<div class="price">$19,999</div>
<div class="dots"> </div>
</div>
<div class="row">
<div class="product">longer product name</div>
<div class="price">$19,990,000</div>
<div class="dots"> </div>
</div>
<script>
function getElementsByClassName(classname, tagname, node) {
if(!node) node = document.getElementsByTagName("body")[0];
if(!tagname) tagname = "*";
var a = [];
var re = new RegExp('\\b' + classname + '\\b');
var els = node.getElementsByTagName(tagname);
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
function fixDots() {
var row_divs = getElementsByClassName('row', 'div');
for (var i = 0; i < row_divs.length; i++) {
var div = row_divs[i];
var productDiv = getElementsByClassName('product', 'div', div)[0];
var priceDiv = getElementsByClassName('price', 'div', div)[0];
var dotsDiv = getElementsByClassName('dots', 'div', div)[0];
dotsDiv.style.marginLeft = productDiv.clientWidth;
dotsDiv.style.marginRight = priceDiv.clientWidth;
}
}
fixDots();
</script>
