Page 1 of 2
diplay products
Posted: Fri Feb 19, 2010 11:53 am
by gisler87
Hi,
I have been looking for a script or at least someone to point me in the right direction. I am trying to create a product page that will display essentially display 9 products. 3 columns with 3 rows. I want each cell to contain an image of the product as well as price as well as a link that will take the user to more details of the product.
I am not experienced with php but i am an experienced programmer in java and c++. My main problem is positioning of the products. Any help would be much appreciated.
Many thanks
Gisler87
Re: diplay products
Posted: Fri Feb 19, 2010 1:53 pm
by pickle
If you know you're only showing 9 products, you could use 2 nested loops. One to iterate from 0-2 to allow looping through the 3 rows, and an inner one to also iterate from 0-2 to loop through the columns in each row.
Re: diplay products
Posted: Fri Feb 19, 2010 2:04 pm
by gisler87
yeah i have thought of that. i am just not sure of how i position these items so they are spaced out from each other. Would i use another loop so the picture would for instance be on top of the price and etc? should i simply use tables or is there a better method?
many thanks
Re: diplay products
Posted: Fri Feb 19, 2010 3:11 pm
by pickle
Tables is probably the best.
Re: diplay products
Posted: Sat Feb 20, 2010 4:09 am
by josh
Do you want a pre-made solution or do you want to code your own? You can do it with CSS (no tables).. its possible but I'm no expert on front-end stuff.
Posted: Sun Feb 21, 2010 10:24 pm
by Jonah Bron
This is a situation in which you would use tables. The outer loop suggested by pickle would output <tr> tags, and the inner loop would output <td> tags, with the items inside it.
But if there is only nine, and they never change, you don't need to use PHP.
Re: diplay products
Posted: Sun Feb 21, 2010 11:24 pm
by flying_circus
I've been looking for alternatives to tables lately, so naturally, I whipped this up real quick.
Consider the following:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {width: 326px;}
#container div {border: 1px solid #5a5a5a; float: left; margin-bottom: 10px; text-align: center; width: 100px;}
#container div + div {margin-left: 10px;}
#container br {clear: both;}
</style>
</head>
<body>
<div id="container">
<div>1</div> <div>2</div> <div>3</div> <br />
<div>4</div> <div>5</div> <div>6</div> <br />
<div>7</div> <div>8</div> <div>9</div> <br />
</div>
</body>
</html>
Re: diplay products
Posted: Mon Feb 22, 2010 3:10 am
by josh
I think with with CSS magic you can get the div to display in "block" mode, and still wrap in a parent div, so no <br /> tags and scrolls fluidly. Maybe someone will come in and clarify.
Re: diplay products
Posted: Mon Feb 22, 2010 9:45 am
by pickle
Tables aren't evil - if you've got tabular data, you should use tables & not have to rely on "CSS magic"

Re: diplay products
Posted: Mon Feb 22, 2010 10:53 am
by josh
Right, in this case we do not have tabular data though....
Re: diplay products
Posted: Mon Feb 22, 2010 12:06 pm
by pickle
A list of data about products? Seems pretty tabular to me.
Re: diplay products
Posted: Mon Feb 22, 2010 12:20 pm
by flying_circus
josh wrote:I think with with CSS magic you can get the div to display in "block" mode, and still wrap in a parent div, so no <br /> tags and scrolls fluidly. Maybe someone will come in and clarify.
I've learned just enough css to be dangerous, so if I can clean it up even more, I'd be interested as well.
Re: diplay products
Posted: Mon Feb 22, 2010 12:37 pm
by greyhoundcode
Why not define divs holding the products as inline-tables with a width of 300px and of whatever specified height, floating to the left and with a margin-right of 20px (just for example). Then wrap 9 of these inside a block container of say 965px. No need for the <br/> tags.
Re: diplay products
Posted: Mon Feb 22, 2010 2:22 pm
by flying_circus
greyhoundcode wrote:Why not define divs holding the products as inline-tables with a width of 300px and of whatever specified height, floating to the left and with a margin-right of 20px (just for example). Then wrap 9 of these inside a block container of say 965px. No need for the <br/> tags.
Wow, that inline-table did the trick, thanks for the tip! I really need to pick up a book on this stuff...
Re: diplay products
Posted: Mon Feb 22, 2010 4:02 pm
by josh
Thanks greyhound. I also found this which gives some other starting points for experimentation.
http://www.w3schools.com/css/pr_class_display.asp