- From: Lachlan Hunt <lachlan.hunt@lachy.id.au>
- Date: Thu, 01 Dec 2005 12:50:37 +1100
- To: Andrew Fedoniouk <news@terrainformatica.com>
- CC: www-style <www-style@w3.org>
Andrew Fedoniouk wrote:
> Speaking about %% units....
> This could be done in various ways using them.
>
> First and most obvious example is here:
> http://terrainformatica.com/w3/tocfspu.jpg
> ...
> <li>A short title<span class="filler" />1</li>
%% isn't necessary to achieve a similar effect in other browsers using
display: table-*;
ul, li { margin: 0; padding: 0; }
li { display: table; width: 100%; border-collapse: collapse; }
li a, li .number, li .leaders
{ display: table-cell; white-space: nowrap; }
li .leaders { border-bottom: 1px dotted black; width: 100%; }
li .number { text-align: right; content: '1'; }
<ul>
<li><a href="#">Testing Leaders</a><span class="leaders"></span><span
class="number"></span></li>
</ul>
Once browser support improves, I believe those spans could be replaced
with li::after and li::after::after. The above currently works in at
least Opera and almost works in Firefox except for the generated content
within the span.
Tantek has produced a similar effect a long time ago using tables
instead of display:table-*;, which I based that CSS on.
http://tantek.com/CSS/Examples/dotleaders.html
--
Lachlan Hunt
http://lachy.id.au/
Received on Thursday, 1 December 2005 01:51:07 UTC