How to modify the orientation of a <ul> spanning multiple columns?

Question

I am producing a <ul> of alphabetically sorted items, which spans over multiple lines. An example of this can be seen here:

http://jsfiddle.net/H4FPw/1/

currently the list is laid out horizontally, as follows:

a  b  c

d  e  f

g  h  i

j  k  l

But clients being clients, I have now been asked to change this so that the list is vertically oriented, as follows:

a  e  i

b  f  j

c  g  k

d  h  l

Unfortunately I don't know how to do this in the nice and tidy way that I've originally done it.

Can somebody please fill me in if this is possible to do with single <ul> and CSS? Or do I have to make multiple lists?

Kelley

Don't think it would be possible with just 1 ul. Do you use some backend code (like PHP for example?) – Unlovely

Its easily possible to do if you use some server scripting language. – Batey

@PeeHaa, yeah, all the back end is C#.. I guess I'll have to get my code freak on (as a nod & a wink at @Coding-Freak) – Kelley

;) you mean something like this? :D – Batey

What witchcraft is this @Coding-Freak?! – Kelley

dude, I know! ;-) It can be difficult to convey humour in text, but I did mean it. Honest!! – Kelley

Answer 1

You can't do it by only changing CSS.

Well, you can if you don't care about IE: http://caniuse.com/#search=multiple%20column

You have to compromise somewhere:

• Split the <ul> into three <ul>s manually.
• As hinted at by @PeeHaa, use server-side code to change the order that the <li>s are output (but still keep them inside one <ul>).
• Use JavaScript to reorder the <li>s. I did this using jQuery here, but it would probably make more sense to use a plugin like this: http://welcome.totheinter.net/columnizer-jquery-plugin/

Mintz

Answer 2

You don't have to use multiple lists, just some matrices math.

I took a stab at it here so as long as initially it's alphabetically ordered horizontally and row and column is known, you can transform it with jQuery.

http://jsfiddle.net/H4FPw/12/

Edit: Oh yeah, I added an id="place" attribute to the <ul>.

Silversmith

I have to say this is a beautiful algorithm. There's only one problem with it though, which is that the rowcount is hard-coded at 4. In reality, I can have any number of list items, which means any number of rows. I've tried varying the rowcount but if I do, it either fails or outputs inconsistent results. Is there anything that can be done to rectify this? Thanks :-) – Kelley

this is an excellent answer. Unfortunately, I've had to deselect it as correct in favour of @thirtydot's answer. The reason is because it actually fits my needs more specifically, which is something that I accidentally overlooked yesterday. Again, thanks. – Kelley

Answer 3

I'd use CSS3 columns or JavaScript. IDK if it's possible by CSS2.

Piercing

Answer 4

If you're doing it in PHP you can use a simple counter and %. I've managed to accomplish this in WordPress getting a list of custom taxonomies like so:

<div class="row gutters">

    <?php $taxos = get_categories ( array( 'taxonomy' => 'make' ) ); ?>

    <?php $count = 0; ?>

    <div class="col col_2">

        <ul>

            <?php foreach( $taxos as $tax ) : ?>

                <li><a href="/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li>

                <?php $count++; ?>

                <?php if( $count % 5 == 0 ) echo '</div></ul><div class="col col_2"><ul>'; ?>

            <?php endforeach; ?>

        </ul>

    </div>

</div>

You can also loop through an array and acheive the same thing. Output looks something like:

a    f
b    g
c    h
d    i
e    j

Paletot