1

サイトに問題があります。ウィンドウのサイズを変更すると、すべてが静止して移動せず、ウィンドウがすべてを横切るだけです。

これがもう少し良いepxlainするための画像です..うまくいけば。

これは通常のウィンドウのサイトです-http://imageshack.us/photo/my-images/407/problem2a.jpg/

サイズを変更した場合-http ://imageshack.us/photo/my-images/696/problemim.jpg/

誰かが問題が何であるか教えてもらえますか？レイアウトをこのWebサイトのように機能させたい-http://www.thisoldbear.com/

4

3 に答える 3

2

次回は、HTMLとCSSコードを質問に追加してください。これにより、すべてが非常に簡単になり、より正確な回答が得られます。

あなたの写真を見ると、コンテンツを中央に配置するために左側のパディング/マージン（150px何か？）を追加したように感じますが、実際にはこれをコンテナDIVに追加する必要があります。

margin: 0 auto;

これにより、コンテンツが中央に配置され、ウィンドウのサイズを変更するときに中央に保持されます。

アップデート

HTML

<div id="container">
  <header>
    <div id="logo"></div>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  </header>
</div>
<div class="content">
  ...
</div>

CSS

body {
  background: url(../../core/images/bg.png);
  font-family: 'Pontano Sans', sans-serif;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  height: 80px;
  background: url(../../core/images/header.png);
}

#content, header {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

#logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 124px;
  height: 171px;
  background: url(../../core/images/logo.png);
}

nav {
  padding: 0;
  margin: auto 0px auto 150px;
}

nav a {
  text-decoration: none;
  font-size: 17px;
  color: #f4f4f4;
  outline: none;
  margin: 0px 0px 0px 50px;
}
nav a:hover { text-decoration: underline; }
于 2012-07-07T15:11:02.203 に答える
1

おそらく幅が1000pxの大きなコンテナがあり、それを使用してレイアウトを中央に配置し、余白とパディングを使用している可能性があります。

代わりに、大きなコンテナをドロップし、1つのコンテナだけを使用しmargin: autoて中央に配置します。このような：

HTML：

<body>
    <div id="main-container">
    </div>
</body>

CSS：

#main-container {
    width: 800px;
    margin: auto;
}

float:leftメインコンテナでは使用できませんのでご注意ください。それが必要な場合（背景など）、width: 100%パディングやマージンのない別のコンテナ幅を含め、その幅をフロートさせます。

于 2012-07-07T15:09:49.833 に答える
1

最も外側のレイアウト（おそらくdiv）に割り当てた幅を確認してください。画面の解像度サイズとほぼ同じかそれ以上の固定幅をページに割り当てたようです。プロパティmargin：0autoで小さいサイズを使用してみてください。

于 2012-07-07T15:15:52.470 に答える