css - 使用两个占页面宽度 100% 的实心条创建 960px 样式？

Question

我正在尝试为我正在处理的元素站点创建 wordpress 样式。我是一个体验设计师，但是有一个概念想不通。我希望能够将网站的宽度设置为 960 像素，但顶部有两个栏。您可以在下图中看到我的意思。

http://i.stack.imgur.com/pSShB.png

我真的希望能够将蓝色条用作菜单系统，并将所有内容保持在 960 像素的主要总宽度内。 Logo 图像需要从内容开始的最开始(960px 开始的地方)开始。该图像只是一个模型，但这就是我希望我的用户能够看到它的方式。我希望整个网站能够缩放以在任何尺寸的显示器上看起来都一样。

我一整天都在努力想出一个解决方案来有效地完成这项工作，但一直没有想出任何办法。

有人对我有意见吗？适用于所有浏览器的东西？

Answer 1

你必须创建一个相对容器，并在绝对容器中，像这样:

<div id="header_struct">
 <div id="green_area">{logo goes here float it right or something}</div>
 <div id="blue_area">{menu structure goes here, float left or something}</div>
</div>

您的风格:

#header_struct{
 position: relative;
 width: 960px;
}
#green_area{
 position: absolute;
 right: 700px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: green;
}
#blue_area {
 position: absolute;
 left: 260px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: blue;
}

基本上，您需要在相关容器 #header_struct 内嵌套绝对定位 div。我没有测试过这个，但我记得做过类似的事情。我希望这能让你开始。

这是一个清理后的 JSFIDDLE: http://jsfiddle.net/37Fmh/