- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Wed, 30 Nov 2005 18:14:16 -0800
- To: "Lachlan Hunt" <lachlan.hunt@lachy.id.au>
- Cc: "www-style" <www-style@w3.org>
----- Original Message -----
From: "Lachlan Hunt" <lachlan.hunt@lachy.id.au>
|
| 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-*;
|
Try to reproduce third list item (wrapped line) on the screenshot.
| 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
|
Andrew Fedoniouk.
http://terrainformatica.com
Received on Thursday, 1 December 2005 02:14:37 UTC