[Plugin: Top 10] Columnizing the manually placed list

Ajay: What do you think of adding this to the documentation?

To columnize the Top 10 page you can add the following type of CSS in the end of your theme’s style.css:

div#tptn_related_daily li.top10 {
  float:left;
  width:200px;
  padding:0 2.5em 1em 0;
  vertical-align:top;
  text-align: left;
}

This shows the items in two columns on the Photog theme. Works like a charm for having only the title and a max 100 x 80 thumbnail below it. When setting width to be 135px or less the items flow into three or more columns.

If you’re getting items that seem to hang on empty space, a previous item has a higher height than the one after it. In this example item 1 has at least one pixel more height than 2, so it looks like 3 is hanging on empty space when it’s really hanging to those one or more pixels of item 1:

1. 2.
   3.
4. 5.

The solution is to add a line of height:100px; to the CSS and to increase the number from 100 until the items align correctly (or decrease until it stops working). The aim is that all items’ heights will be as large as the biggest one’s but not any larger. If the items overlap then the height is too small. If the spacing between the items gets too big, you may try reducing the number on the padding line that says currently 2.5em.

Ajay: To prevent the above problem, we could add an option to cut the title or excerpt at a specified number of characters. If a span tag or similar is allowed inside main content area of a page, we could add that and give users a CSS solution or add support for dotdotdot or threedots to do this by jQuery browser-side. These have the advantage of adjusting when the browser window is resized.

http://ww.wp.xz.cn/extend/plugins/top-10/