Question

我的网站存在问题。当我调整窗口大小时，一切都保持不动并且不移动，窗口就会越过一切。

这些图片可以更好地覆盖它..希望。

这是普通窗口中的网站 - http://imageshack.us/photo/my-images/407/problem2a.jpg/

当调整大小时 - http://imageshack.us/photo/my-images/696/problemim.jpg/

谁能告诉我这是什么问题？我希望我的布局像这个网站一样工作 - http://www.thisoldbear.com/

Answer 1

下次，请将您的HTML和CSS代码添加到您的问题中，因为它使一切变得如此简单，您将获得更准确的答案。

通过查看你的照片，我感觉你已经添加了左边填充/边距（150px的东西？）来试图使你的内容居中，当你真的应该将它添加到你的容器DIV（s）

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; }

Answer 2

你可能有一个宽度为1000像素的大容器，并用它来使你的布局居中，可能是边距和填充。

取而代之的是放下大容器，只使用一个带margin: auto的容器来居中。像这样：

HTML：

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

CSS：

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

请注意，您无法在主容器上使用float:left。如果您需要（例如背景）包含另一个容器宽度width: 100%而没有填充或边距并浮动那个。

Answer 3

检查您分配给最外层布局的宽度（可能是div）。您似乎已为页面指定了固定宽度，其大小与屏幕分辨率大小相同或更大。尝试使用较小的大小和属性margin：0 auto;

网站布局问题

3 个答案: