Page 1 of 1

Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 9:20 am
by ghogilee
Hi all,
I've found some script to display data in 4 columns using css but the problem is output.

I want to output data like

result1 result3 result5 result7
result2 result4 result6 result8
etc...

instead of
result1 result2 result3 result4
result5 result6 result7 result8

The code is:

Code: Select all

<?php
 
$columns = 4;
$sql = "Select id, imgName, imgDescription from imageTable";
 
//perform the query
$result = mysql_query($sql) or die(mysql_error());
 
//prepare the css
$column_css = (100/$columns) - 1;
$css = <<<HTML
<style>
.contentHolder {width:85%; margin: 0 auto; text-align:center;}
.innerHolder {width: $column_css; margin-right: 1px; float:left;}
.clear {line-height: 0.5px; visibility: hidden; clear:both;}
}
</style>
 
HTML;
//prepare the output
$output = <<<HTML
<div id="contentHolder">
 
HTML;
//iterate the recordset
while ($row = mysql_fetch_assoc($result)){
    $output .= <<<HTML
    <div class="innerHolder">
        <div class="imageHolder">
            <img     src="images/{$row['imgName']}"
                    alt="{$row['imgDescription']}"
                    title="{$row['imgDescription']}" />
        </div>
        <div class="captionHolder">
            {$row['imgDescription']}
        </div>
    </div>
    
HTML;
}
 
//finish the output
$output .= <<<HTML
    <div class="clear">&nbsp;</div><!--- clear the floats for box model issues --->
</div> <!--- finish the contentHolder div --->
 
HTML;
?>
Thanx.

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 9:44 am
by jayshields
Well you could mess with your CSS to change the positioning, or you could run a for loop to dump the data in the correct sequence (if I understand you right and you always want 2 rows).

Code: Select all

 
$data = mysql_fetch_assoc($result);
$maxrows = 2;
 
for($x = 0; $x < count($data); $x+2)
{
  //output odd row data
}
 
for($x = 1; $x < count($data); $x+2)
{
  //output even row data
}
 

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 10:55 am
by ghogilee
Thank you, but I do not want to maintain just two rows. I want to keep vertical output like in my example but in 4 columns. This code in my post gives me horizontal structure.
For example array from my result set is letters from a-p. Right now i got this one:
a, b, c, d,
e, f, g, h,
i, j, k, l,
m, n, o, p
....
....

But I want display like this:
a e i m
b f j n
c g k o
d h l p
... etc

I hope that is clear now :).

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 11:34 am
by jayshields
Something like this:

Code: Select all

$rows = mysql_fetch_assoc($result);
$cols = 4;
 
for($x = 0; $x < ceil(count($rows) / $cols); $x++)
{
  for($y = 0; $y < $cols; $y++)
  {
    echo $rows[($y * $cols) + $x]['whatever'];
  }
}

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 12:03 pm
by ghogilee
Nope.. :cry: If I understand you right, final output would be:

Code: Select all

$result = $db->select("SELECT * FROM something"); //I use database class 
$rows = mysql_fetch_assoc($result);
$cols = 4;
 
for($x = 0; $x < ceil(count($rows) / $cols); $x++)
{
  for($y = 0; $y < $cols; $y++)
  {
    echo '<div class="column">' . $rows[($y * $cols) + $x]['whatever'] . </div>'; //column width i.e. 25%
  }
}
 
But, your code displays nothing 8O .. Not even error....

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 5:31 pm
by jayshields
I still haven't tested it, but nothing looks obviously wrong to me. Have you got a field named 'whatever'?

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 5:38 pm
by ghogilee
Yes m8 :) I've changed name of the field.. But I'm affraid that I must leave this approach and get back to simple tables even though I don't like them :(.. It's really confusing... And on the internet there's no such solutions.. It's possible somehow, but for me now it's mission impossible :D

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 5:57 pm
by jayshields
OK I tested it out for you, I made a little error.I was multiplying the array index by the number of columns rather than the number of rows - I was almost there!

Code: Select all

<?php
 
$rows = 
array(
        array('name' => 'fred'),
        array('name' => 'bill'),
        array('name' => 'jon'),
        array('name' => 'opsdf'),
        array('name' => 'f3ff'),
        array('name' => 'cvx'),
        array('name' => 'fghg'),
        array('name' => 'asas')
);
 
$col_count = 4;
$row_count = ceil(count($rows) / $col_count);
 
echo '<table>';
 
for($x = 0; $x < $row_count; $x++)
{
    echo '<tr>';
 
    for($y = 0; $y < $col_count; $y++)
    {
        echo '<td>';
        echo $rows[($y * $row_count) + $x]['name'];
        echo '</td>';
    }
 
    echo '</tr>';
}
 
echo '</table>';
 
?>
On a side note, don't expect everything to be done for you like this. Today was an exception in that I am quite bored and was intrigued by your problem.

Re: Display result from MySQL in columns using CSS

Posted: Tue Apr 07, 2009 6:20 pm
by ghogilee
Thank you very much for this, and I really didn't expect every part of code from you :). I gave example in my first post to explain better what is my problem. And my problem was displaying the result tableless (with DIV's), but ok :). Someone will need this code. And again thank you.

Re: Display result from MySQL in columns using CSS

Posted: Wed Apr 08, 2009 4:18 am
by jayshields
Well I only used tables for debugging purposes. The point of the script was to output data like that so it was compatible with your current CSS set up. I suggested from the start that you should leave your PHP code the same but just change the CSS so that the positioning is altered.