4

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?

DaveDev
  • 41,155
  • 72
  • 223
  • 385

4 Answers4

5

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>.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
beeflavor
  • 653
  • 1
  • 7
  • 13
  • 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 :-) – DaveDev Jun 03 '11 at 09:50
  • 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. – DaveDev Jun 03 '11 at 11:22
2

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/
Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
0

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
Romes
  • 3,088
  • 5
  • 37
  • 52
0

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

RobertO
  • 2,655
  • 1
  • 20
  • 18