Jump to content

PHP/MYSQL Alignment


aelouch

Recommended Posts

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

Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.