バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

バグ報告 > フロント機能 > フロント画面の不具合?

フロント機能

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
webtamago
投稿日時: 2014/7/13 0:37
対応状況: −−−
常連
登録日: 2014/5/22
居住地:
投稿: 34
Re: フロント画面の不具合?
snitta 様

詳しい解説まで記述いただき誠にありがとうございました!

今回のことで、よりCSSの奥深さを知りました。
一人では解決できませんでした!!!

ありがとうございました!
snitta
投稿日時: 2014/7/12 7:56
対応状況: −−−
一人前
登録日: 2013/10/3
居住地: 島根県
投稿: 100
Re: フロント画面の不具合?
管理画面の幅よりブラウザの表示領域が狭い場合に div#header の背景が一部描画されないという現象ですね。
不具合だと思いますのでチケットを発行致しました。
http://svn.ec-cube.net/open_trac/ticket/2592
※概要は適当なものに変更させて頂きました。

この現象ですが、まず関連する要素の幅は下記のように指定してあります。


要素: html > body > div#header > div#header-contents
  幅: auto > 100% >       100% >              1030px


これを CSS 2.1 の仕様に従って解釈すると、html, body, div#header の幅が表示領域のそれになるそうです。例えば表示領域が 500px ならこうなります。


要素:  html >  body > div#header > div#header-contents
  幅: 500px > 500px >      500px >              1030px


その為 div#header の背景画像が 530px 分描画されません。逆に言えば body の幅を表示領域に依存させなければ解消するはずです。

/* 内容にフィットした幅を求めさせる */
body {
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -ms-fit-content; /* IEはまだサポートしていません */
}

/* あるいは、置換インライン要素と同じ手順で幅を求めさせる */
body {
    width: auto;
    display: table;
}

/* あるいは、手抜き1 */
body { width: 1030px; }

/* あるいは、手抜き2 */
#header { width: 1040px; }


間違っていたら申し訳ないので、ぜひお調べになって教えて頂けますと幸いです。
http://www.w3.org/TR/CSS2/visudet.html#the-width-property
「視覚フォーマットモデル」や「包含ブロック」で検索すると参考になるページが沢山出てきます。


----------------
Seiji Nitta
zenith6@gmail.com
https://github.com/zenith6/

webtamago
投稿日時: 2014/7/9 5:34
対応状況: −−−
常連
登録日: 2014/5/22
居住地:
投稿: 34
Re: フロント画面の不具合?
引用:

patapataさんは書きました:
デモサイトでのエラーメッセージ部分のことであれば、原因は
#errorHeader
のCSSクラスにwidthが指定されてないことによるものだと思いますよ。
width: 100%
とか適当に指定しとけば、ご希望の内容になるのではないでしょうか?


ご連絡遅くなり申し訳ございませんでした。

firebug 上で ご指摘の部分にwidth:100%を追加してみてもダメでした。
firebugで要素単位で見てみると、bodyから小さくなってしまっているように見えそれが影響しているのかと思い、自分の力だけではわからない状態になってしまいました。
webtamago
投稿日時: 2014/7/9 5:30
対応状況: −−−
常連
登録日: 2014/5/22
居住地:
投稿: 34
Re: フロント画面の不具合?
ご連絡遅くなり申し訳ござませんでした。

株式会社ロックオン様のdemoでは 2.12.5 を使用しているようでした。(管理画面からの確認です。)

確認環境は
firefox 30.0
chrome 35.0.1916.153mの現時点での最新版
IE 11.0.6900.17126

patapata
投稿日時: 2014/5/22 14:52
対応状況: −−−
仙人
登録日: 2010/7/7
居住地: 神奈川県
投稿: 502
Re: フロント画面の不具合?
デモサイトでのエラーメッセージ部分のことであれば、原因は
#errorHeader
のCSSクラスにwidthが指定されてないことによるものだと思いますよ。
width: 100%
とか適当に指定しとけば、ご希望の内容になるのではないでしょうか?
piropiro
投稿日時: 2014/5/22 13:25
対応状況: −−−
常連
登録日: 2014/4/25
居住地:
投稿: 56
Re: フロント画面の不具合?
書き方を言えば、
バージョン情報を入力したら、
解決案がわかるかもしれません。

Var2.13.1では
ブラウザに関係なくそのような現象は
起こりませんでした。

解決にならないかもしれませんが、
参考になればと思います。
webtamago
投稿日時: 2014/5/22 12:11
対応状況: 確認中
常連
登録日: 2014/5/22
居住地:
投稿: 34
フロント画面の不具合?
初めて投稿させていただきます。
書き方に問題がありましたらお手数ですが、ご指摘いただければ幸いです。

現在株式会社ロックオン社様のDEMOのフロントページでも確認できるのですが、
ウィンドウサイズを小さくしていくと、横へのスライダーが出てきます。
そのスライダーをスクロールしてみると、ヘッダー部分に謎の空白ができています。
同様の現象が今作成中のサイトにも表れています。


FIREBUDで見てみたのですが、何が原因かわからず困っています。

何か原因がわかる方いましたらお手数ですがご教授いただけますでしょうか。


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


 



ログイン


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

統計情報

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

投稿数ランキング

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.