Faq split in columns

Hi,

Here is another way of splitting the content into two columns that hopefully is easier to follow:

<table border="1">
<tr>
<td valign="top">

<?php $counter = 1; ?>
<?php foreach (faqRecords as $record): ?>
<?php if($counter <= 4) : ?>
<b> <?php echo $record['question'] ?></b><br/>
<?php echo $record['answer'] ?><br/><br />
<?php endif; ?>
<?php $counter++ ?>
<?php endforeach ?>

</td>
<td valign="top">

<!-- ADD CONTENT HERE -->
<?php $counter = 1; ?>
<?php foreach (faqRecords as $record): ?>
<?php if($counter >= 5) : ?>
<b> <?php echo $record['question'] ?></b><br/>
<?php echo $record['answer'] ?><br/><br />
<?php endif; ?>
<?php $counter++ ?>
<?php endforeach ?>

</td>
</tr>
</table>

The first column, you are setting a counter and only outputting records up to four using the if statement ($counter <= 4).

In the second column, you are setting a counter and only outputting records equal and greater than five using the if statement ($counter >= 5).

There is also this comment in the second column (<!-- ADD CONTENT HERE --> ) where you can add the HTML and link for your newsletter.

You can also limit the number of records that display in the second column by changing the if statement to this:
<?php if($counter >= 5 && $counter <= 8) : ?>

This will then only output 4 records in the second column.

Give this a try and let me know how it works out. :)

Its perfect Damon ............its wonderful thank you thank you !!!!!!!!

YOU GUYS ARE THE BEST I JUST LOVE WORKING WITH YOU! [cool]

Like I said this worked great
..... while i was building it but now that I am adding more articles I find myself have to balance the columns.

There is no way to may the columns equal in length is their?

With like put 50% of the info here and the other 50% in the next column and i am not talking articles I am talking equally spaced text on the page. I like my columns to be some what the same length and of course each article varies in size.

Hi,

There is no easy way to go about this since, as you said, it totally dependent on the content. And if you did find a way to balance it more closely, you would end up displaying your articles based on their length and on no other criteria.

Hope this helps.

Thanks I thought not but it never hurts to ask.



PG

Hi pg,

Here’s a recipe from my CMSB Cookbook http://www.thecmsbcookbook.com about automatically setting up multiple columns that might give you some ideas.

FORMATTING TEXT TO AUTOMATICALLY FLOW EVENLY INTO MULTIPLE COLUMNS

One of the things that I’ve wanted to be able to do was to be able to make long blocks of text automatically flow evenly into multiple columns.

Here’s one approach, that uses a combination of CSS and Javascript to handle the discrepancies in the current implementation of the “proposed” CSS3 multi column rules.

It’s based on the examples shown in these articles: http://www.alistapart.com/articles/css3multicolumn/ and http://www.cvwdesign.com/txp/article/360/

So that I could follow the examples in the articles, I created:

A .css style sheet called multi-column.css
A Javascript file called css3-multi-column.js
And a sample page called column-sample.php

You can download the CSS, Javascript and sample files from

http://www.thecmsbcookbook.com/downloads/css3-multi-column.zip

Every implementation will be slightly different so I’d recommend playing with the different possibilities listed in the article and in the proposed spec to get your page looking like you want it to.

Because of some conflict issues with the Javascript, you may get css conflicts if you use more than one set of column classes in the same external css file, EVEN IF YOU NAME THE CLASSES DIFFERENTLY.

So either put the column formatting in the head your web page or create a totally different copy of the external .css file for each pages that uses different parameters.

http://www.w3.org/TR/css3-multicol

Note that in this example, the Javascript is called only for IE, and the css style sheet contains -moz and -webkit- prefixes for Mozilla and Safari.

That said, Here’s the pretty simple code that I used:

In the head section of my 2 column viewer (column sample.php), I called the javascript and CSS file with:

<link href="multi-column.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script type="text/javascript" src="css3-multi-column.js"></script>
<![endif]-->

Then in the body, where I wanted to display the 2 column text, I enclosed it in a <div> tag. You can display multiple fields in the same <div> and they’ll all flow into neat columns.

<div class="column" align="left">
<?php echo $yourRecord['your_field'] ?><br /><br/><hr width="200">
</div>

Since first writing this, I’ve been able to use the technique to create automatic flow in some pretty complex viewers, so experiment and enjoy.

Best,

Jerry Kornbluth