Forum Moderators: not2easy
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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.
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]
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).
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>
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
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.
