バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > その他 > 商品詳細画面サブイメージについて。

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
hunterman
投稿日時: 2010/4/22 8:35
対応状況: −−−
一人前
登録日: 2010/3/14
居住地:
投稿: 78
商品詳細画面サブイメージについて。
[EC-CUBE] V 2.4.3
[レンタルサーバ] infitoPLUS
[OS] Windows XP
[PHP] Version 5.2.9-2
[データベース] Mysql v 5.0.83
[ブラウザ] Firfox バージョン3.6.2

商品詳細ページのサブ画像を横並びにする。
サブタイトルは削除致しました。サブイメージのみを横並びにしようと試しています。既に質問された方がいたのですが、解決に至っておりません。
単純にdetail.tplに<ul>,<li>要素をたして、cssにてfloat:left;を指定すれば良いかと思いましたが、うまく反映されません。
>detail.tplにて

<ul>
<li>
<a href="<!--{$arrFile[$lkey].filepath}-->" class="colorbox"rel="example1">
<!--{/if}-->
<!--サブ画像-->
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->"
<!--{* width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />*}-->
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
</li>
</ul>

>products.cssにて

div.subphotoimg ul li {
float: left;
display: inline;
width: 202px;
}

以上のように書いても左側に縦に表示されてしまいます。
sub_image1,sub_image2等を使用する方法もあるのかと思いますが、指定の仕方が良く分かりません。
実装されている方など、ドの様に指定しているのでしょうか?
どなたか、良い方法など教えて下さい。お願いします。
ecbg
投稿日時: 2010/4/23 1:17
対応状況: −−−
仙人
登録日: 2009/2/25
居住地: 東京
投稿: 387
Re: 商品詳細画面サブイメージについて。
cssで上手くいかないなら、<table>の<td>で並べてみるのも手かもしれませんね。

やり方はいろいろあると思うので、まず静的ページならどう書くかイメージした方が良いと思いますよ。
hunterman
投稿日時: 2010/4/23 4:09
対応状況: 確認中
一人前
登録日: 2010/3/14
居住地:
投稿: 78
Re: 商品詳細画面サブイメージについて。
ecbgさん、ありがとうございます。

ご指摘の通りに<table>や<td><tr><th>等で調整してみたのですが、
デフォルトの縦並びから一切変わりません。
いったい原因は何でしょうか?
cssのfloat箇所なんかが間違っているのでしょうか?
助言の方お願い致します。

商品詳細tpl

<!--▼サブコメントここから-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{*
<!--{if $arrProduct[$key] != ""}-->
*}-->
<div class="subarea">
<!--{*
<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|escape}--></h3>
*}-->

<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->

<!--拡大写真がある場合ここから-->
<!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->


<!--{if $arrFile[$key].filepath != ""}-->
<div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br}--></div>
<div class="subphotoimg">
<!--{if $arrFile[$lkey].filepath != ""}-->
<ul><li>
<a href="<!--{$arrFile[$lkey].filepath}-->" class="colorbox"rel="example1">
<!--{/if}-->
<!--サブ画像-->
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->"
<!--{* width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />*}-->
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
</li>
</ul>

cssにて

/* サブタイトル
----------------------------------------------- */
div.subarea {
clear: both;
width: 580px;
padding: 30px 0 0 0;
}

div.subarea h3 {
width: 580px;
font-size: 120%;
margin: 0 0 10px 0;
padding: 5px 10px;
background-color: #e4e4e4;
}
/*
div.subtext {
float: left;
width: 365px;
}
*/


div.subphotoimg ul li {
float: left;
display: inline;
width: 202px;
}

div.subphotoimg p {
margin: 5px 0 0 0;
text-align:right;
}


スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,299名です
総投稿数は109,692件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.