Need help making an <ol> list count backwards [Archive]

Click to See Complete Forum and Search --> : Need help making an <ol> list count backwards

BWWebDesigns

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

01-14-2008, 06:34 PM

Here's a thread on that (http://www.mail-archive.com/pcworks@imagicomm.com/msg07788.html).

BWWebDesigns

01-14-2008, 06:40 PM

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

felgall

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

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....
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...

<style>
#backwards {width:100px; height:100px; display:block; border:2px solid silver;}
#backwards li {float:right; width:100px;}
</style>
....
<ol id="backwards">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>

codepoet

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:

<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">

</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.