[已解决]新进产品页面的CSS 问题

[i978]

我修改了新进产品的排列，由原来的一行一个，改为一行3个产品，见：http://www.lenewbalance.com/new-products.php，问题是，产品的名字字号太大，而且字数太多时，会溢出，我想的效果是首页推荐产品的效果，见：http://www.lenewbalance.com，该如何更改下面的代码，在/themes/css/global.css

/* 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;
float: left;
width: 29%;
height: 255px;
margin-right: 8px;
clear: none;
margin-left:4px;
margin-top:2px;
}
ul#product_list li a {
text-decoration:none;
color:#000;
}
ul#product_list a.product_img_link{
border: solid 1px #d0d3d8;
float:left;
margin-right:0.6em;
margin-left:15px;
margin-top:30px;
}
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;
text-transform:;
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:100%;
}
ul#product_list li div.right_block{
float:left;
text-align:center;
margin-left:2em;
margin-top:0.5em;
display:inline;
}
ul#product_list li .discount{
color:#da0f00;
text-transform:;
font-weight:bold;
display: block;
}
ul#product_list li .on_sale{
color:#da0f00;
text-transform:;
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: 100%;
margin-bottom: 0.2em;
}
ul#product_list li span.availability{
color:#000;
font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }

另外，该页面在ie下,排列不齐,如何解决呢?是不是,也是修改上面这段代码?

[21846657]

学习一下CSS吧，下面是一些建议：

ul#product_list li a {
text-decoration:none;
color:#000;
font-size: 13px； /* 加上font-size */
}

ul#product_list li {
display: block; /* 加上 */
background: #FFF;
/* padding: 4px; 去掉 */
height:220px;
clear:both;
/* margin-bottom:0.3em; 去掉 */
float: left;
width: 29%;
height: 280px; /* 修改 */
/* margin-right: 8px; 去掉 */
clear: none;
/* margin-left:4px; 去掉 */
/* margin-top:2px; 去掉 */
}

ul#product_list li div.center_block{
float:left;
width:100%;
display: inline; /* 加上 */
margin: 5px; /* 加上 */
padding: 5px; /* 加上 */
}

[i978]

学习一下CSS吧，下面是一些建议：

ul#product_list li a {
text-decoration:none;
color:#000;
font-size: 13px； /* 加上font-size */
}

ul#product_list li {
display: block; /* 加上 */
background: #FFF;
/* padding: 4px; 去掉 */
height:220px;
clear:both;
/* margin-bottom:0.3em; 去掉 */
float: left;
width: 29%;
height: 280px; /* 修改 */
/* margin-right: 8px; 去掉 */
clear: none;
/* margin-left:4px; 去掉 */
/* margin-top:2px; 去掉 */
}

ul#product_list li div.center_block{
float:left;
width:100%;
display: inline; /* 加上 */
margin: 5px; /* 加上 */
padding: 5px; /* 加上 */
}

太难又太懒，谢谢还是要说的。有什么好的工具，可以修改CSS，在线浏览修改效果的。

[21846657]

firebug可以测试CSS。测试OK后，可以把测试代码复制到global.css里。清除smarty cache后，再看看实际效果。

[lei]

清除smarty cache ? 怎么清除呢 ？

[21846657]

删除/tools/smarty/complile里除index.php以外的以%开头的php文件。