バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > 管理機能 > レイアウトが崩れる

管理機能

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ken-o
投稿日時: 2012/3/27 9:30
対応状況: −−−
長老
登録日: 2011/9/22
居住地:
投稿: 222
Re: レイアウトが崩れる
2.11.2のデフォルトのdetail.tplですが、
<!--★お気に入り登録★-->
がある、257行目からの一例です。
これで、一応商品画像が入っていない時に出る「画像はありません」のすぐ下辺りに来るかと思います。


引用:


<!--★お気に入り登録★-->
<!--{if $smarty.const.OPTION_FAVOFITE_PRODUCT == 1 && $tpl_login === true}-->
<div class="favorite_btn">
<!--{assign var=add_favorite value="add_favorite`$product_id`"}-->
<!--{if $arrErr[$add_favorite]}-->
<div class="attention"><!--{$arrErr[$add_favorite]}--></div>
<!--{/if}-->
<!--{if !$is_favorite}-->
<a href="java script:fnChangeAction('?product_id=<!--{$arrProduct.product_id|h}-->'); fnModeSubmit('add_favorite','favorite_product_id','<!--{$arrProduct.product_id|h}-->');" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_add_favorite_on.jpg','add_favorite_product');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_add_favorite.jpg','add_favorite_product');"><img src="<!--{$TPL_URLPATH}-->img/button/btn_add_favorite.jpg" alt="お気に入りに追加" name="add_favorite_product" id="add_favorite_product" /></a>
<!--{else}-->
<img src="<!--{$TPL_URLPATH}-->img/button/btn_add_favorite_on.jpg" alt="お気に入り登録済" name="add_favorite_product" id="add_favorite_product" />
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.tipsy.js"></script>
<script type="text/javascript">
var favoriteButton = $("#add_favorite_product");
favoriteButton.tipsy({gravity: $.fn.tipsy.autoNS, fallback: "お気に入りに登録済み", fade: true });

<!--{if $just_added_favorite == true}-->
favoriteButton.load(function(){$(this).tipsy("show")});
$(function(){
var tid = setTimeout('favoriteButton.tipsy("hide")',5000);
});
<!--{/if}-->
</script>
<!--{/if}-->
</div>
<!--{/if}-->
</div>
</div>
<!--▲買い物かご-->
</div>
</form>


<!--▼商品問い合わせ-->

<form method="post" action="">

<input type="hidden" name="transactionid" value="c79928e5dabd4630a698dbf804adebec3a281f62" />

<input type="hidden" name="name" value="" />

<input type="hidden" name="product_code" value="410391" />

<!--<input type="submit" value="この商品について問い合わせをする">-->

<button type="submit" style="position:absolute; margin-top:-40px;">この商品について問い合わせをする</button>

</form>


<!--詳細ここまで-->

<!--▼サブコメント-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != ""}-->
<div class="sub_area clearfix">



----------------
何分知識が浅いですが・・・
出来得る限り協力したいと思っています

greanpice
投稿日時: 2012/3/26 20:29
対応状況: −−−
長老
登録日: 2011/7/12
居住地:
投稿: 180
Re: レイアウトが崩れる
javascriptでやってみましたが、崩れてしまいます。
やはりform自体が隣接すると隣の画像の高さに直結してしまうようです。
padding:-数値;
指定でやってみましたが、やはり各ブラウザで高さが崩れてしまいます。
ken-o
投稿日時: 2012/3/26 19:01
対応状況: −−−
長老
登録日: 2011/9/22
居住地:
投稿: 222
Re: レイアウトが崩れる
先ほどの技でも、基本どのブラウザでもそれほど大きく違って見えることはないかと思います。
(僕の環境、ie9とopera、fxでは大体同じところです。)

ただし、tanaka 様が仰っている方法が一番ベストなような気がします。


僕なら、javascriptを使用して分岐させます。
http://okwave.jp/qa/q545699.html


----------------
何分知識が浅いですが・・・
出来得る限り協力したいと思っています

greanpice
投稿日時: 2012/3/26 18:25
対応状況: −−−
長老
登録日: 2011/7/12
居住地:
投稿: 180
Re: レイアウトが崩れる
そういった場合ですが、スタイルシートで
ie9以上の調整をpaddingやmarginなどで行った場合
今度は別のブラウザで高さがあわなくなる恐れがあるのですが、
何かいい方法があれば幸いですが。
tanaca
投稿日時: 2012/3/26 18:13
対応状況: −−−
仙人
登録日: 2010/11/28
居住地: 福岡県
投稿: 332
Re: レイアウトが崩れる
憶測で書いているので大きく外していたらすみません。

例えば、商品メイン画像を凄く縦に長い画像を表示させていたり、サブ画像をメイン画像の下に縦に並ぶように表示させていたたりすると、その画像が終わった場所から問い合わせボタンが表示されるかと思います。

逆に画像の領域の高さが小さくて、カートボタン側の領域の高さが大きい場合はそのすぐ下に来ると思います。

なので、そのあたりはスタイルシートで調整する必要があるように思います。


----------------
他社システムからEC-CUBEへの移行などお気軽にご相談ください。
福岡のホームページ制作会社 ECカンパニー
担当:田中利宏

ken-o
投稿日時: 2012/3/26 18:01
対応状況: −−−
長老
登録日: 2011/9/22
居住地:
投稿: 222
Re: レイアウトが崩れる
greanpice 様

確認したいのですが、本案件は、画像のすぐ下に来るようにしたいのですか?
それとも、「カゴに入れる」ボタンがある青い枠のすぐ下に来るのは理想なのですか?

前者は、先ほど頂いた記述ですと余白ができます。というか余白ではなく、もともとあるformの構成が右に画像、左に商品情報/カゴへボタン ですから、その構成のすぐ下にできるのは仕方ありません。
なので、画像のすぐ下にボタンを設けるのであれば、
position:absolute;
を使って、自由に移動できるようにして、margin-top;やmargin-leftを駆使して移動します。

後者であれば、margin-leftで移動させてあげればいいと思います。

とりあえず、どうしたいかを教えて下さい。


tanaca 様
いつも、お世話になっております。
はじめは僕もそう思いましたが、なんかもっと単純なことな気がしてきました。


----------------
何分知識が浅いですが・・・
出来得る限り協力したいと思っています

greanpice
投稿日時: 2012/3/26 17:39
対応状況: −−−
長老
登録日: 2011/7/12
居住地:
投稿: 180
Re: レイアウトが崩れる
先ほどの記述で外にformを記述していますが、
問題ありますか??
FORM自体に改行の要素がありますが
以下の記述で
<form>
</form>
極端なスペース
<form>
</form>
です。
tanaca
投稿日時: 2012/3/26 16:58
対応状況: −−−
仙人
登録日: 2010/11/28
居住地: 福岡県
投稿: 332
Re: レイアウトが崩れる
横から失礼します。

フォームが動作する・しないは別として・・
原因はやはりken-o様がおっしゃってありますように、

</form>
<!--▲買い物かご-->

の外(下)に配置されている事が原因ではないでしょうか。

たぶん、IE9では下記のようになっているような気がします。

<form name="form1" id="form1" method="post" action="?">
  <div id="detailarea" class="clearfix">
    <div id="detailphotobloc">画像情報</div>
    <div id="detailrightbloc">カート情報</div>
  </div>
</form>
<!--▲買い物かご-->
お問い合わせボタンの記述


----------------
他社システムからEC-CUBEへの移行などお気軽にご相談ください。
福岡のホームページ制作会社 ECカンパニー
担当:田中利宏

greanpice
投稿日時: 2012/3/26 15:12
対応状況: −−−
長老
登録日: 2011/7/12
居住地:
投稿: 180
Re: レイアウトが崩れる
</form>

<!--▲買い物かご-->


<!--▼商品問い合わせ-->

<form method="post" action="">

<input type="hidden" name="transactionid" value="c79928e5dabd4630a698dbf804adebec3a281f62" />

<input type="hidden" name="name" value="" />

<input type="hidden" name="product_code" value="410391" />

<!--<input type="submit" value="この商品について問い合わせをする">-->

<button type="submit">この商品について問い合わせをする</button>

</form>
</div>

こんな感じですが、わかりますでしょうか??
また既存のFORMか新しく追加したFORMをとると
上につめられて直ります。
CSSでformの設定はpadding:0px;
一括してしてあります。

ken-o
投稿日時: 2012/3/26 14:49
対応状況: −−−
長老
登録日: 2011/9/22
居住地:
投稿: 222
Re: レイアウトが崩れる
現物を見ていないので、なんとも言えないのですが、もしかしたらその新しいformに問題があるかもしれません。
その作られたformのソースは公開できませんか?
または、どこかのサイトでフリーで公開されていたのであれば、urlを教えてください。


----------------
何分知識が浅いですが・・・
出来得る限り協力したいと思っています

(1) 2 »
スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

総メンバー数は89,324名です
総投稿数は110,082件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1652
8
red
1570
9
mcontact
1304
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
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.