Top Ten Order Lists

HTML & CSS
1

I am not sure if this or the HTML forum is the proper area to post this “question” but I will try it here first. Is there a way to mod the MARKUP so that it will count down instead of up?

Lets say the challenge was to build a Letterman style Top 10 list that was semantically correct and read correctly with or WITHOUT CSS.
Now for those not into latenite TV… a TRUE top 10 list is a reverse countdown, otherwise it’s rather anticlimactic.

I am thinking it’s job for a OL, the 10th item being the first , and the 1st beight the last ( just as it would be read by Mr. Letterman). The count down should be can achieved with CSS using a counter-reset and counter-increment… but when stiles are OFF , the top ten now reads backwards.

I was thinking ( and I know this code is deprecated…) of something like:
<OL start=“-10”>, the only problem being that the count down (up) now has a negative sign in front of each number… argh. nothing is ever simple.

right now the only thing I can think of assign ( deprecated again) a “value=?” to each LI , but that isnt very graceful…

2

It cannot be done automatically without either scripting or CSS strangely enough it may even justify a table.

3

I’ve no idea if this is what you meant but it was fun anyway :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ol {
    list-style:decimal;
    margin:0 0 0 35px;
}
li {
    line-height:2em;
    position:relative;
}
li {top:18em}
li+li {top:14em}
li+li+li {top:10em}
li+li+li+li {top:6em}
li+li+li+li+li {top:2em}
li+li+li+li+li+li {top:-2em}
li+li+li+li+li+li+li {top:-6em}
li+li+li+li+li+li+li+li {top:-10em}
li+li+li+li+li+li+li+li+li {top:-14em}
li+li+li+li+li+li+li+li+li+li {top:-18em}
</style>
</head>
<body>
<ol>
    <li>test a</li>
    <li>test b</li>
    <li>test c</li>
    <li>test d</li>
    <li>test e</li>
    <li>test f</li>
    <li>test g</li>
    <li>test h</li>
    <li>test i</li>
    <li>test j</li>
</ol>
</body>
</html>

Won’t work in IE6 though.

4

what a miserable hack!! :smiley:

and what happens if the text of the LI is more than a few letters long? like, say, a sentence which is too long to fit on one line?

i fear the simplest solution is just to hard-code the actual numbers

<h1>Top Ten Signs You’re Not Going To Win An Olympic Gold Medal</h1>

<p>10. You’re allergic to snow </p>

<p>9. Fired a gun during your event but it’s not the biathlon </p>

<p>8. Your neck is too fat to hang a medal on </p>

<p>7. You get winded saying “slalom” </p>

<p>6. Nobody can find any record of your home nation “Funkytown” </p>

<p>5. Only experience skating on ice is in your marriage (you fellas know what I’m talking about) </p>

<p>4. You’re having a hard time putting your pants on over your skis </p>

<p>3. Skipped practice to see “Valentine’s Day” – The Philadelphia Inquirer calls it an all-star candy sampler; buy your tickets today! </p>

<p>2. Southwest Airlines kicked you off a flight to Vancouver because you’re too fat </p>

<p>1. Ass hasn’t been off the couch since the '06 Winter Games</p>

5

Timmy Christensen has an interesting method. :slight_smile:

6

neat :slight_smile:

however, this method fails the original requirements…

semantically correct and read correctly with or WITHOUT CSS

7

Wow PAUL.

But yes, the changed posed is when CSS off it should still carry the same semantic content. but it seems HTML can only count UP and not down??? Also it IS a list… using <P> would not carry that semantic would it?

8

HTML5 can reverse the order.

9

But yes, the changed posed is when CSS off it should still carry the same semantic content.

Isn’t that what my example does unlike the method shown here which is nonsense with css of.

In my example “test j” is always number 10 whether you have css on or off but in the counter method only the number changes and therefore the information presented is incorrect.

It does seem to me to be a problem with counters in that if you can organise your counters then there should also be a relationship between the data and the counter that is not lost when css is turned off.

My solution wasn’t meant to be anything other than a simple trick anyway and as Rudy pointed out would break if the data ran to two lines or more.:slight_smile:

The counters method and the html5 developments were interesting though :slight_smile: