...

View Full Version : How should I approach this?



Democrazy
09-15-2011, 01:02 PM
I am wanting to make a product list page with PHP.

At the moment I using this code:

$query = "select * from products where category = 'Belts'";
$result = mysql_query($query);
while($row=mysql_fetch_assoc($result)) {
echo $row['name'];
}

The result is something like this:
http://i51.tinypic.com/2w56ljq.png

What I want is for them to be aligned like this:
http://i53.tinypic.com/w811tz.png

Eventually, I am also going to include an image with each product.
How would I go about alignment? With CSS or PHP?

Wanna
09-15-2011, 01:19 PM
How i always do this:



query = "select * from products where category = 'Belts'";
$i = 0;
$result = mysql_query($query);
while($row=mysql_fetch_assoc($result)) {
$i++;
echo $row['name'];
if($i == 4) {
echo "<br />";
$i = 0;
}
}

Now, After each fourth product there will be placed a BR (New line)

The allignment must be done with CSS, because this can't be done with PHP.
What you could do:
1. Make a div and put there all the product info in
2. Make a span where you will put the product name in
3. Make a div where you put a image in.
4. Give all the div's and maybe the span a class.
5. Now use CSS to set everything in place.
6. Done
NOTE: You could also change step 3 with: Place a IMG tag

mlseim
09-15-2011, 01:23 PM
Your desired output is tabular ... which means using <table>.
That's exactly what <table> is designed for.



<?php

$query = "select * from products where category = 'Belts'";
$result = mysql_query($query);

// begin the <table>
$index=0;
echo "<table cellspacing='5'>";

// loop through query results
while($row=mysql_fetch_assoc($result)) {
if($index==0){
echo "<tr>";
}
echo "<td>".$row['name']."</td>";
$index++;
if($index==4){
echo "</tr>";
$index=0;
}
}

// append <tr> if row not complete
if($index > 0){
echo "</tr>";
}

// close <table>
echo "</table>";


?>








.

Wanna
09-15-2011, 01:24 PM
Your desired output is tabular ... which means using <table>.
That's exactly what <table> is designed for.



<?php

$query = "select * from products where category = 'Belts'";
$result = mysql_query($query);

// begin the <table>
$index=0;
echo "<table cellspacing='5'>";

// loop through query results
while($row=mysql_fetch_assoc($result)) {
if($index==0){
echo "<tr>";
}
echo "<td>".$row['name']."</td>";
$index++;
if($index==4){
echo "</tr>";
$index=0;
}
}

// append <tr> if row not complete
if($index > 0){
echo "</tr>";
}

// close <table>
echo "</table>";


?>








.

Noo, Dont use tables.

Do this with div's and CSS

tangoforce
09-15-2011, 01:42 PM
I personally don't really think this is a PHP issue more of a html/css layout issue.

Democrazy
09-15-2011, 02:02 PM
Wanna and mlseim, both your ways sound like they will achieve what I think I am looking for.

I am first going to test out mlseim's way, because cellpadding to me yells out better layout customization, which is what I need, because I am a very perfectionist person.


tangoforce,
I know where your coming from. I think the solution is CSS implemented through PHP.

I'm off to have a work out session to make up for the last 8 hours of sitting on the computer. I will try out miseim's solution and report back my outcome.

Democrazy
09-15-2011, 06:10 PM
mlseim,

your solution worked.

While it still hasn't sunk into my head what is going on in the code, I understand exactly what it is doing.
I thank you and can't thank you enough.

The brain is a funny place. Tomorrow I will wake up and understand your code perfectly.

Thank you again man!

mlseim
09-15-2011, 06:18 PM
Don't totally dismiss what Wanna is saying ...
<table> tag properties will disappear with HTML5, and will require global CSS elements.

My point is ...
You want a nice layout, done quickly, and looks good on different browser sizes.
Continue on with your site, but start "working on the side" to duplicate your
tabular data using CSS only. I just know that I can spend 1 minute making a
table that works, and spend 180 minutes trying to make it look the same with CSS.

It's probably my fault, but who cares? I'm the one spending the time doing it.



.

Wanna
09-15-2011, 08:54 PM
Don't totally dismiss what Wanna is saying ...
<table> tag properties will disappear with HTML5, and will require global CSS elements.

My point is ...
You want a nice layout, done quickly, and looks good on different browser sizes.
Continue on with your site, but start "working on the side" to duplicate your
tabular data using CSS only. I just know that I can spend 1 minute making a
table that works, and spend 180 minutes trying to make it look the same with CSS.

It's probably my fault, but who cares? I'm the one spending the time doing it.



.

Indeed, For a quick solution a table is ok.
If you have some experience with CSS, Try to make it look like your example.

Democrazy
09-16-2011, 04:34 AM
I will defiantly be using CSS to fine align things.

I find HTML5's version-less model a problem - if you write a blog using an element that later becomes obsolete, it means you would have to go back and change those old blog HTML files for them to become standard complaint again. that is a burden and I have a zero policy against non-valid HTML documents being published.
A version number with HTML5 would have prevented this and I have even press Ian Hickson on the problem several times, but he doesn't seem to understand, so it looks like I won't be using HTML5 ever.

mlseim
09-16-2011, 03:48 PM
Further reading, it looks like the actual <table> tag will remain with HTML5,
but the only <table> property recognized will be "border". That means you'll have to
use global or inline CSS to affect padding, centering, fonts, etc. I guess we'll see.


.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum