1

I want to order a list of items in this order (image attached). each column should have 5 rows and then the next 5 gets another column and continue...

this list is generated dynamically via sql query with a loop on the li tag.

so i just need to find a way to order it that way in javascript or css...

Example

daren1212
  • 25
  • 1
  • 7
  • You want it ordered by number like that? Or is it like that already? – Shawn31313 Jul 29 '12 at 18:26
  • its not ordered like that, this is what i want to do... – daren1212 Jul 29 '12 at 18:27
  • elements don't flow like that. Am interested in a possible answer anyway – codingbiz Jul 29 '12 at 18:34
  • Here is the example: http://jsfiddle.net/shawn31313/EV3he/1. If you could get the sql to setup the items like I did in a list and then split it, then this would work. I think I would also make a solution for making the whole thing dynamic and making seperate tables. + this is setup so it only works with the 15. I don't know how else I could do this though. – Shawn31313 Jul 29 '12 at 18:38
  • @Shawn31313 you just destroyed the semantics of a list, not to mention making the list read completely different for visual and screenreader users. – steveax Jul 29 '12 at 18:59
  • Depending upon what browsers you need to support, this might be helpful [How to split a list of links into 3 columns with CSS3?](http://stackoverflow.com/questions/8235476/how-to-split-a-list-of-links-into-3-columns-with-css3) – steveax Jul 29 '12 at 19:06

2 Answers2

4

Have a look at multicolumn environments. The specification is currently a candidate recommendation, so it shouldn't change that much. Keep in mind that this isn't implemented in IE prior to version 10, however there's a JavaScript fallback which should work, even on lists.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</ol>

ol{
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count: 2;
}

Note that you have to specify the actual amounts of columns somewhere. However, if every record of your SQL query equals one item you can just use something like count($result)/5.

Demo

Zeta
  • 103,620
  • 13
  • 194
  • 236
  • +1 you should add the non-vendor prefix rule (`column-count`) last though – steveax Jul 29 '12 at 19:14
  • @steveax: Already added this quite instantaneously after I posted my original answer, but I forgot to add it to the demo. Thanks for the tip though. – Zeta Jul 29 '12 at 19:15
  • 1
    @codingbiz, I updated Zeta's fiddle - it now shows the numbers: http://jsfiddle.net/skip405/EV3he/5/ – skip405 Jul 29 '12 at 20:01
1

You can find a good example here. http://www.alistapart.com/d/multicolumnlists/example1.htmlenter link description here

You can also create 3 lists that start with 1, 6 and 11. In this case you dont need css or js at all. Like this: 

<ol start="1">....</ol>
<ol start="6">....</ol>
<ol start="11">....</ol>
Munteanu Sergiu
  • 391
  • 1
  • 10