css - क्यों दोनों divs एक ही रंग कर रहे हैं? केवल 1 को हरे रंग के रूप में परिभाषित किया गया है




html background (2)

मेरे पास दो अलग डिविज़ हैं, पृष्ठभूमि रंग दोनों रंगों के लिए समान चूने क्यों है? मुझे पहले डिवा व्हाइट चाहिए यहां HTML है:

<div id="head1">
    <ul>
        <li><a class="menu" href="#">Link one</a></li>
        <li><a class="menu" href="#">Link two</a></li>
        <li><a class="menu" href="#">Link three</a></li>
        <li><a class="menu" href="#">Link four</a></li>
    </ul>
</div>

<div id="title1">
     <h1>some title</h1>
</div>

ये सीएसएस है:

 #head1 {
 }
 #title1 {
     height:100px;
     background-color:lime;
 }
 ul {
     float:left;
     width:100%;
     padding:0;
     margin:0;
     list-style-type:none;
     border-bottom:2px aqua dashed;
 }
 li {
     display:inline;
 }
 a.menu {
     float:left;
     width:6em;
     text-decoration:none;
     color:#666666;
     padding:0.2em 0.6em;
     border-right:1px solid white;
 }
 a.menu:hover {
     background-color:#ff3300;
 }
 h1 {
     font-family: Gautami;
     font-size:300%;
     color: #FFFFFF;
 }

आपको सिर्फ दूसरी डिस् एप clear: both; करने की आवश्यकता है clear: both; मैंने एक जेएसफ़िल्ड बनाया: http://jsfiddle.net/5gwZ6/


जब आप सूची को फ़्लोट करते हैं, तो # शीर्षक के लिए अनिवार्य रूप से प्रकट होता है जैसे कि यह इसके पीछे है इसे ठीक करने के लिए, overflow:auto जोड़ें overflow:auto अपने #head1 तत्व के लिए overflow:auto

#head1 {
    overflow:auto;
}

jsFiddle उदाहरण





background