どうか教えて下さい！
| 質問 > フロント機能 > #headerの幅を画面いっぱいにしたい。 |
フロント機能
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| Bongsu |
投稿日時: 2018/5/17 10:20
対応状況: −−−
|
半人前   登録日: 2018/2/15 居住地: 投稿: 29 |
#headerの幅を画面いっぱいにしたい。 ▼テンプレート
[EC-CUBE] EC-CUBE 3.0.15 簡単インストール [レンタルサーバ] へテムル [OS] 使用しているOS名、Mac Sierra 10.13.3 [PHP] PHP7.0 [データベース] Mysql5.6 [現象] ヘッダーの幅が固定されます。 #header 部分、#contents 部分 などの widthを100％にして 画面いっぱいに表示したいのですが、 どの様にすれば良いでしょうか？ html/template/dafault/css/default.css html/template/dafault/css/style.css などの #header部分に関するモノを色々といじって見たのですが ピクリとも動きません。 css の問題ではないのでしょうか？ どの部分を修正すると width:100% になるのでしょうか？ ご教授いただけると 有り難いです。 宜しく お願い致します。 |
| 468 |
投稿日時: 2018/5/17 11:04
対応状況: −−−
|
神   登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: #headerの幅を画面いっぱいにしたい。 デフォルトのデザインテンプレートで確認すると
style.cssの805行目に以下のような記述があり、こちらを消すと100%に広がると思います。 .inner { max-width: 1150px; } ECCUBEはかなり複雑なCSSが適用されていますので、 目的の要素にどんなスタイルが効いているのか、 都度、ブラウザのデベロッパーツール等で調査・確認されたほうが良いかと思います。
|
| Bongsu |
投稿日時: 2018/5/17 13:40
対応状況: −−−
|
半人前 登録日: 2018/2/15 居住地: 投稿: 29 |
Re: #headerの幅を画面いっぱいにしたい。 いつも ご指導いただき 有難うございます！
感謝しています！ ご指導頂いた通りにしても 初めは何も反応しなかったのですが、 履歴の消去、キャッシュのクリアで 幅は広がりました。 また 厚かましいとは思うのですが、 トップから、両サイドから 一文字ほどの隙間が出来てしまいます。 何か margin、paddingなどが 効いている様にも思えるのですが、 #headerなどを一つとっても 項目が多すぎて どこをいじるのか 見当がつきません。 style.cssとdefault.cssの区別も どちらを見るべきなのか？も いまいち理解しがたいです。 出来ましたら 再度 ご指導頂けると助かります。 宜しくお願い致します。 |
| 468 |
投稿日時: 2018/5/18 12:04
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: #headerの幅を画面いっぱいにしたい。 どのようなCSSが原因でそのような状態になっているか
私の環境では再現しない為、何が原因かはお答えできかねます。 先の回答でも記入させていただきましたが、 ブラウザのツールを使って確認されたほうが良いと思います。 FireFoxであれば、目的の場所にカーソルを合わせて右クリックすれば （コンテキストメニュー）に「要素を調査」がありますので、 こちらで確認すれば、どのCSSファイルの何行目の記述が実際に適用されているのか確認できます。 （Chromeであれば、「検証」、IEであれば「要素の検査」） これらのツールを使えば、一時的にCSSを書き換えたプレビューも確認できますので、 CSSの調査は効率的になると思います。
|
| Bongsu |
投稿日時: 2018/5/18 16:01
対応状況: −−−
|
半人前 登録日: 2018/2/15 居住地: 投稿: 29 |
Re: #headerの幅を画面いっぱいにしたい。 本当に面倒な事で申し訳ありません。
ご回答 有難うございます。 ブラウザのツールを使って確認すると <body> <div id="wrapper"> の選択では画面いっぱいをキャッチ その下の階層 <header id="header">では隙間部分が緑色になる その下の階層 <div class="cantainer-fluid inner"> になると隙間部分が選択されない全画面をキャッチ 自分で追加したブロックのcssとstyle.cssが混合しているのか？ margin、paddingではなく before、afterで反応しているのか？ 本当にご迷惑をかけてしまいました。 有り難うございました。 後は 地道に原因を追求していきます。 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
