CSS全寬度中心的導航欄

我想在CCS3/HTLM5CSS全寬度中心的導航欄

   | Header ....     | 
=====Blue bar| Navbar. Menu1. Menu2 ...  |Blue bar======== 
      | Website leftSide and content | 
      | Footer      |

菜單集中，還有內容得到這個。問題是菜單右側和左側的2個「藍色條」。我不知道如何在CSS中繪製它們。它們應該和導航欄一樣高。

下面是HTML：

<div id="wrapper"> 

    <header id="header"> 
     Image + Login 
     <br /><br /><br /> 

     <div id="nav"> 
      <ul id="nav"> 
       <li id="nav-accueil"><a href="#">Accueil</a></li> 
       <li id="nav-coursATelecharger"><a href="#">Cours</a></li> 
       <li id="nav-coursPrives"><a href="#">Cours</a></li> 
       <li id="nav-coursEnGroupe"><a href="#">Cours</a></li> 
       <li id="nav-contact"><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </header><!-- #header--> 

    <section id="middle"> 

     <div id="container"> 
      <div id="content"> 

      </div><!-- #content--> 
     </div><!-- #container--> 

     <aside id="sideLeft"> 

     </aside><!-- #sideLeft --> 

    </section><!-- #middle--> 

    <footer id="footer"> 
    </footer><!-- #footer --> 

</div><!-- #wrapper -->

這裏是CSS：

header, nav, section, article, aside, footer { 
    display: block; 
} 
body { 
    width: 100%; 
} 


#wrapper { 
    width: 960px; 
    margin: 0 auto; 
} 


/* Header 
-----------------------------------------------------------------------------*/ 
#header { 
    height: 100px; 
} 


/* Middle 
-----------------------------------------------------------------------------*/ 
#middle { 
    width: 100%; 
    height: 1%; 
    position: relative; 
} 
#middle:after { 
    content: ''; 
    clear: both; 
    display: table; 
} 
#container { 
    width: 100%; 
    float: left; 
    overflow: hidden; 
} 
#content { 
    padding: 0 0 0 200px; 
} 


/* Sidebar Left 
-----------------------------------------------------------------------------*/ 
#sideLeft { 
    float: left; 
    width: 180px; 
    margin-left: -100%; 
    position: relative; 
} 


/* Footer 
-----------------------------------------------------------------------------*/ 
#footer { 
    height: 50px; 
    border-top: 1px dashed #999; 
    padding-top: 0.4em; 
    font-size: 0.9em; 
    color: #888; 
} 
/* End of Layout */ 


/* Navigation */ 
#nav ul { 
    position: fixed; 
    top: 50px; 
    margin:0; 
    padding:0; 
    background-color:#ddd; 
    width:960px; 
    float:left; 
} 
#nav li { 
    display:inline; 
    padding:0; 
    margin:0; 
} 
#nav a:link, 
#nav a:visited { 
    color:#333; 
    background:#ddd; 
    padding: 0.4em 0.6em 0.4em 0.6em; 
    float:left; 
    width:auto; 
    border-right:1px solid #fff; 
    text-decoration:none; 
} 
#nav a:hover { 
    color:#fff; 
    background-color:#888; 
} 
#nav li:first-child a { 
} 
/* End of navigation*/

我怎樣才能讓我的960像素完全集中的網站，並具有2「藍條」菜單旁邊？

感謝您閱讀和快樂的編碼！

來源

2013-10-02 D G

確實要固定的導航需求？你會解決這個問題的方式是通過在包裝外部使用標題:)我會在一秒鐘內爲你寫jsfiddle –

我認爲這是我應該如何解決它。你需要把頭部放在包裝外面。然後設置父背景和ul爲不同的顏色。

例

nav { 
    width:100%; 
    background:blue; 
} 
nav ul { 
    width:100%; 
    max-width:960px; 
    list-style-type:none; 
    display:block; 
    margin:0 auto; 
    background:rgba(255,255,255,0.5); 
}

DEMO http://jsfiddle.net/6vPKN/

來源

2013-10-02 16:53:54

非常感謝你的回答！實際上，除了菜單欄外，整個網站都是960像素的中心，菜單欄的每邊都有2個藍色條（菜單的高度相同）。 –

CSS全寬度中心的導航欄

回答

相關問題