CODEWITHSUNDEEP
phprow
Nikola Nastevski
Nikola Nastevski

Reputation: 937

Order data in three columns instead of one

At the moment, with the code from below, I have the data shown like this:

http://img27.imageshack.us/img27/8083/29769986.jpg

but I want it to be shown like this:

http://img259.imageshack.us/img259/3233/24033830.jpg

The code for the data shown, as it is on the first image, is:

<div id="content">
  <?php foreach ($categories as $category) { ?>
  <div class="manufacturer-list">
    <div class="manufacturer-heading"><?php echo $category['name']; ?><a id="<?php echo $category['name']; ?>"></a></div>
    <div class="manufacturer-content">
      <?php if ($category['manufacturer']) { ?>
      <?php for ($i = 0; $i < count($category['manufacturer']);) { ?>
      <ul>
        <?php $j = $i + ceil(count($category['manufacturer']) / 4); ?>
        <?php for (; $i < $j; $i++) { ?>
        <?php if (isset($category['manufacturer'][$i])) { ?>
        <li><a href="<?php echo $category['manufacturer'][$i]['href']; ?>"><?php echo $category['manufacturer'][$i]['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul>
      <?php } ?>
      <?php } ?>
    </div>
  </div>
  <?php } ?>
</div>

I order to get the "Hewlett-Packard" text under the "HTC" text, I've changed the "/ 4" into "/ 1", but I have no idea how to make the data to be shown into three columns (like on the second picture), instead of one, as it is now (as shown on the first picture).

Thanks in advance.

EDIT: What I actually need, is to count and to do the calculation on this code:

<?php foreach ($categories as $category) { ?>
.
.
.
<?php } ?>

So it needs to count the number of categoris, do the calculations, and present the code between into three columns.

Upvotes: 1

Views: 968

Answers (3)

Paul
Paul

Reputation: 9022

Try this one.

<div id="content">
<div class="content-column">
  <?php 
    $cols = 3; // Change to columns needed.
    $catcount = count($categories);
    $catpercol = ceil($catcount / $cols);
    $c = 0;
    foreach ($categories as $category) { 
      if ( $c == $catpercol ) {
        $c = 0;
        print "</div><div class='content-column'>";
      }
 ?>
  <div class="manufacturer-list">
    <div class="manufacturer-heading"><?php echo $category['name']; ?><a id="<?php echo $category['name']; ?>"></a></div>
    <div class="manufacturer-content">
      <?php if ($category['manufacturer']) { ?>
      <?php for ($i = 0; $i < count($category['manufacturer']);) { ?>
      <ul>
        <?php $j = $i + ceil(count($category['manufacturer']) / 4); ?>
        <?php for (; $i < $j; $i++) { ?>
        <?php if (isset($category['manufacturer'][$i])) { ?>
        <li><a href="<?php echo $category['manufacturer'][$i]['href']; ?>"><?php echo $category['manufacturer'][$i]['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul>
      <?php } ?>
      <?php } ?>
    </div>
  </div>
  <?php $c++; } ?>
</div>
</div>

Add .content-column { float: left; width: 33.33333%; } to your CSS.

Details: $cols = 3; enables you to set the desired number of columns (note: you might need to change CSS accordingly).

$catcount = count($categories); gives you the total number of categories about to be rendered.

$catpercol = ceil($catcount / $cols); divides that total number evenly into the required number of columns with the last column having eventually less items than the others.

$c = 0; is your counter. It increases at the end of the outer foreach loop.

Within the loop, $cis checked if it matches the $catpercol number and if so, the current parent div is closed and a new one created. You end up with as many parent divs as you need columns. Just add appropiate CSS to make them appear besides each other.

Upvotes: 1

miro
miro

Reputation: 780

I think it is possible to create three column layout via html/css and without any change of your PHP code. Just use float:left; width: 33%. You can also use absolute value for width property because of margins and borders.

Upvotes: 0

jogesh_pi
jogesh_pi

Reputation: 9782

understand the following code that according to your requirement, the code just give the hint to achieve that you want according to your given screen shoot http://img259.imageshack.us/img259/3233/24033830.jpg

echo "<table>";
echo "<tr>";

$i = 1;

do{

  // column range
  $range = 3;

  echo "<td>" . $i;

  if( $i % $range == 0 ){
  echo "</tr>";
  echo "<tr>";
  }

  echo "</td>";

  $i++;

}while( $i <= 10 );

echo "</tr>";
echo "</table>";

Hope this will help you

Upvotes: 0

Related Questions