Jump to content

3 Columns achieved but I need some help, please


janniesekind

Recommended Posts

Hey everyone.

 

I am totally numb.

 

I've posted this on daniweb.com but I suppose no one is able to help em with this.

 

Maybe it is impossible.

 

I dont care how I achieve this, via css, or tables, as long as I get it.

 

I have a small classifieds site for a local church.

 

Categories and sub categories are created from the admin section. So the page needs to be created dynamicly.

 

The result is exactly what I want, except for the huge gaps. This is an html sample of what I have : (please bear with me, please)

 

###########################################################################################

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30%" valign="top">Category Title<br />
    --> Sub title/link<br />
    --> Sub title/link<br />
    --> Sub title/link<br />
    --> Sub title/link</td>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link</td>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br /></td>
  </tr>
  <tr>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link <br />
--> Sub title/link<br />
--> Sub title/link</td>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link</td>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link</td>
  </tr>
  <tr>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link</td>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link<br />
--> Sub title/link</td>
    <td width="30%" valign="top">Category Title<br />
--> Sub title/link<br />
--> Sub title/link</td>
  </tr>
  </table>

 

###########################################################################################

 

 

 

this is what I want

 

 

 

###########################################################################################

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30%" valign="top">
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link</td>
      </tr>
    </table>
    <br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link <br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link <br>
          --> Sub Title / Link</td>
      </tr>
    </table>
    <br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
        </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link <br>
          --> Sub Title / Link</td>
        </tr>
    </table></p></td>
    <td width="30%" valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link</td>
      </tr>
    </table>
    <br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link</td>
      </tr>
    </table>
    <br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link</td>
      </tr>
    </table></td>
    <td width="30%" valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link</td>
      </tr>
    </table>
    <br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link</td>
      </tr>
    </table>
    <br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>Category Title</td>
      </tr>
      <tr>
        <td>--> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link<br>
          --> Sub Title / Link</td>
      </tr>
    </table></td>
  </tr>
</table>

 

###########################################################################################

 

and this is my php code to achieve what I currently have

 

###########################################################################################

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

###########################################################################################

 

 

[attachment deleted by admin]

I think your over complicating the code.  I would do this for example (use for a basic structure; modify as needed):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
html, body{
margin:0;
padding:0;
}
#container{
margin:0 auto; /* Too Center the Div */
width:960px; /* For Example */
}
#container div{
float:left;
display:inline;
width:300px;  /* Even Columns while compensating for padding */
padding:10px;	
}
</style>
<div id="container">
    <div>
    	<!--New Query-->
    	<h1>Category Title</h1>
        <ul>
        	<li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
        
        <!--New Query-->
        <h1>Category Title</h1>
        <ul>
        	<li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>
    <div>
    	<!--New Query-->
    	<h1>Category Title</h1>
        <ul>
        	<li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>
    <div>
    	<!--New Query-->
    	<h1>Category Title</h1>
        <ul>
        	<li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
        <!--New Query-->
    	<h1>Category Title</h1>
        <ul>
        	<li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>
</div>
</body>
</html>

 

The problem you are running into is box level elements.  You technically only need 3 columns and 1 row if you were going to do a table layout.  I would use the above as a reference and swap out as needed.

hey man

 

thank you so so so so so much.

 

Its working now. its 95% of what I wanted.

 

But its working just fine.

 

Thank you again. I cannot express how drained I felt because of frustration and no sleep.

 

Thanx again.

 

You are the first one to assist me in 5 hard days.

 

thumbs up for you

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.