[RESOLVED] HTML formatting in while loop.

pulp25

I've been trying to troubleshoot this all day. Arg! 🙂

I have a while loop which outputs images, everything works great, but my html formatting output is slightly off (yes I'm a newbie). The first line looks perfect, but the second line drops to the middle of the page instead of right below the first line. Should look like this:

xxxx

xxxx

but looks like this:
xxxx

xxxx

Here is the code:

if (isset($_GET['aid'])) {
	$query = "SELECT * FROM category, product WHERE category.category_id = product.category_id  AND category.category_name='Fish' AND product.category_id = {$_GET['aid']} ORDER BY product.item_name";
} else {
	$query = "SELECT * FROM category, product WHERE category.category_id = product.category_id AND category.category_name='Fish' ORDER BY category.category_name ASC, product.item_name ASC";
}

echo '<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="801" link="#ffffff" height="651" border="0" cellpadding="0" cellspacing="0"  align="center" bgcolor ="#fffff">

	<td rowspan="6">
		<img src="images/links_01.jpg" width="113" height="651" alt=""></td>


';

// Display all the URLs.



$rowNum = 0;
$result = mysql_query ($query);
//echo "<table><tr>";
while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {
  if($rowNum > 3)
  {
    $rowNum = 0;
    echo "<tr>";
  }
  //Display each record.
  echo "<td bgcolor='#ffffff' rowspan='2' colspan='0' border='0' width='691' height='154' valign='top' align='left'><a href='view_print.php?pid=".$row['product_id']."'><img src='uploads/".$row['image_name']."' alt='".$row['item_name']."'></a><br /><div align='left'>\$".$row['price']."</div></td>";

  $rowNum++;
}

echo '</tr></table>';

I believe the problem is my while statement is not recognizing that I have 6 rows in my side column which is <td rowspan="6"><img src="images/links_01.jpg" width="113" height="651" alt=""></td>

If I'm not mistaken this needs to be in the while statement to be recognized. Is this correct? If so what is the proper syntax to do this?

Please let me know if you need any other info. Thank you so much!

leatherback

Hi,
You seem to be missing the closing </tr> in your loops

while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {
  if($rowNum > 3)
  {
    $rowNum = 0;
    echo "</tr><tr>";
  }
  //Display each record.
  echo "
<td bgcolor='#ffffff' rowspan='2' colspan='0' border='0' width='691' height='154' valign='top' align='left'>
  <a href='view_print.php?pid=".$row['product_id']."'> 
    <img src='uploads/".$row['image_name']."' alt='".$row['item_name']."'>
  </a><br />
  <div align='left'>\$".$row['price']."</div>
</td>";

  $rowNum++;
}

Please observe that htis approach only works well if you have a max of 6 (rowspan) * 3 (Cols) = 18 records in your database. If less, you will have to fill the table structure with the missing cells. If more you run out of your rowspan space.
Edit: You might want to consider using stylesheets for the table formatting..

pulp25

Thanks for the response leatherback. I tried your suggestion on ending the rows and it didn't do anything. It just doesn't seem to be recognizing that I have multiple rows in my formatting and therefore assumes I want my second row right in the middle of the page instead of right below the previous row. As you suggested I'm going to try to use a stylesheet and see if that will help my train of thought any.

pulp25

I started looking at some CSS. It looks very promising; however, I've mostly used regular tables up until now. I don't want to complicate things more in my mind until I have this figured out, then later I will convert this into CSS. If anyone has any ideas on how to solve this problem, please post. 😕

leatherback

Hi Pulp,

Most likely there is a logical error somewhere in the code.

Easiest way to decode is probably by looking at the HTML the code produces. That will show you at which part of the output your code misses the point ;-).
Feel free to post the produced code for the table here to have a look at.

The CSS part should be realized at the same time as the php code, as you will have to output the proper class and ID identifiers when producing the table. (Mind you: There are a lot of different streams in using CSS for display formatting. One common stream of thought is that tables should not be used for layout; If you use CSS classes for it, you have more options to redesign your site without actually changin the code.. However, don't go overboard trying to redo things, as some things, especially positioning and sizes, still are wobbly in CSS across browsers)

pulp25

Thanks Leatherback. I hate to be an inconvenience, I really appreciate the help. I've been working on this all day again. I just cannot seem to troubleshoot this one out. Below I have posted the minor changes I've made to the code. I've made all borders='1' and have changed the problem cells to pink.
The actual page can be viewed here:

http://www.bumbleberrygifts.com/system/13/browse_category.php

I probably should have posted this earlier but I'm also including the header and footer.

Header:

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Bumbleberrymaincenteredflat.psd) -->
<table id="Table_01" width="801" height="188" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td colspan="18">
			<img src="images/home.jpg" width="801" height="140" alt=""></td>
	</tr>
	<tr>
		<td colspan="14">
			<img src="images/blank_01.jpg" width="579" height="34" alt=""></td>
		<td colspan="2">
			<a href = "http://www.bumbleberrygifts.com/system/13/view_cart.php"><img src="images/cart.jpg" width="75" height="34" border="0" alt=""></a></td>
		<td>
			<img src="images/about.jpg" width="66" height="34" alt=""></td>
		<td>
			<img src="images/contact.jpg" width="81" height="34" alt=""></td>
	</tr>
	<tr>
		<td colspan="18">
			<img src="images/blank_02.jpg" width="801" height="14" alt=""></td>
	</tr>




</body>
</html>

Middle:

include_once ('header.html');

// Are we looking at a particular artist?
if (isset($_GET['aid'])) {
	$query = "SELECT * FROM category, product WHERE category.category_id = product.category_id  AND category.category_name='Fish' AND product.category_id = {$_GET['aid']} ORDER BY product.item_name";
} else {
	$query = "SELECT * FROM category, product WHERE category.category_id = product.category_id AND category.category_name='Fish' ORDER BY category.category_name ASC, product.item_name ASC";
}

echo '<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="801" link="#ffffff" height="651" border="1" cellpadding="0" cellspacing="0"  align="center" bgcolor ="#fffff">

	<tr><td rowspan="1" border="1">
		<img src="images/links_01.jpg" width="107" height="651" valign="top" alt=""></td>
					<td colspan="0" rowspan"6" border="1">
		<img src="images/blank_03.jpg" width="12" height="651" valign="top" alt=""></td>


';

// Display all the URLs.



$rowNum = 0;
$result = mysql_query ($query);
//echo "<table><tr>";
while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {
  if($rowNum > 3)
  {
    $rowNum = 0;
    echo "<tr rowspan='1'></tr>";
  }
  //Display each record.
  echo "<td bgcolor='pink' rowspan='1' colspan='0' border='1' width='691' height='154' valign='top' align='left'><a href='view_print.php?pid=".$row['product_id']."'><img src='uploads/".$row['image_name']."' alt='".$row['item_name']."'></a><br /><div align='left'>\$".$row['price']."</div></td>";

  $rowNum++;
}
mysql_close(); // Close the database connection.
include_once ('footer.html'); // Require the HTML footer.
?>

Footer:

<tr>
		<td colspan="18">
			<img src="images/bottom_01.jpg" width="801" height="159" align="right" alt=""></td>
	</tr>



</table>
</body>
</html>

Argh!

leatherback

Hm..

Three things:

Why have cells with colspan=0. THat doesn't make sense and will give you headaches. The default is 1, which you do not need to specify.

If you have this:

        <tr><td rowspan="1" border="1">
            <img src="images/links_01.jpg" width="107" height="651" valign="top" alt=""></td>
                        <td colspan="0" rowspan"6" border="1">
            <img src="images/blank_03.jpg" width="12" height="651" valign="top" alt=""></td>

and subsequently try to spit out 6 rows of cells, you are basically telling the script: Draw one row; one colum. Then one colum across 6 rows, and then a series of colums with 6 rows. This is in conflict with itself: Make the first col also span 6 rows.

echo "<tr rowspan='1'></tr>";
You cannot be serious! I assume you mean the reverse. And again: Stop defining default settings. :
echo "</tr><tr>";

However.. Your situation is an excellent example of mis-use of tables. Seriously.. Have a look at fluid design and CSS.

Finally: Maybe you should spend some time looking at HTML coding, because your trouble are not PHP but logic/HTML coding issues

pulp25

Thanks leatherback.

That’s embarrassing, I spent all day working on the code changing the values of everything to anything just to see if it would work and I forgot to change it back. In this particular code it works the same whether set to 1 or 0 I just forgot to set it back. My mind was mush last night.

I'm looking at fluid design in CSS right now, I'm going to try to implement this technique. I'll post if it it works.

Thanks again.

pulp25

I finally got everything working. Sometimes a just get frantic and frustrated. It took me about five minutes to solve once I sat back, took a breath, and looked at it logically. Good lesson for a newb! Thanks for all the help.