Two colored navigation bar

问题

I want to do a navigation bar like in this picture.

The bar has two colored div. But the content of this divs must be in a wrapper, like the other contents of the page, but i don't know how to do it. The navigation bar must be fixed, but i think it's not important now.

Edit: http://jsfiddle.net/2NA8V/ My working code:

<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>

style:

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;    
}

It's working great, but i don't like this solution. I think it could be much easier.

回答1:

If you need to have one container with two colors, I suggest you use CSS gradients:

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

Here's the demo: http://jsfiddle.net/YWKTR/

Just be sure to use browser prefixes to run in every modern browser.

来源：https://stackoverflow.com/questions/16036570/two-colored-navigation-bar