Display data in cynamic columns.... BUT...

[sallecpt]

First of all, love the purple theme!

If anyone could help me with this. I have read and tried numerous samples from other forums, but all is the same as what I have done.

I am building a small classifieds site for my church.

I wanted to display data in columns. And I have achieved that, BUT, let me scetch a short scenario.

This is what I have achieved :

PETS FOR ADOPTION CARS AND VEHICLES
--> Dogs --> Small Cars
--> Cats --> Big Cars
--> Mice
--> Reptiles
--> Hamsters
--> Monkeys
--> Other Pets

HOUSES TO LET COMMUNITY ASSISTANCE
--> Small Houses --> Old Age Homes
--> Big Houses --> Charity Assistance
--> Tree Houses

Now, look at that huge gab below 'Cars and Vehicles' . In my case, the community column has about 15 entries, and then, the next colunm below that, sits at the end of the page.

Now if there is someone who can help me to achieve the following, I would really really appreciate it

PETS FOR ADOPTION CARS AND VEHICLES
--> Dogs --> Small Cars
--> Cats --> Big Cars
--> Mice
--> Reptiles COMMUNITY ASSISTANCE
--> Hamsters --> Old Age Homes
--> Monkeys --> Charity Assistance
--> Other Pets --> Pet Assistance
--> Other animal assistance
HOUSES TO LET --> Community Projects
--> Small Houses --> Other Projects
--> Big Houses
--> Tree Houses CHURCH VACANCIES
--> General church vacancies

Below is the code that I currently use

<?php
if (!function_exists("GetSQLValueString")) { require_once ($FolderFunctions.'getvaluestring.php'); } 
mysql_select_db($database_classi, $classi);
$query_docategories = "SELECT catID, Title, ParentCat, `Description`, `Sort` FROM category WHERE ParentCat = '0' ORDER BY Sort ASC";
$docategories = mysql_query($query_docategories, $classi) or die(mysql_error());
$row_docategories = mysql_fetch_assoc($docategories);
$totalRows_docategories = mysql_num_rows($docategories);
?>
<h1>
	<?php echo $lanClassifiedAds; ?>
</h1>
<div class="homelist">
	<table border="0" width="100%">
		<?php
		//set 3 to 4 of you want 4 columns. Set it to 5 if you want 5, etc
		$numcols = 4; // how many columns to display
		$numcolsprinted = 0; // no of columns so far

		// get the results to be displayed
		mysql_select_db($database_classi, $classi);
		$query = "SELECT * FROM category WHERE ParentCat = '0'";
		$mysql_result = mysql_query($query, $classi);

		// get each row
		while($myrow = mysql_fetch_row($mysql_result))
		{ ?>

			<?php
			$in= $myrow[3].'<br>';

			if ($numcolsprinted == $numcols) {
			print "</tr>\n<tr>\n";
			$numcolsprinted = 0;
		}

		// output row from database
		echo "<td class='valigntop'><div class='homelistbottompad'><div class='homepagecategories'>$in</div>"; ?>

		<?php
		mysql_select_db($database_classi, $classi);
		$query_dosubcategories = "SELECT catID, Title, ParentCat, `Description`, `Sort` FROM category WHERE ParentCat = '".$myrow[0]."' ORDER BY Sort ASC";
		$dosubcategories = mysql_query($query_dosubcategories, $classi) or die(mysql_error());
		$row_dosubcategories = mysql_fetch_assoc($dosubcategories);
		$totalRows_dosubcategories = mysql_num_rows($dosubcategories);
		?>          
		<?php do { ?>
			<div class="subpagecategories">&#8226; <a href="<?php echo 'ads-List_'.$row_dosubcategories['catID']; ?>.html" class="list" title="<?php echo $row_dosubcategories['Title']; ?> | <?php echo $row_meta['SiteTitle']; ?> - <?php echo $row_meta['SiteSlogan']; ?>"><?php echo			 $row_dosubcategories['Title']; ?></a> 
			<?php
			mysql_select_db($database_classi, $classi);
			$query_getcount = "SELECT itemID,CatID FROM item WHERE catID = '".$row_dosubcategories['catID']."' AND Status='Active'";
			$getcount = mysql_query($query_getcount, $classi) or die(mysql_error());
			$row_getcount = mysql_fetch_assoc($getcount);
			$totalRows_getcount = mysql_num_rows($getcount);
			echo '('.$totalRows_getcount.')'; ?></div>
		<?php } while ($row_dosubcategories = mysql_fetch_assoc($dosubcategories)); ?>

		<?php echo "</td>\n";

		// bump up row counter
		$numcolsprinted++;

		} // end while loop

		$colstobalance = $numcols - $numcolsprinted;
		for ($i=1; $i<=$colstobalance; $i++) {

		}
		print "<TD></div></TD>\n";
		?>
	</table>
</div>

[sallecpt]

okay I see that my post does not display the way I typed it.

Basically, if I have 6 columns dynamically created from mysql, displaying 3 columns in a line, I would like list column 4 almost directly underneath column 1, and column 5 underneath column 2 and so forth. Currently, column 4,5 and 6 displays underneath column 1 , 2 and three, but only in the next line, so if column 1 has 15 entries, and column 2 and 3 only has , lets say, 5 entries, there would be a huge gab between column 2 and 5, as well as between column 3 and 6. Instead, I would like to have the next line of columns directly below the top line's columns. I will try to search for an example.

Thanx a million

[diafol]

Tell you what cowboy - your love for purple makes me sick. You must be some real bad flavour of sinner, pilgrim.

Anyway, back to your question. If you could mock-up an image of what you'd like and post it here, perhaps that would help.

(If you don't know how to do this: you need to choose 'Use Advanced Editor' - choose the image button and upload the image. Close the popup and go to the attachment dropdown - choose the uploaded image and the attachment tag will appear in the editor window. Apologies if this is old news to ya.)

[sallecpt]

heres a sample of what I'd like, but not the perfect example, but something similar to it.

http://www.gumtree.com/

and @ ardav, thanx man, I'll try that in a sec

[sallecpt]

okay, here is what I have, and what I want ;-)

[diafol]

Ah, beautiful - a picture ... 1000 words, and all that. I'm sure I or somebody else will get back to you soon.

[sallecpt]

hey. Thanx.

I'll really appreciate it.

I'm trying to "repeat" tables, instead of <tr><td>data</td></tr>

Basically displaying x amount of tables side by side, but I dont get my head around it.

Thanx for getting back to me.

[diafol]

OK - there are quite a few different ways you can go about this. Using tables could be used - a single row with three columns. Place 2 divs containing a category each in each column. While this would work, using tables for layout is deigned EVIL, so perhaps it would be better to concentrate on a pure css solution.

In order to stop adjacent divs from wrapping, we need to create 3 columns (3 wrapper divs). Why? well a situation could arise where the last div in the central column is lower down than the last div in the first column. This would cause the central div to move below the recognised first column. There are ways to prevent this, but it may be too long winded.

So create 3 wrapper divs:

<div>
...content...
</div>  
<div>
...content...
</div>  
<div>
...content...
</div>

You can use 6 x mysql calls to get your content. I'll do one, to give you a taste:

$part1 = "<h3>Pets for adoption</h3>";
$r = mysql_query(...sql...);
if(mysql_num_rows($r) > 0){
  $part1 .="<ul>";
  while($d = mysql_fetch_array($r)){
    $part1 .= "<li><a href="...from $d...">...from $d...</a></li>";
  }
  $part1 .="</ul>";
}

Do this for each category - $part1, $part2 etc. BTW - this could be done in a few ways, but this is probably the clearest although it may be a little more verbose.

<div id="colwrapper">
<div>
<?php echo $part1 . $part2;?>
</div>  
<div>
<?php echo $part3 . $part4;?>
</div>  
<div>
<?php echo $part5 . $part6;?>
</div>
</div>

You can now do your css:

#colwrapper{
  width: ... /*pixel for fixed width or % for fluid. Be careful with fluid - you should set a min-width and max-width to avoid silly sizes*/
}
#colwrapper div{
  width: 33%; /*or use fixed pixel widths. You may need to reset margins*/
}
#colwrapper h3{
  color: red;
  font-size: 14px;
}
#colwrapper ul{
  color: black;
}

Off the top of my head, so it may not work, but I don't think it's far off.

[sallecpt]

i get the idea.

thanx a lot. I'll try it and let you know tomorrow morning.

midnight where I am :-(

thanx again