1

アーカイブと検索ページの右側にパディングがあり、それは私の体の要素に関係していると思いますが、これらのページの違いがサイトの他のページと何が違うのかよくわかりません。それらはすべて同じフォーマットを使用するため、スタイルに関しては。ワードプレスのウェブサイトです。私が言ったように、それはこのページにのみ起こっており、検索ページと他のすべてはうまくいっているので、私はそれが何をしているのか混乱しています。

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }

body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}

header { width: 960px; height: auto; margin: 0 auto; display: block;}

#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}

aside { width: 260px; height: auto; float: left; position: relative;}

#main { width: 650px; height: auto; float: right; position: relative;}

#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }

ウィンドウのサイズを小さくすると、ページの下部にあるスクロールバーが表示され、右側のパディングが形になり始めます。ウィンドウを大きくすると、そのパディングスペースがなくなり、下部のスクロールバーが消えます。これを実現するために、何らかの方法でボディタグを制限しましたか？

私はこれを調べましたが、すでに最小幅が定義されています。 ブラウザのサイズを小さいウィンドウに変更すると、Webサイトのページの右側に奇妙な空白が表示されます

4

2 に答える 2

3

style.css108行目のファイルで、ヘッダータグから属性を削除して、width水平スクロールバーの問題を修正します。

CSSを修正しました：

header { height: auto; margin: 0 auto; display: block;}

確認のため、Firefoxブラウザの3Dビューでは、問題の原因が灰色のバーであるヘッダーが表示されます。テキストを作成する他のスタイルは影響を受けません。 ここに画像の説明を入力してください

ヒント：上の画像を右クリックして新しいタブで表示すると、元のサイズで表示されます。

于 2012-06-26T10:17:28.160 に答える
0

ああ、私があなたの問題を正しく理解しているなら、タグheader、特にそのスタイルwidth: 960pxがこの奇妙な出来事を引き起こしているようです。ヘッダーの周りに含まれるdiv、、には。#mainのみが含まれwidth: 650pxます。その結果、ヘッダーの幅が広すぎると、ヘッダーがdivのエッジを超えて拡張されます。

小さい画面幅でのみパディングとして表示されるように見える理由は、そのすべての周りに含まれるdiv#containerがそのマージンによって中央に配置されるためです。したがって、ブラウザが薄くなるまで、幅の広いヘッダーの影響は明らかになりません。その右端がヘッダーの右側と重なり始めるのに十分です。

ヘッダーのスタイルからを削除するだけでこれを修正するのではなくwidth: 960px（ヘッダータグのこの幅が実際に必要なサイトを台無しにする可能性があります）、おそらくの行で、すべての問題のあるタグにオーバーライドクラスを追加することをお勧めします.archive-header { width: auto; }。しかし、あなたはおそらく私よりもサイトをよく知っているので、解決策はあなた次第だと思います。

これがお役に立てば幸いです。（私は本当にそうです、そうでなければあなたはこれをすべて無料で読んだでしょう！あなたが読んだら申し訳ありません...）将来的には、MozillaFirefox用のFirebugをダウンロードしてみてください。何が機能するかを確認するための要素の。これらの種類の問題を自分で見つけて、より迅速に修正できるようにするのに役立つはずです。

于 2012-06-22T13:52:08.833 に答える