Page 1 of 1

Auto-Columns (possible?)

Posted: Sat Jul 04, 2009 7:44 pm
by Skara
I'm heavily modding phpbb and I'm stuck at something that should be simple.
I need the forum list to display in columns.
As in:

Code: Select all

f1  f3
f2  f4
Problem is.. the existing loop treats categories and forums as the same thing, so there is no easy way to divvy up each section. Add on top of that, a template is used that loops through each row.

At this point, I'm here:
http://www.alistapart.com/articles/multicolumnlists/

This is almost what I want (copied from ^):

Code: Select all

<div class="wrapper">
  <ol
    ><li><a href="#">Aloe</a></li
    ><li><a href="#">Bergamot</a></li
    ...
    ><li><a href="#">Oregano</a></li
    ><li><a href="#">Pennyroyal</a></li
  ></ol>
  <br />
</div><!-- .wrapper -->
 
The essential CSS is brief:
  /* allow room for 3 columns */
  ol
  {
    width: 30em;
  }
 
  /* float & allow room for the widest item */
  ol li
  {
    float: left;
    width: 10em;
  }
 
  /* stop the float */
  br
  {
    clear: left;
  }
 
  /* separate the list from subsequent markup */
  div.wrapper
  {
    margin-bottom: 1em;
  }
 
However, that sorts things as so:

Code: Select all

f1  f2  f3  f4
f5  f6  f7  f8
f9  f10
whereas I need things like this:

Code: Select all

f1  f4  f7  f10
f2  f5  f8
f3  f6  f9
I'm at a complete loss.

To summarize, I need to create vertical columns auto-magically without any kind of breaking element--they need to "know" where to go.
Is this possible?

Re: Auto-Columns (possible?)

Posted: Fri Jul 24, 2009 6:27 am
by maneetpuri
HI,

You may use the below code to get the desired result.

-----------------------------------------------------------------
-----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Method 5: Wrapping a single list using absolute positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@import "demo.css";
</style>
<style type="text/css">
<!--
/*==============================
style the list
==============================*/
div.listwrap {
/* provide a point of reference for
absolutely-positioned descendants */
position: relative;
/* prevent subsequent page elements
from rising up into the div */
height: 7.2em;
/* separate from subsequent content */
margin-bottom: 1em;
padding: 0;
}
ol li {
/* position each item absolutely */
position: absolute;
/* Stipulate the height of each item so that
vertical return = items * height */
line-height: 1.2em;
/* Clear the default margins & padding
so we can style the list from scratch */
margin: 0;
padding: 0;
}
/* horizontal position of each column */
ol li.aloe, ol li.berg, ol li.cale, ol li.dami, ol li.elde {
margin-left: 0em;
}
ol li.feve, ol li.ging, ol li.hops, ol li.iris, ol li.juni {
margin-left: 10em;
}
ol li.kava, ol li.lave, ol li.marj, ol li.nutm, ol li.oreg, ol li.penn {
margin-left: 20em;
}
/* vertical position of each row */
ol li.aloe, ol li.feve, ol li.kava {
top: 0em;
}
ol li.berg, ol li.ging, ol li.lave {
top: 1.2em;
}
ol li.cale, ol li.hops, ol li.marj {
top: 2.4em;
}
ol li.dami, ol li.iris, ol li.nutm {
top: 3.6em;
}
ol li.elde, ol li.juni, ol li.oreg {
top: 4.8em;
}
ol li.penn {
top: 6.0em;
}
/* anchor styling */
ol li a {
display: block;
width: 7em;
text-decoration: none;
}
ol li a:hover {
color: #FFF; /* white */
background-color: #A52A2A; /* brown */
}
-->
</style>
</head>
<body>
<ol>
<li class="aloe"><a href="#">Aloe</a></li>
<li class="berg"><a href="#">Bergamot</a></li>
<li class="cale"><a href="#">Calendula</a></li>
<li class="dami"><a href="#">Damiana</a></li>
<li class="elde"><a href="#">Elderflower</a></li>
<li class="feve"><a href="#">Feverfew</a></li>
<li class="ging"><a href="#">Ginger</a></li>
<li class="hops"><a href="#">Hops</a></li>
<li class="iris"><a href="#">Iris</a></li>
<li class="juni"><a href="#">Juniper</a></li>
<li class="kava"><a href="#">Kava kava</a></li>
<li class="lave"><a href="#">Lavender</a></li>
<li class="marj"><a href="#">Marjoram</a></li>
<li class="nutm"><a href="#">Nutmeg</a></li>
<li class="oreg"><a href="#">Oregano</a></li>
<li class="penn"><a href="#">Pennyroyal</a></li>
</ol>
<h2>
<!-- .block -->
</h2>
</body>
</html>
----------------------------------------------------------------------------------
--------------------------------------------------------------------------XXX

Hope this helps,

Cheers