товары в столбик

[gabdr]

Товарищи решил сделать товары в столбик в product-list, вроде вышло, но когда у товаров разное краткое описание и разная длина названия, то все столбцы получаются в разброс

 

редактировал product-list.css, вот что наделал

 

/* product-list.tpl */
ul#product_list { column-count: 4; column-gap: auto; column-rule: 1px; column-width: 130px; page-break-inside: avoid; width: 555px; margin-top: 2em; list-style-type: none }
ul#product_list li { background: #F3C1EB url('../img/block_category_item_bg.jpg') repeat-x; border: solid 1px #d0d3d8;
padding: 6px;
min-height: 130px;

height: auto; clear: both;
margin-bottom: 0.3em
}
* html ul#product_list li {
height: auto !important;
height: 125px
}
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 {
height: auto; width: 125px;vertical-align: bottom; display: block; }
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: white;
font-size: 0.6em;
font-weight: bold;
margin: 0 1em 0 0;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: 0.3em
}
ul#product_list li p.product_desc {
margin-bottom: 0;
font-size: 0.92em
}
ul#product_list li div.center_block {
float: center;
width: 60%
}
ul#product_list li div.right_block {
float: right;
width: 11em;
text-align: right;
margin-left: 1em;
margin-top: 0}
ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
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 {
color: #488c40;
font-size: 0.9em
}
ul#product_list li a.button { margin-top: 0.5em }
ul#product_list li p.compare input { vertical-align: text-bottom}

[gabdr]

все решил проблему надо было оказывается длину холста задать определенную, а стояло height: auto;

как только кнопки к низу прикрепить вот в чем вопрос )

[gabdr]

кому интересен список товаров в 4 колонки, вот готовый код

 

/* product-list.tpl */
ul#product_list {
column-count: 4; column-gap: 3px; page-break-inside: avoid; width: 555px; height: auto; margin-top: 2em; list-style-type: none}
ul#product_list li { background: #F3C1EB url('../img/block_category_item_bg.jpg') repeat-x;  border: solid 1px #d0d3d8;
padding: 4px;
min-height: 130px;

height: 300px; clear: both;
margin-bottom: 0.3em
}
* html ul#product_list li {
height: auto !important;
height: 125px
}
ul#product_list a.product_img_link { border: solid 1px #d0d3d8;
float: left;
margin-right: 0.6em
}
ul#product_list li a {
text-decoration: none;
color: #374853
}ul#product_list a.product_img_link img {
height: auto; width: 125px;vertical-align: bottom; display: block; }ul#product_list li h3 {height: 170px; margin: 0.1em 0 }

ul#product_list li .new { background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border: 1px solid #488C40;
color: white;
font-size: 0.5em;
font-weight: bold;
margin: 0 1em 0 0;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: bottom}ul#product_list li p.product_desc {height: 50px; margin-bottom: 0;
font-size: 0.9em
}
ul#product_list li div.center_block {
float: center;
width: 60%
}
ul#product_list li div.right_block {
 float: right;
width: 11em;
text-align: right;
margin-left: 0em;
}
ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
color: #488c40;
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 {
color: #488c40;
font-size: 0.9em
}
ul#product_list li a.button {  margin-top: 0.1em}
ul#product_list li p.compare input { vertical-align: text-bottom}

[pazient]

кому интересен список товаров в 4 колонки, вот готовый код

 

вставляю этот код в нужную часть global.css а результата нет, то есть есть но ппц какой )).

тема не стандартная, но может кто подскажет, где еще подкрутить надо? очень нужно, чтобы в 4 столбика тоовар был

[gabdr]

/* product-list.tpl */
ul#product_list { margin-top: 2em; list-style-type: none }
ul#product_list li {
background: #FFF;
padding: 4px;
height:220px;
clear:both;
margin-bottom:0.3em;
border: 1px solid #eee;
float: left;
width: 29%;
height: auto;
margin-right: 8px;
clear: none;
margin-left:4px;
margin-top:2px
}
}
* html ul#product_list li {
height: auto !important;
height: 130px
}
ul#product_list li a {
text-decoration: none;
color: #000
}
ul#product_list a.product_img_link {
float:left;
margin-right:0.6em;
margin-left:1px;
margin-top:30px
}
ul#product_list a.product_img_link img { width: 160px; height: auto; vertical-align: bottom }
ul#product_list li h3{ margin:0.4em 0; width:160px;padding-bottom:2px;height:10px; text-align: center}
ul#product_list li .new {
background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border:1px solid #488C40;
color:white;
font-size:0.6em;
font-weight:bold;
margin:0pt 1em 0pt 0pt;
padding:0pt 0.4em;
vertical-align:0.3em
}
ul#product_list li p.product_desc {
margin-bottom: 0;
/*display:none;*/
height:220px;
text-align: center;
font-size: 0.92em
}
ul#product_list li div.center_block {
float: left;
width: 100%
}
ul#product_list li div.right_block {
   display: inline;
   float: left;
   height: 75px;
   margin-bottom: 20px;
   margin-left: 2em;
   margin-top: 0.5em;
   text-align: center;
}
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: 15px%;
margin-bottom: 0.3em
}
ul#product_list li span.availability {
color: #488c40;
font-size: 0.9em
}

ul#product_list li span.notavailable {
 color: red;
 font-size: 0.9em
 }
ul#product_list li a.button { margin-top: 0.5em }
input.exclusive, input.exclusive_disabled, a.exclusive, span.exclusive { margin-top:6px; background-image: url('../img/button-medium_exclusive.png') }
div.pagination {clear:both; padding: 1em 0 }

попробуй этот надо вставлять не глобал.ксс а в продукт_лист.ксс