バージョン選択

フォーラム

メニュー

オンライン状況

30 人のユーザが現在オンラインです。 (27 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 30
もっと...

PR

デザインテンプレート EC-CUBE3.0版が登場!
広告掲載について

サイト内検索

質問 > フロント機能 > 商品一覧ページの横並びレイアウト崩れについて

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
kkkk
投稿日時: 2011/7/13 0:35
対応状況: −−−
新米
登録日: 2011/7/13
居住地:
投稿: 9
商品一覧ページの横並びレイアウト崩れについて
初心者ですがECサイトを構築中です。

過去のスレッドを見て、商品一覧ページをカスタマイズしています。

3列の横並びにしたところ、商品の高さによって歯抜けになってしまいます。

過去のスレを読みあさっているのですが、解決できません。

ご教示いただけると幸いです。

宜しくお願いします。

http://store.petshopgarage.com/html/products/list.php

CSS
/* レイアウト
----------------------------------------------- */
div.list_area {
padding: 0 0 30px 0;
width: 33%;
overflow: hidden;
  position: relative;
float: left;
}

div.listphoto {
padding: 0px 0 30px 0;
text-align: center;

}

/* メインカラム用 1カラム時*/
#one_maincolumn div.listrightbloc {
float: right;
width: 100%;
}

/* メインカラム用 2カラム時*/
#two_maincolumn_right div.listrightbloc ,
#two_maincolumn_left div.listrightbloc {
float: left;#script tag escaped#;
width: 100%;
}

/* メインカラム用 3カラム時*/
#three_maincolumn div.listrightbloc {
float: right;
width: 90%;
}

----------------------------
list.php

<!--▼商品-->
<form name="product_form<!--{$id|h}-->" action="?" onsubmit="return false;">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<div class="list_area clearfix">
<a name="product<!--{$id|h}-->"></a>
<div class="listphoto">
<!--★画像★-->
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>
</div>
<div class="listrightbloc">
<!--▼商品ステータス-->
<!--{if count($productStatus[$id]) > 0}-->
<ul class="status_icon clearfix">
<!--{foreach from=$productStatus[$id] item=status}-->
<li>
<img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="65" height="14" alt="<!--{$arrSTATUS[$status]}-->"/>
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
<!--▲商品ステータス-->

<!--★商品名★-->
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<!--★価格★-->
<div class="pricebox sale_price">
<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
<span class="price">
<span id="price02_default_<!--{$id}-->">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</span><span id="price02_dynamic_<!--{$id}-->"></span>
円</span>
</div>

<!--★コメント★-->
<div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div>
</div>
</div>
</form>

<!--▲商品-->



<!--{if $smarty.foreach.arrProducts.last}-->
<div style="clear:both;"></div>

fukap
投稿日時: 2011/7/13 8:17
対応状況: −−−
仙人
登録日: 2009/7/7
居住地: 滋賀県
投稿: 907
Re: 商品一覧ページの横並びレイアウト崩れについて
例えば、以下のような感じで、float をかけているボックスに、height 属性を加えてはどうですか?

div.list_area {
  padding: 0 0 30px 0;
  width: 33%;
  overflow: hidden;
  position: relative;
  float: left;
  height:200px;
}
seasoft
投稿日時: 2011/7/13 9:36
対応状況: −−−
登録日: 2008/6/4
居住地:
投稿: 7331
Re: 商品一覧ページの横並びレイアウト崩れについて
高さを可変にするなら

<!--{if $smarty.foreach.arrProducts.last}-->

<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->

とか?


----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

kkkk
投稿日時: 2011/7/14 0:36
対応状況: −−−
新米
登録日: 2011/7/13
居住地:
投稿: 9
Re: 商品一覧ページの横並びレイアウト崩れについて
seasoftさんのアドバイスで解決しました!

<!--{if $smarty.foreach.arrProducts.last}-->

<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->

本当にありがとうございました!

fukapさんもありがとうございました!


助かりました〜。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

クレジットカード情報の非保持化対応

統計情報

総メンバー数は20,805名です
総投稿数は83,817件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1664
4
yuh
1439
5
red
1082
6
fukap
907
7
shutta
827
8
468
817
9 ramrun 789
10
tsuji
784
11
umebius
777
12
tao_s
651
13 karin 641
14 sumida 638
15
homan
633
16 DELIGHT 571
17
patapata
502
18
flealog
483
19 tonton 436
20
ecbg
387


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© LOCKON CO.,LTD. All Rights Reserved.