product page in 3 coloums

[Ume]

I search for the forums, have people show this web-site to teach how to do this, but this web-site now is del.

Have some people can teach me how to do the product in 3 or more columns, what code to change?

 

Now the product page is

 

-----------------------

| product 1 |

-----------------------

| product 2 |

-----------------------

| product 3 |

-----------------------

 

I want to

 

--------------- --------------- -----------------

| product 1 | | prduct 2 | | product 3 |

--------------- --------------- -----------------

--------------- --------------- -----------------

| product 4 | | prduct 5 | | product 6 |

--------------- --------------- -----------------

 

Thank you!

[Kerm]

li {display:block;float:left;width:300px}

 

It's demo, you need to find on product page class for <li> and change display:list-item to display: block and float:left, also change width...

[Ume]

li {display:block;float:left;width:300px}

 

It's demo, you need to find on product page class for <li> and change display:list-item to display: block and float:left, also change width...

I was found for the global.css and search the product_listing

 

/* product-list.tpl */

ul#product_list{ margin-top:2em; list-style-type:none; }

ul#product_list li {

background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;

border: solid 1px #d0d3d8;

padding: 6px;

height:130px;

clear:both;

margin-bottom:0.3em;

}

ul#product_list li a {

text-decoration:none;

color:#374853;

}

 

ul#product_list a.product_img_link{

border: solid 1px #d0d3d8;

float:left;

margin-right:0.6em;

}

 

ul#product_list a.product_img_link img{

vertical-align:bottom;

}

ul#product_list li h3{ margin:0.4em 0; }

ul#product_list li .new{

background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;

border:1px solid #488C40;

color:grey;

font-size:0.6em;

font-weight:bold;

margin:0pt 1em 0pt 0pt;

padding:0pt 0.4em;

text-transform:uppercase;

vertical-align:0.3em;

}

ul#product_list li p.product_desc{ font-size:0.92em; }

ul#product_list li div.center_block{

float:left;

width:74%;

}

ul#product_list li div.right_block{

float:left;

width: 11em;

text-align:right;

margin-left:1em;

margin-top:0;

}

ul#product_list li .discount{

color:#da0f00;

text-transform:uppercase;

font-weight:bold;

display: block;

}

ul#product_list li .on_sale{

color:#da0f00;

text-transform:uppercase;

font-weight:bold;

display: block;

}

ul#product_list li .reduction {

display: block;

margin-bottom: 0.3em;

}

ul#product_list li .price{

display: block;

font-size: 1.5em;

margin-bottom: 0.2em;

}

ul#product_list li span.availability{

float: right;

color:#488c40;

font-size:0.9em;

}

ul#product_list li a.button{ margin-top:0.5em; }

 

but i have not found the code of the li {display:block;float:left;width:300px}

 

Thank you!

[Kerm]

Bc it was a example...

 

ul#product_list li { 
/* add this and delete clear:both; */
display:block;
float:left;
width:300px
}

 

Width it's too example...