diplay products
Moderator: General Moderators
diplay products
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
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
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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: diplay products
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
many thanks
Re: diplay products
Tables is probably the best.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: diplay products
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.
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
- flying_circus
- Forum Regular
- Posts: 732
- Joined: Wed Mar 05, 2008 10:23 pm
- Location: Sunriver, OR
Re: diplay products
I've been looking for alternatives to tables lately, so naturally, I whipped this up real quick.
Consider the following:
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
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
Tables aren't evil - if you've got tabular data, you should use tables & not have to rely on "CSS magic" 
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: diplay products
Right, in this case we do not have tabular data though....
Re: diplay products
A list of data about products? Seems pretty tabular to me.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
- flying_circus
- Forum Regular
- Posts: 732
- Joined: Wed Mar 05, 2008 10:23 pm
- Location: Sunriver, OR
Re: diplay products
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.
- greyhoundcode
- Forum Regular
- Posts: 613
- Joined: Mon Feb 11, 2008 4:22 am
Re: diplay products
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.
- flying_circus
- Forum Regular
- Posts: 732
- Joined: Wed Mar 05, 2008 10:23 pm
- Location: Sunriver, OR
Re: diplay products
Wow, that inline-table did the trick, thanks for the tip! I really need to pick up a book on this stuff...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.
Re: diplay products
Thanks greyhound. I also found this which gives some other starting points for experimentation. http://www.w3schools.com/css/pr_class_display.asp