Question

我找不到以前的帖子，如果这是一个超级问题，我会道歉。

我正在开发我的第一个练习网站（现在只是XHTML和CSS / 3阶段）。我想测试页面以确保当我减小浏览器窗口的大小时，一切看起来都是一样的。当我这样做时，我的导航栏重叠了页面的一部分，我嵌入在h1标题中的背景图像并没有一直填充到右边的所有x轴。

我做错了什么，如何解决这个问题（网络标准）？

P.S ......这是代码

h1 { 
  font-size: x-large; 
  color: white; 
  padding-top: 2em; 
  padding-bottom: .2em; 
  padding-left: .4em; 
  margin: 0; 
  background: navy url(backgrounds/header-bg.jpg) repeat-y right; 
} 

#navigation { 
  width: 180px; 
  height: 484px; 
  background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat; 
}

Answer 1

有几种策略。这真的是一门艺术，而且有点过于复杂，无法在这里完全回答。这是网页设计师多年来一直在处理的事情，您将开发自己的风格和策略，但网上有很好的建议和最佳实践可供查找。

我从这个搜索开始：

http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC

这是该搜索的第一个真正好结果：http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript

但也有其他好的结果。

Answer 2

尝试为主容器或主体本身提供固定宽度。

body{
    width:1000px;
}

如果您发布当前代码，我们可能会为您提供更好的解决方案。

Answer 3

好吧，这将是一个评论，但我只是继续......

导航列重叠很可能是因为它定义了固定宽度（px或em（为此目的而固定））而不是像百分比那样的流体单位。尊重大卫斯特拉顿（并且他是对的，这是一个深入了解这里的艺术），尝试在适当的时候使用百分比来构建您的布局，以使页面缩放。

为了回应修复外部容器宽度的想法，这也是一种可能性，但如果用户有非常小型或大型屏幕或者非常高分辨率或低分辨率。

尝试使用流动页面布局网页设计进行Google搜索

调整大小时确保网页看起来相同

3 个答案: