Change item order of a HTML list using CSS

Discussion in 'CSS' started by sandaru1, Mar 17, 2012.

0
  1. #1
    Hi all, I need to change the order of the list items using CSS
    List is coded in HTML in 1,2,3,4,5,6 order but I wont to show
    It in different order (1,4,6,2,3,5). HTML code can not be changed,
    Even content b/w <li> and </li> can not be changed. CSS code can be
    use in any way/method.

    HTML code
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
    HTML:
    Final Displaying in browser should be as below
    1
    4
    6
    2
    3
    5
     
    Last edited: Mar 17, 2012
    sandaru1, Mar 17, 2012 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    Apply list-style: none; to your list, add margin-bottom: xx; or line-height: xx;, and bolden your text.
     
    wiicker95, Mar 17, 2012 IP
  3. pushpa joshi

    pushpa joshi Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    pushpa joshi, Mar 18, 2012 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    No it's not.

    That'll give you this :

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
     
    wiicker95, Mar 18, 2012 IP
  5. dffdlx

    dffdlx Member

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    PM me if you are still looking for a solution. I have got to check few things with you before I give the fix.
     
    dffdlx, Mar 18, 2012 IP
  6. sandaru1

    sandaru1 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yes, I still need a solution
     
    sandaru1, Mar 18, 2012 IP
  7. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #7
    What you actually want, pal, ain't possible...
     
    wiicker95, Mar 18, 2012 IP
  8. sandaru1

    sandaru1 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    ok, thanks
     
    sandaru1, Mar 18, 2012 IP
  9. dffdlx

    dffdlx Member

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #9
    Hi

    I actually wanted to check if your website will allow users to select and copy content. Because if that is the case then the below solution needs further modification , that is, restrict user from select and copy content using css. However you guys were too rapid with your responses :)

    Solution:
    li{color:white;display:inline;}

    li:first-child:before
    {
    color: black;

    content: "1\A 4\A 6\A 2\A 3\A 5" ;
    white-space: pre;
    user-select: none;
    }
     
    dffdlx, Mar 20, 2012 IP
  10. stevemartin1131

    stevemartin1131 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You can go in for<ol> which means ordered list or <ul> unordered list.
     
    stevemartin1131, Mar 23, 2012 IP