バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
webtamago
投稿日時: 2014/5/22 12:11
対応状況: 確認中
半人前
登録日: 2014/5/22
居住地:
投稿: 12
フロント画面の不具合?
初めて投稿させていただきます。
書き方に問題がありましたらお手数ですが、ご指摘いただければ幸いです。

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


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

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


piropiro
投稿日時: 2014/5/22 13:25
対応状況: −−−
常連
登録日: 2014/4/25
居住地:
投稿: 56
Re: フロント画面の不具合?
書き方を言えば、
バージョン情報を入力したら、
解決案がわかるかもしれません。

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

解決にならないかもしれませんが、
参考になればと思います。
patapata
投稿日時: 2014/5/22 14:52
対応状況: −−−
仙人
登録日: 2010/7/7
居住地: 神奈川県
投稿: 502
Re: フロント画面の不具合?
デモサイトでのエラーメッセージ部分のことであれば、原因は
#errorHeader
のCSSクラスにwidthが指定されてないことによるものだと思いますよ。
width: 100%
とか適当に指定しとけば、ご希望の内容になるのではないでしょうか?
webtamago
投稿日時: 2014/7/9 5:30
対応状況: −−−
半人前
登録日: 2014/5/22
居住地:
投稿: 12
Re: フロント画面の不具合?
ご連絡遅くなり申し訳ござませんでした。

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

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

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

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


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

firebug 上で ご指摘の部分にwidth:100%を追加してみてもダメでした。
firebugで要素単位で見てみると、bodyから小さくなってしまっているように見えそれが影響しているのかと思い、自分の力だけではわからない状態になってしまいました。
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/13 0:37
対応状況: −−−
半人前
登録日: 2014/5/22
居住地:
投稿: 12
Re: フロント画面の不具合?
snitta 様

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

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

ありがとうございました!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


ec-cube.co

統計情報

総メンバー数は45,141名です
総投稿数は91,743件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
nanasess
1894
4
468
1746
5
yuh
1584
6
umebius
1296
7
red
1279
8
fukap
907
9
tsuji
837
10
shutta
827
11 ramrun 789
12
tao_s
745
13
h_tanaka
729
14 karin 656
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

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

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