CODEWITHSUNDEEP
javascriptcsshtml-lists
daren1212
daren1212

Reputation: 25

How can i order an html list like this with css or javascript?

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

Upvotes: 1

Views: 101

Answers (2)

Zeta
Zeta

Reputation: 105886

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

Upvotes: 4

Munteanu Sergiu
Munteanu Sergiu

Reputation: 381

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>

Upvotes: 1

Related Questions