0

imgの背景があるウェブサイトに取り組んでいます。ナビゲーションを「海の上」に配置する必要があります (スクリーンショットを参照)。私の解像度 (1680x1050) では正常に動作しますが、人々は「海上」でナビゲーションを行っています。パーセントで位置を定義しました。誰でも私を助けることができますか？

div#navigation {
height:auto;
overflow:hidden;
margin-top:19.2%;
margin-left:auto;
margin-right:auto;
text-align:center;
width: auto;

}

SCREEN 私の解像度 (正常に動作します) https://dl.dropboxusercontent.com/u/19898988/website.jpg

友達の解決 (うまくいきません) https://dl.dropboxusercontent.com/u/19898988/1001758_10200668454011660_856480470_n.jpg

web.sundanceparty.sk

どうもありがとうございました

4

1 に答える 1

0

現在のレイアウトでは、ページ上部からメニュー下部までの垂直距離は、パーセンテージの高さ (#countdown の上部マージンと #navigation の上部マージン) の 2 つと固定高さ (高さ) の 4 つの部分の合計です。 #countdown と #navigation の 固定部分は異なるウィンドウ幅の同じパーセントではないため、この合計は、異なるウィンドウ サイズでページ幅のわずかに異なるパーセンテージになります。

このパーセンテージを一定にする (したがって、#navigation の下部の位置を解像度に依存しないようにする) には、#countdown、#container、および #navigation のスタイルを次のものに置き換えることをお勧めします。

#countdown {
  margin-top: 7%;
  position: absolute;
  right: 0;
  top: 0;
}

#container {
  font-family: 'Telex',Helvetica;
  font-size: 16px;
  margin: 29.9% 0 0;
  padding: 0;
  position: relative;
}

#navigation {
  bottom: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  position: absolute;
  text-align: center;
  width: 100%;
}

そのため、コンテナーの上部オフセットは常に 29.9% (背景画像の「海抜」に対応しているようです) になり、#navigation の下部ラインは常にこの位置に留まります。

于 2013-07-04T22:50:50.710 に答える