0

ここの私のウェブサイトはワードプレスのウェブサイトですが、私が抱えている問題に対して修正する必要があるのはヘッダーの高さだけだと思います. 高さ 403 ピクセルのローテーション バナーとしてのホームページと、他のすべてのページには高さ 303 ピクセルのヘッダー画像があります。ヘッダーの高さを自動にしようとしているだけなので、#container は高さに関係なくバナーの下部に自動的に収まります。

CSS

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

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

ヘッダーがそこにあることを #container が認識できるようにするには、他に何が必要ですか?

アップデート：

新しいHTML

<div style="clear:both;"></div>
</div><!-- end of container-->

新しいCSS

#banner { 
    width: 960px;      /* same with already defined */
    height: 403px;
    margin: 0 auto;
 }

私が少し違うことをした唯一の考えは、バナーの代わりにヘッダーの下にナビゲーションを配置することでした. それは同じように見えますが、私が以前に持っていたものとは違うことをしているようには見えません。バナーの下のブログページにはまだそのギャップがあります。

ズールの助けに感謝します。もう少しやるべきことがあると思います。ありがとう！

4

2 に答える 2

2

レイアウトの問題はheaderタグの上にありません。いくつかの問題を引き起こしている奇妙な位置にあるいくつかの要素があります。

これは、レイアウトフローを修正するために行うことのリストです。

1）

<div id="banner">内からを削除します<nav id="main-navigation">。

に<nav id="main-navigation">設定されheight:70px、スライダーはそれよりもはるかに高くなっています。

またはの子として、<header> またはの前後<header>に配置<div id="container">します。

例えば、

<header>...</header>
<div id="banner">...</div>     <!-- here is better -->
<div id="container">...</div>

2）

#banner最初のステップの後、次のCSSから削除できます。

削除する

#banner {
    left: 50%;
    margin-left: -480px;
    position: absolute;
    top: 69px;
    width: 960px;
    z-index: 1;
}

追加

#banner {
    width: 960px;      /* same with already defined */
    height: 403px;
    margin: 0 auto;
}

3）

ステップ01と02は、高さの問題#bannerとともに位置を修正する必要があります。header

#containerフロートされた要素を含むを修正したままであり、最後にクリアする必要があります。

ここでは、現在のクラスclearfixは機能せず、多くの宣言が含まれています。

<div id="container">

   <div id="main">...</div>
   <aside>...</aside>

   <div style="clear:both;"></div>

</div>

<div style="clear:both;"></div>の最後に新しいものを追加する#containerとfloat、がクリアされ、ドキュメントフローが正常に再開されます。

編集済み

最初のフェーズが完了しました。今、あなたがする必要があるのは、heightからを削除することだけです。そうすれば#banner、ギャップはなくなります。

#banner {
    width: 960px;      /* keep this */
    margin: 0 auto;    /* keep this */
}
于 2012-06-06T20:18:31.763 に答える
0

コンテナ div が終了する直前にaをadivとともに追加します。これにより、コンテナ内のコンテンツに応じてコンテナ div の高さを設定できます。名前付きのクラスを作成し、その中にこのスタイルを配置して、Web サイトのどこでも使用できるようにすることができます。styleclear:bothclearclass

于 2012-06-06T20:04:18.107 に答える