PHP/MYSQL Alignment

[aelouch]

Hi

 

I'am trying to align database information so that all the fields on the same row are align, the columns seem fine but the rows do not align.

 

Any Help would be great, I am quite new to PHP, I think it is the way the tables are displaying?

 

My Code:

 

-----------------------------------------------------------------------------------------------------------------------------------------------------

 

<?php 

 

// set database server access variables: 

$host = "mysql17.000webhost.com"; 

$user = "a9865238_user"; 

$pass = "ael150385"; 

$db = "a9865238_product";

 

// open connection 

$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!"); 

 

// select database 

mysql_select_db($db) or die ("Unable to select database!"); 

 

// create query 

$query = "SELECT * FROM product"; 

 

// execute query 

$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); 

 

define('COLS', 3); // number of columns

$col = 0; // number of the last column filled

 

echo '<table align="left "border="0" cellpadding="0" cellspacing="0">';

echo '<tr>'; // start first row

 

while ($rows = mysql_fetch_array($result))

{ $col++;

 

echo '<td>';

    echo ' 

 

</div>

<div class="wrapper">

<article class="grid_4">

 

<figure class="frame2">

<img src="http://www.kingofthespring.co.uk/' $rows[image], '"style="border: 0px solid" class="index_image" />

</figure>';

 

echo '

<p class="color-4 prev-indent-bot">', $rows[title], '</p>'; 

 

echo'<p>', $rows[description],'</p>';

 

echo'

<div class="wrapper"><span class="price fleft">£', $rows[price],'</span>';

 

echo '

<a href="', $rows[8], '" class="button fright">Read More</a></div>

                                                    </article>', $col, '</td>';

  if ($col == COLS) // have filled the last row

  { $col = 0; 

    echo '</tr>'; // start a new one

  }

}

 

echo '</tr>'; // end last row

echo "</table>";

 

// free result set memory 

mysql_free_result($result); 

 

// close connection 

mysql_close($connection); 

 

?>

 

-------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

Thanks

[aelouch]

Hi I'm looking to get the tables to show as http://kingofthespring.co.uk/beds.html

 

Currently they show as http://kingofthespring.co.uk/furniture.html

 

Thanks Again

 

Ant

[Ch0cu3r]

You shouldnt be using html tables. Your site uses CSS grids.

 

You need to create a new <div class="wrapper"></div> every three columns

 

Change your while loop to

while ($rows = mysql_fetch_array($result))
{ $col++;

	if($col == 0)
		echo '<div class="wrapper">'; // create a new wrapper

	echo '
<article class="grid_4">
 
<figure class="frame2">
<img src="http://www.kingofthespring.co.uk/' $rows[image], '"style="border: 0px solid" class="index_image" />
</figure>';
 
echo '
<p class="color-4 prev-indent-bot">', $rows[title], '</p>'; 
 
echo'<p>', $rows[description],'</p>';
 
echo'
<div class="wrapper"><span class="price fleft">£', $rows[price],'</span>';
 
echo '
<a href="', $rows[8], '" class="button fright">Read More</a></div>
                                                    </article>', $col;
  if ($col == COLS)
  { $col = 0; 
    echo '</div>'; // end wrapper
  }
}

Edited November 19, 2013 by Ch0cu3r

[aelouch]

Thanks for the help

 

When i changed it to the above i get this error message

 

Parse error: syntax error, unexpected T_VARIABLE, expecting ',' or ';' in /home/a9865238/public_html/product.php on line 35

[Ch0cu3r]

Change

 

<img src="http://www.kingofthespring.co.uk/' $rows[image], '"style="border: 0px solid" class="index_image" />

 

to

 

<img src="http://www.kingofthespring.co.uk/', $rows[image], '"style="border: 0px solid" class="index_image" />

 

Also remove

 

echo '<table align="left "border="0" cellpadding="0" cellspacing="0">';

echo '<tr>'; // start first row

 

and

 

echo '</tr>'; // end last row

echo "</table>";

 

I forgot to mention that in my last post.

Edited November 19, 2013 by Ch0cu3r

[aelouch]

Hi This has removed the error, however the page is still all over the place?

 

http://kingofthespring.co.uk/furniture.html

 

Thanks for your help

[Ch0cu3r]

Try removing the 123 text

 

Remove

, $col

from

</article>', $col;

That could be causing the mis-alignment.

[aelouch]

Hi Thanks so much for your help

 

This has sort of worked it now shows this http://kingofthespring.co.uk/furniture.html

 

and the table are still not in line as the descriptions are on different levels?

 

Thanks Again

Ant

[aelouch]

Is there something I am missing from the css file?

[aelouch]

Hey sorry maybe should have added this also this is where the script enters the main website html page.

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

<section id="content">

        <div class="bg-top">

        <div class="bg-top-2">

                <div class="bg">

                    <div class="bg-top-shadow">

                        <div class="main">

                            <div class="box">

                                <div class="padding">

                                    <div class="container_12">

                                        <div class="wrapper">

                                            <div class="grid_12">

                                            <div class="indent-left p2">

                                                <h3 class="p0">Latest Furniture Deals</h3>

                                                </div>

                                                

                                                    

<?php include 'product.php'; ?>

 

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

[Ch0cu3r]

Because the text for the product descriptions is different it causing the price/readmore button to look out of positon.

 

You just need to tweak your CSS now so the price/readmore button aligns to the bottom of the row. Probably want to add a min-hieight to the div that contains the product description text.