使用css在所有页面上跨菜单的水平栏

Question

我需要设计如下图所示的布局。

基本页面布局将有一个顶部横幅部分显示为黑色，如果横幅是他们隐藏的话，它们将显示出来。

接下来我需要用灰色填充页面背景，内容区域应该是白色。

我需要在导航/菜单上运行水平横幅，如下例所示。

我试过但是小提琴上的绿色水平条没有显示与菜单对齐。如果我添加margin-top:40px，它会在标题和横幅部分之间创建一个空格。我尝试使用无法正常工作的z-index。

我很感激基于纯粹的css＆amp; amp; div容器。

链接到小提琴http://jsfiddle.net/GDDA5/999/

<div id="BannerBar"></div>

<div id="navBar"></div>

<div id="contentWrapper">
    <div id="logowrapper">LOGO</div>
    <div id="NavigationWrapper">
        Home | About Us | News | Something
    </div>
</div>

<div id="footerBar"></div>

Answer 1

你是说这个意思吗？我添加了position:absolute;，width:100%;并将margin-top更改为60px。检查DEMO

#navBar {
    height: 20px;
    background: green;
    margin-top:60px;
    position:absolute;
    width:100%;
}

DEMO
要获得正确的背景，请将身体背景添加为灰色并更改背景#contentWrapper

html, body {
    ...
    background: #ccc;
}
#contentWrapper {
    ...
    background: #ffffff;
}

<强> DEMO(2)

Answer 2

您也可以这样做，将容器分开以便于处理：

<div id="BannerBar"></div>

<div id="logoWrapper">
    <div id="logowrapper">LOGO</div>
</div>
<div id="NavigationWrapper">
    Home | About Us | News | Something
</div>
<div id="contentWrapper">

</div>
<div id="footerBar"></div><div id="BannerBar"></div>

Demo

根据您想要处理菜单的方式，滚动时它是否会粘到屏幕顶部，您可以使用javascript进行操作。

Answer 3

当您添加与contentWrapper中相同的宽度和边距时，它已正确对齐

#navBar {
    width: 500px;
    margin: 0 auto;
}

请参见修改后的JSFiddle

Answer 4

请参阅此链接http://jsfiddle.net/bipin_kumar/GDDA5/1004/

#navBar {
    height: 20px;
    background: green;
    margin-top:60px;
    width:100%;
    position:absolute;
}