Need help making an <ol> list count backwards

BWWebDesigns · #1 01-14-2008, 12:42 PM

Ok so ive seen the use of start=""

I entered the starting number i want it to count backwards from 5 and it counts upwards from 5

I read put a - sign before the number so i did and yay now it counts backwards BUT the numbers have the - sign before them

So how do i manipulate a <ol> list to make it count down from 5 without any - signs displayed

So it would look like

5. Some info here
4. Some info here
3. Some info here
2. Some info here
1. Some info here

As opposed to

-5. Some info here
-4. Some info here
-3. Some info here
-2. Some info here
-1. Some info here

Can anyone advise me how this works, im sure its something simple but ive searched the net and this site and cant find anything

kiwibrit · #2 01-14-2008, 06:34 PM

Here's a thread on that.

BWWebDesigns · #3 01-14-2008, 06:40 PM

thanks but that wasnt any use really as it did not answer my question

felgall · #4 01-14-2008, 07:46 PM

Well if that didn't answer your question then what is your question? The threads on that forum entry cover all of the current and future ways of reversing the numbers on the front of an ordered list.

**WebJoel** · #5 01-15-2008, 09:04 AM

I merely glanced at the URL thread provided: it looks to me to be merely hard-coding the number of links in descending order (10, 9, 8, 7, etc.).

This might prove unweildy if you have many <li>s and later, have to add many more...

Thinking how an "<ul>" or also a "<ol>" operates (standard ltr, or 'left-to-right'), -one could reverse this to read "rtl" (right-to-left) so "1" is "float:right;" and #2 is also "float:right" but it lands to the immediate LEFT of "#1", and so forth...

This could be coded something like

Quote:

....
li {float:right;...}
...

with some minor tweakages, and voila! -A "<ol>" that 'counts backwards'!

And with this, the default "display:block;" means counting vertically-bottom-to-top, and change that to "display:inline;" means counting horizontally-right-to-left...

Quote:

....

Quote:

codepoet · #6 01-25-2008, 10:14 PM

Here's an alternate method using javascript. You can initially set the list numbering style to "none", set each li value, then reset the list numbering style so it is visible again.

In code:

Code:

<head>
  <style type="text/css">
    #reverse { list-style-type: none }
  ...
  </style>
</head>
<body>
  ...
  <ol id="reverse">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <script type="text/javascript">
    <!--
      var ol = document.getElementById("reverse");
      var lis = ol.getElementsByTagName("li");
      for (var i = 1; i <= lis.length; i++)
        lis[lis.length-i].value = i;
      ol.style.listStyleType = "decimal";
    //-->
  </script>

There seem to be some properties in drafts of CSS3 that will allow box layouts from bottom to top, but not much useful otherwise.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)