質問 > その他 > 商品詳細画面サブイメージについて。 |
その他
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
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; } |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |