Question

我正在尝试为我正在处理的项目网站创建一个wordpress样式。我是一名体验设计师，但有一个我无法弄清楚的概念。我希望能够将网站的宽度设置为960px，但顶部有两个条形。你可以在下面的图片中看到我的意思。

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

我真的希望能够将蓝色条用作菜单系统，并将所有内容保留在主要960px的总宽度内。徽标图像需要从内容开始的最开始（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中嵌套abosolute定位div。我没有测试过这个，但我记得做过类似的事情。我希望能让你开始。

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

Answer 2

这样的事情应该让你开始。

http://jsfiddle.net/pxfunc/DxW47/1/

的CSS：

body {background:#eee url('http://files.me.com/pwb3/lo1t09') repeat 0 0;margin:0;padding:0;}

#greenBg {background:#00cb00;height:50px;width:50%;top:40px;right:50%;position:absolute;}
#blueBg {background:#00b8de;height:50px;width:50%;top:40px;left:50%;position:absolute;}

.clear {clear:both;}

#container {width:960px;margin:40px auto 0 auto;position:relative;}
#header {background-color:#00cb00;width:220px;float:left;padding:15px;}
#nav {background-color:#00b8de;width:678px;border-left:solid 2px #fff;float:left;padding:15px;}

#content {margin-top:10px;border:solid 1px #ddd;background-color:#fff;padding:15px;height:400px;}

HTML：

<div id="greenBg"></div>
<div id="blueBg"></div>

<div id="container">
    <div id="header">
        <span>site logo</span>
    </div>
    <div id="nav">nav</div>
    <br class="clear" />
    <div id="content">content</div>
</div>

创建一个960px样式，其中两个实心条是100％的页面宽度？

2 个答案: