Creating an arch of list items (javascript)
<p>I've got a list of items which have a background image (via CSS) and some text.  The simple markup is as follows:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;List item 1&lt;/li&gt;
    &lt;li&gt;List item 2&lt;/li&gt;
    &lt;li&gt;List item 3&lt;/li&gt;
    etc...
&lt;/ul&gt;
</code></pre>

<p>Imagine that each list item is a square.  Is there an easy way to display these as a semi-circle? i.e.</p>

<pre><code>   [][]
 []    []
[]      []
</code></pre>

<p>Now to make this slightly more complicated there is one variable - the number of list items is unknown, so I need to work this out on the fly. I can work out the width each list item preety easily, so that it looks correct on the x-xis, I'm just having trouble with the y-axis.</p>

<p>Any help gratefully receieved.</p>

<p>Thanks for your time
Sniffer</p>
