Junior Coders
a question to view products in shopping
hello guys;
how can i show products in page by 2-3 forms?
my website in a shopping.
and i see in many shopping websites that they show the products in 2-3 views like 2-3products in each row or 1 product in each row and the user can select one of them.
i can not understand how they do it!!!
is any body help me?
Junior Coders
I can't really make out, your requirement for the post you've written.
Since, you've posted in the HTML section, I believe you must be looking for a way to layout products in your web page.
You can simply use the HTML Table tag. Say you have 8 products and you want to arrange 2 on each row:
HTML Code:<table> <tr> <td><span>Product 1</span></td><td><span>Product 2</span></td> </tr> <tr> <td><span>Product 3</span></td><td><span>Product 4</span></td> </tr> <tr> <td><span>Product 5</span></td><td><span>Product 6</span></td> </tr> <tr> <td><span>Product 7</span></td><td><span>Product 8</span></td> </tr> </table>
Also, you may need to further style you tables, which can be done via CSS : http://www.w3schools.com/css/css_table.asp
Last edited by midhul; 05-31-2011 at 02:23 PM.
mahnazm (05-29-2011)
Junior Coders
thanks for your answer.
i know html very well.
i hope to can explain what i mean in the attachment image.
global $Moderator;
midhul, tables are not intended for this sort of task. tables are for displaying tabular data. using tables for page layout is poor practice, difficult to maintain, less accessible, and can lead to other problems as well.
Layout should be managed using CSS.
manhazm, am I correct that you're not asking about how to make the layout itself, but how to make the page switch between the two? use javascript. the easiest method would be to use the button to switch class names on the product display area, and have css rules that arrange the products accordingly.
example: http://www.custom-anything.com/sand/switching.html
here, I use jQuery to do the class switching. (javascript isn't my strongest suit, so I'm sure it could be done better; but this is functional and gives you an idea of what needs to be accomplished.) the source code looks like so:
play around with it.HTML Code:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>switching layouts</title> <style> #area{ width: 600px; margin: 0 auto; border: 1px solid blue; } #button{ height: 30px; width: 150px; margin: 20px auto; background: yellow; border: 1px outset orange; } .product{ background: gray; margin: 5px; } .inline{ display: inline-block; width: 185px; zoom: 1; _display: inline; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script> </head> <body> <div id="area"> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> <div class="product">This is a product box.</div> </div> <div id="button">Click!</div> <script> $("#button").click(function(){ $(".product").each(function(){ $(this).toggleClass("inline"); }); }); </script> </body> </html>
Last edited by traq; 05-29-2011 at 05:28 PM.
mahnazm (05-29-2011)
Junior Coders
wow!
thanks sooooo much;
Now i understand how it is possible.
Junior Coders
I didn't expect he wanted such a detailed display for each of his products, so i simply suggested tables.
My mistake, completely forgot to take semantics into consideration
global $Moderator;
http://www.dreamincode.net/forums/to...vil-of-tables/
http://phrogz.net/css/WhyTablesAreBadForLayout.html <-- this is a great list. Notice how the one you hear all the time - "UNsemantic!!!" - is down at #7. I guess this list probably isn't "in order," but I think all of the other reasons are more compelling.
And I can't find anything on it right now, but I've read about tables-in-tables-in-tables complicating javascript execution (can any js gurus weigh in?).
Posting Permissions
Bookmarks