商品一覧を３列のカラム(column)表示 / 横型商品一覧の導入

user_date/packages/default/css/common.css内の記述を変更
（contents.cssの可能性あり）

/* レイアウト
----------------------------------------------- */
div.list_area {
    padding: 0 0 30px 0;
    width: 100%;
    overflow: auto;
}

div.listphoto {
    float: left;
}

/* レイアウト

----------------------------------------------- */

div.list_area {

padding: 0 0 30px 0;

width: 100%;

overflow: auto;

}

div.listphoto {

float: left;

}

↓に変更。

/* レイアウト
----------------------------------------------- */
div.list_area {
padding: 0 0 30px 0;
margin-left:15px;
width: 31%;  /* 通常横幅３分割だと33%ですが padding margin の都合上30%〜31%程度に分割*/
text-align:center;
display:block;
overflow: hidden;
position: relative;
float: left;　/*important!*/
}

div.listphoto {
    /*float: left;*/ /*センター合わせの為不要*/
}

/* レイアウト

----------------------------------------------- */

div.list_area {

padding: 0 0 30px 0;

margin-left:15px;

width: 31%; /* 通常横幅３分割だと33%ですが padding margin の都合上30%〜31%程度に分割*/

text-align:center;

display:block;

overflow: hidden;

position: relative;

float: left;　/*important!*/

}

div.listphoto {

/*float: left;*/ /*センター合わせの為不要*/

}

下記はカラムへの回り込み禁則処理
（商品が１つの場合や価格順・新着順のソートバー回り込み禁則）

common.cssの中（100行目あたり）に追記

/* 下層コンテンツ */
#undercolumn{・・・}

1 2	/* 下層コンテンツ */ #undercolumn{・・・}

下層コンテンツあたりに追記

/*追記*/
#undercolumn #page_navi_bottom{
	clear:both;
}

/*追記*/

#undercolumn #page_navi_bottom{

clear:both;

}

多分以上で出来るが、商品名や文字のボリュームで個々のheightがバラバラになることがあります。
なので、「heightLine.js」jQuery等でそろえること。
（面倒であればCSSでdiv.list_areaとdiv.list_area h3 の heightを強制固定）

買い物かごの表記は下記ファイルの200行目前後。
今回は消去しました。
template/default/products/list.php

; html-script: false ]&lt;!--▼買い物かご--&gt;
:
:
&lt;!--▲買い物かご--&gt;

; html-script: false ]

2012年1月24日　加筆

商品一覧を３列のカラム(column)表示 / 横型商品一覧の導入

“商品一覧を３列のカラム(column)表示 / 横型商品一覧の導入” への1件の返信

コメントを残すコメントをキャンセル

“商品一覧を３列のカラム(column)表示 / 横型商品一覧の導入” への1件の返信

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル