兩個彩色的導航欄

Question

我想做一個像這張圖片的導航欄。

酒吧有兩個彩色div。但是這個div的內容必須在包裝中，就像頁面的其他內容一樣，但我不知道如何去做。 導航欄必須固定，但我認爲現在並不重要。

編輯： http://jsfiddle.net/2NA8V/ 我的工作代碼：

<nav> 
    <div id="headerLogo"> 
     <h1> 
      <a href="index.php"> 
       <img src="..." class="headerImage"> 
      </a> 
     </h1> 
     <ul> 
      <li class="mainMenuPoint">Szurkolói Klub</li> 
      <li class="mainMenuPoint">Tagoknak</li> 
      <li class="mainMenuPoint">Meccsnaptár</li> 
      <li class="mainMenuPoint">Történelem</li> 
      <li class="login"> 
       <a href="admin/admin.php" class="adminlink">Admin terület</a> 
       <p>Helló <a href="profile.php" class="profileLink">Bergkamp</a>!</p> 
       <input type="button" name="logout" value="Kilépés" onclick="location.href='logout.php'" class="logout button"> 
      </li>    
     </ul> 
    </div> 
</nav> 

風格：

nav { 
    width: 100%; 
    margin: 0 0 0 0; 
    background: #d90000; 
    background: -moz-linear-gradient(left, #d90000 0%, #b20000 50%, #eee 60%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d90000), color-stop(50%,#b20000), color-stop(60%,#EEE)); 
    background: -webkit-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%); 
    background: -o-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%); 
    background: -ms-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%); 
    background: linear-gradient(to right, #d90000 0%,#b20000 30%, #eee 60%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d90000', endColorstr='#b20000',GradientType=1); 

} 
#headerLogo { 
    width: 950px; 
    height: 42px; 
    text-align:left; 
    margin: 0 auto; 

} 
#headerLogo h1 { 
    float: left; 
} 
#headerLogo h1 a{ 
    padding-left: 30px; 
} 
.headerImage { 
    padding-top: 5px; 
    padding-left: 5px; 
} 
nav ul { 
    height: 42px; 
    float: right; 
    margin: 0 auto 0 0; 
    background-color: #EEE; 
    width: 757px; 
} 
nav ul li { 
    float: left; 
    margin: 0px 10px; 
    position: relative; 
    height: 32px; 
    padding-top: 12px; 
} 
.mainMenuPoint { 
    color: #cb0000; 
    font-family: 'BebasNeueRegular'; 
    font-size: 120%; 
    cursor: pointer; 
    position: relative; 
} 
nav ul .login { 
    padding-top: 5px !important; 
    position: relative; 
} 
nav ul .login a, nav ul .login input, nav ul .login p { 
    float: left; 
    font-size: 80%; 
} 
nav ul .login a { 
    font-size: 110%; 
    padding-top: 7px; 
} 
nav ul .login p { 
    font-family: 'BebasNeueRegular'; 
    padding-top: 8px; 
    margin: 0 15px 0 30px; 
    font-size: 100%; 
    color: #CB0000; 
} 
.profileLink { 
    float: none !important; 
    font-family: 'BebasNeueRegular' !important; 
    padding-top: 8px !important; 
    margin: 0 3px 0 3px !important; 
    font-size: 100% !important; 
    color: #CB0000 !important; 
} 
nav ul .login .loginForm { 
    padding-top: 0px; 
} 
nav ul li:first-child { 
    margin-left: 20px; 
} 
nav ul li a { 
    font-family: 'BebasNeueRegular'; 
    text-transform:uppercase; 
    color: #CB0000; 
    font-size: 110%; 
} 
.logout { 
    width: 60px;  
} 

它的工作很好，但我不喜歡這樣的解決方案。我認爲這可能會容易得多。

Answer 1

如果你需要有兩個顏色中的一種容器，我建議你使用CSS漸變：

background:linear-gradient(90deg, green 50%, grey 50%) 

這裏的演示：http://jsfiddle.net/YWKTR/

只是一定要使用瀏覽器前綴運行在每一個現代瀏覽器。