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