Display result in columns CSS tableless

ghogilee · Apr 7, 2009

Hi all,
I found wonderfull script here on thread: thread434-1489969

and the code is:

Code:

<?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;
?>

But I need that result is not sorted like:

result1 result2 result3
result4 result5 result6

But like this:

result1 result3 result5
result2 result4 result6

Is it possible to achieve this using the above script?
Thanx!

jpadie · Apr 7, 2009

the script looks familiar.

basically anything is possible like this. the script below is pretty 'dumb' in that it is not sensitive to how many rows you have in your recordset. it is fixed to two output rows in each column and therefore you may end up having a very large number of columns. be warned ...

this solution is pretty much identical to the one posted above save that there is a second call to mysql_fetch_assoc within the loop and the addition of a wrapper div around each column. the wrapper div is then floated and the floats are removed from the internal elements.

i'm typing this straight into the code box and have no data to test with, so excuse any syntax boobs etc.

Code:

<?php
$sql = "Select id, imgName, imgDescription from imageTable";

//perform the query
$result = mysql_query($sql) or die(mysql_error());


//prepare the css
$css = <<<HTML
<style>
.contentHolder {width:85%; margin: 0 auto; text-align:center;}
.column {width: 24%; padding-right: 5px; float: left;}
.innerHolder {margin-right: 1px;}
.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="column">
	    <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;
	$row = mysql_fetch_assoc($result);
	if (!$row){
		$output .= "</div>"; //no more results
	} else {
		$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>
	</div> !--- close column 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;
?>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Display result in columns CSS tableless

ghogilee

Technical User

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor