CODEWITHSUNDEEP
javascripthtmlcss
nickf
nickf

Reputation: 546503

Change the numbering on an ordered list?

You can change the number at which an ordered list starts like this:

<ol start="3">
    <li>item three</li>
    <li>item four</li>
</ol>

...but is there a way to make list items have arbitrary numbers, not just consecutive numbering?

<ol>
    <li>item two</li>
    <li>item six</li>
    <li>item nine</li>
</ol>

The only way I can see to do it now is to wrap each <li> in its own <ol> which obviously isn't ideal. HTML, Javascript and CSS solutions are welcome.

ps: though the item numbers are arbitrary, they are still ordered, so don't be fretting about the semantics

Upvotes: 21

Views: 28400

Answers (7)

SimTech
SimTech

Reputation: 11

It's actually even easier than you think. What you're doing is basically "pausing" a list so you can insert something. When you do this in text you use the &lt;div&gt; tag. (Bells ringning now?")

CSS

...<br />

/* This style removes the indentation that &lt;ol&gt; creates. In my document it was 30pt */<br />
.pauselist {margin-left:-30pt;}
<br />
<br />
XHTML<br />
...<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;ol&gt;<br />
  &lt;li&gt;Item 1&lt;/li&gt;<br />
  &lt;li&gt;Item 2<br />
    &lt;div class="pauselist"&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;!-- Okay now let's continue with the list --&gt;<br /> 
    &lt;/div&gt;<br />
  &lt;/li&gt;<br />
  &lt;li&gt;Item 3&lt;/li&gt;<br />
  &lt;li&gt;Item 4&lt;/li&gt;<br />
&lt;/ol&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
<br />
<pre>

------ Results --------- Text Text

  1. Item 1
  2. Item 2

Text Text Text

  1. Item 3
  2. Item 4

Text Text

Upvotes: 1

Benjol
Benjol

Reputation: 66637

Looking at all these answers is making me feel a bit icky. Do you really really want to use LIs for this? If it means creating 'dummy' lis, or javascript, or custom CSS classes, I would start looking at other possibilities. The point of an LI (to my mind) is NOT managing the numbering yourself. If you have to manage the numbers yourself, then you're only using LI to manage the style - how about creating your own style and just sticking your numbers in a <span> or something?

Upvotes: 6

jluna
jluna

Reputation: 299

I think this problem starts from semantics (wich, you know, is one of the pillars of creating standard-based pages): You want to use an ordered list to represent an unordered one.

My suggestions:

1) Use a ul and add images with numbers based on classes (this can be done programatically and you only have to generate the number images once, plus it gives you styling options)

2) Use a definition list. I know its stretching semantics a little bit but if the "term" (dt) is "Horizontal" and the definitions (dd) are the crossword's options I think it becomes semantic. Using this you can add the numbers you want and style them using whichever tag you like.

Hope this helps.

Upvotes: 0

Eugene Yokota
Eugene Yokota

Reputation: 95694

Deprecated HTML way

<ol>
   <li>List item 1</li>
   <li VALUE=5 TYPE="A">List item E</li>
   <li>List item 3</li>
</ol>

CSS way

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
ol { 
    counter-reset:item; 
 }
li {
    display:block; 
 }
li:before { 
    content:counter(item) '. '; 
    counter-increment:item; 
 }
#new_number {
    counter-reset:item 24;
 }
</style>

<!--[if IE]>
<script type="text/javascript">
window.onload=function() {
   document.getElementById('new_number').value='25';
 }
</script>
<![endif]-->

</head>
<body>

<ol>
  <li id="new_number">list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>

</body>
</html>

Upvotes: 4

AakashM
AakashM

Reputation: 63398

In HTML 4.01 there is a deprecated value attribute on <li> :

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

The non-deprecated (CSS) answer is (as so often) more elegant but less... direct :) The spec is somewhat dry; googling turns up more immediately usable stuff such as this :

Just like continuing the numbering from the previous list you’ll need to set the CSS property for incrementing the proper counter. But to make it start incrementing from a different starting point you can pass an optional second parameter in counter-reset property of a number. So starting from 5 would look something like this in your CSS:

ol.continue {
  counter-reset: chapter 4;     /* Resets counter to 4. */
}

Since the counter will always be reset before it is incremented, to start our list with the number 5 we will have to set the counter to 4.

Upvotes: 18

Jon Skeet
Jon Skeet

Reputation: 1504062

There's the value attribute on li, although that's deprecated:

<ol>
    <li value="2">item two</li>
    <li value="6">item six</li>
    <li value="9">item nine</li>
</ol>

The w3schools page for <li.@value> says:

The value attribute of the li element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

Note: At the moment, there is no CSS alternative for the value attribute.

(Despite saying "use styles" for the deprecation warning on the main <li> page.)

The HTML 5 editor's draft reference for li suggests it's still valid there...

Upvotes: 13

Kirtan
Kirtan

Reputation: 21685

For example -

<ol id="reverse_numbering">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ol>

This is something you can do -

<script type="text/javascript">
    var reverse = $('reverse_numbering');
    reverse.style.listStyle='none';
    var li = reverse.getElementsByTagName('li');
    for(var i=0; i<li.length; i++) {
        li[i].insertBefore(document.createTextNode(li.length-i+'. '), li[i].firstChild);
    }
</script>

Reference: HTML Help Forums.

Upvotes: 3

Related Questions