0

スクロールしても固定位置にメニューを表示したいなど

「位置：絶対;」を使用しました （ :fixed; も試しました）。どちらも同じエラーでした。
(「左/右/上: 0%」を設定する必要がありました。両側に少し空き領域があったためです。)

#headercontainer の外にある次の div を続行したかったのですが、そこで問題が発生しました。次の div はメニューの「下」ではなく、同じ位置から始まります。
つまり、これら 2 つの div は互いに重なり合っています。

マージンでそれを修正できました...しかし、私は何か間違ったことをしたと思います! 次の div パーツにも左/右 0% と位置合わせが必要だったので、そうしないと、両側にこれらの空きスペースが再び必要になりました。

HTML:

<body>
  <div id="headercontainer">
    <div id="logo">
      <a href="">
        <img src="images/logo/logo.png" id="headlogo" />
      </a>
      <h1>Robert</h1>
    </div>

    <nav role="navigation" class="navigation">
      <ul>
        <li> <a href=""> ABOUT ME </a></li>
        <li> <a href=""> SKILLS </a></li>
        <li> <a href=""> WORK </a></li>
        <li> <a href=""> CONTACT </a></li>
      </ul>
    </nav>
  </div>
</body>

CSS:

#headercontainer{
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}
4

3 に答える 3

1

とを使用position: relative;してmargin: 0;みてくださいpadding: 0;
うまくいかない場合は、両側のスペースが親から来ていることを意味します<div>。

#headercontainer{
  position: relative;
  float: left;
  width: 100%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  margin: 0;
  padding: 0;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}
于 2013-07-24T17:35:18.507 に答える
1

上部と側面の余分なスペースは、本体のデフォルトのパディング/マージンが原因である可能性があります. CSS でそれらをクリアしていることを確認するか、CSS リセットを使用してください。

次に、position: fixed設定された高さをheadercontainer追加し、対応する上部マージンを本文に追加して、それらが重ならないようにします。

/* Reset margins -- or use a CSS reset */
html, body { margin: 0; padding: 0}

/* Fix the header container to the top */
#headercontainer { position: fixed; top: 0; left: 0; right: 0; height: 80px }

/* Add a matching top margin to your body element */
body { margin-top: 80px }
于 2013-07-24T17:54:28.533 に答える
0

使用position:fixedして要素に高さを与えます。次に、の上部に、次の<body>ようなものを挿入します。

<div id="push" style="height:/* height of menu */"></div>

これは、コンテンツを固定要素の高さだけ「押し下げる」空のブロックです。

また

メニュー以外のすべてを含む div に入れ、その div を指定します

margin-top:/* height of menu */"
于 2013-07-24T17:37:31.447 に答える