Welcome to WebmasterWorld Guest from 54.198.69.193

Forum Moderators: not2easy

Message Too Old, No Replies

Dynamic Multi-Column Lists

     
2:16 am on Apr 30, 2009 (gmt 0)

10+ Year Member



I still consider myself a CSS newbie considering how fast it's evolving, and I've spent a few nights searching google and here to find an answer to my issue.

Basically, I have a wordpress blog with a lot of posts and I wanted to list them (just by title), in 3 columns spanning down the page.

I have learned how to do this in 1-column no sweat, but all of the examples I find on multi-column CSS pertains to static text examples...and I never get it to work with my code.

Here is the code in the php file I'm using:


<div id="list_cats">
<ul>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
</ul><br />
<div style="clear:both;"></div>
</div>

And the CSS:


#list_cats {
width: 600px;
column-width: 200px;
column-gap: 2em;
column-count: 2;
}

This only displays one column. Keep in mind, this is just one of about a half dozen variations I have tried from different sites with how-to's on the topic...and all of them have failed.

Many thanks if anyone can shed some light on this for me.

4:10 pm on Apr 30, 2009 (gmt 0)

10+ Year Member



Sorry, forgot my doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4:36 pm on Apr 30, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I'm afraid your CSS above is science fiction at this point in time.

While it seems it's in accordance with CSS3 plans: [w3.org...] , it won't buy you anything.

There are two approaches:

vertical order:

either you make 2 sections somehow while generating them (you'll need to find the "middle" in the code, and you can float the first one left, to create a first column, and put the second one next to it.

The clearing div you have in there suggests you might have tried this already. I'd suggest to rewind there and restart from that. The avenue you're on right now is a dead-end for the next many years to come (after all our visitors still use massively IE and non of them (not even IE8) has any support for anything like this.

alternatively, you could accept horizontal order:

you make the <li>s inline-blocks (or float them if that's your thing), and give them the 200px width, they'll sort themselves out in columns but the order is row based.

4:49 pm on Apr 30, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You can use proprietary code for Moz and Safari to see the effect the above code should have, and use it as enhancement just for those browsers, but like Swa says support is not what we would like it to be yet.

I think there was a javascript solution which helped make the column splits too, which you could use just for IE, but I've forgotten what it's called.. will add it in if I find it again, unless someone else adds it first

The best site I've seen for checking progress support of newer CSS, with examples, is: css3.info
the multicolumn test is: here [css3.info]

5:18 pm on Apr 30, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmm, my memory played tricks on me or somehow this changed since I looked last. I assumed only webkit (Safari & chrome) partially supported this, if gecko (Mozilla, Firefox) is in there too, indeed a javascript solution for IE would be a good idea forward.

This might be a start for "IE9.js": add CSS3 support to the stuff made in Redmond.

BTW: CSS validators still give errors for CSS3 statements (rightfully).

6:15 pm on Apr 30, 2009 (gmt 0)

10+ Year Member



While it seems it's in accordance with CSS3 plans: [w3.org...] , it won't buy you anything.

Busted - that's exactly where I was going with my latest try.

alternatively, you could accept horizontal order:

you make the <li>s inline-blocks (or float them if that's your thing), and give them the 200px width, they'll sort themselves out in columns but the order is row based.

Could you expand a bit on this for me? I'm having trouble understanding how I can take a single line php call and how CSS lays it out into multiple columns.

Again, here is my code from wordpress (I'm keeping the li tags but it doesn't have to be in a list):


<ul>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
</ul>
7:57 pm on Apr 30, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



found the script, CSS MultiColumn Script [csscripting.com]

I can't vouch for it personally and I think it could probably be optimised for IE only *if* only IE were needed - however Opera needs it too

for those that want to play or try it out..

Notes:
you have to use a <link> statement to link to the relevant CSS File, it won't work with the CSS in the document head if you're testing this way

I can confirm I ran a test with just giving IE the javascript and FireFox, Chrome, Safari all work with the CSS, (except FF doesn't do the border) - but it's no go at all for Opera So the JS would be needed for it too

here's the CSS I had in my lorem1.css file:

ul {margin: 0; padding: 0; list-style: none;}

.column {
background-color: #fff;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 8px;
}

.column {
/* the proper rules ready for future */
column-count: 3;
column-gap: 20px;
column-rule: 1px dotted #999;

/* Moz/Firefox rules */
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px dotted #999;

/* Safari & Chrome rules */
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #999;
}

The Document I tested on. I originally just used divs and paragraphs, but it worked fine on the lists too

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<link href="lorem1.css" rel="stylesheet" />
<!--[if IE]><script type="text/javascript" src="css3-multi-column.js"></script><![endif]-->
</head>
<body>
<ul class="column">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</body>
</html>

All in all if only Opera played ball too the multicolumns might very well have made a case for an enhancement!

an inline-block gallery style presentation might very well be the best CSS Only solution.. you would just style your <li>'s as inline blocks, and restrict the size of the ul to display your required number of 'columns' or blocks wide, This would mean that the li items would display left to right then down as opposed to top to bottom then across like proper columns, but maybe that's not a concern

10:06 pm on May 1, 2009 (gmt 0)

10+ Year Member



Thanks a lot Suzi for such a detailed reply - I'll dive into it and see how it goes.
10:36 pm on May 1, 2009 (gmt 0)

10+ Year Member



I looked very carefully at the link as well as your example and it doesn't work properly for me in IE and FF.

It displays only one column for the link, with the exception of the LONG links that fall outside the width. They actually do move over to the next column. So the same link just falls unto the next column, not a new link.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month