SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    Top Ten Order Lists...

    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. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It cannot be done automatically without either scripting or CSS strangely enough it may even justify a table.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I've no idea if this is what you meant but it was fun anyway
    Code:
    <!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. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    what a miserable hack!!

    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>
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Timmy Christensen has an interesting method.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Timmy Christensen has an interesting method.
    neat

    however, this method fails the original requirements...
    semantically correct and read correctly with or WITHOUT CSS
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    The counters method and the html5 developments were interesting though


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •