फ़्लोट पर मेरी छवि पृष्ठभूमि गायब क्यों होती है: बाएं?

मैं इसे पट्टी बनाने के लिए प्रत्येक छोर पर छवियों के साथ एक navbar बनाना चाहता हूँ।फ़्लोट पर मेरी छवि पृष्ठभूमि गायब क्यों होती है: बाएं?

तो, मैं नीचे HTML और सीएसएस बनाया है और यह बहुत अच्छा काम किया। मेरे मेनू आइटम उल/ली सूची में हैं।

मैं सूची शैली जब एक लाइन में सब आइटम डाल करने के लिए, सिरों पर छवियों गायब हो जाते हैं। उसके साथ क्या है? मैं इसे कैसे ठीक करूं?

अपराधी नाव है: बायां; नीचे।

--- test.html ---

<html> 
<head> 
    <link rel="stylesheet" href="test.css" type="text/css"> 
</head> 
<body> 
    <div id="container"> 
     <div id="header-usernav" class="span-6 last large"> 
      <div id="header-usernav-leftside"><div id="header-usernav-rightside"> 
       <ul> 
        <li>Register</li> 
        <li>Signin</li> 
        <li>Signout</li> 
       </ul> 
      </div></div> 
     </div> 
    </div> 
</body> 
</html>

--- test.CSS ---

#container #header-usernav { 
    background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif'); 
    height: 28px; 
    background-repeat: repeat; 
} 
#container #header-usernav-leftside { 
    background: url('http://www.webcredible.co.uk/i/nav-l-h.gif'); 
    background-position: top left; 
    background-repeat: no-repeat; 
} 
#container #header-usernav-rightside { 
    background: url('http://www.webcredible.co.uk/i/nav-r-h.gif'); 
    background-position: top right; 
    background-repeat: no-repeat; 
} 

#container #header-usernav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    margin-left: 10px; 
} 

#container #header-usernav li { 
    float: left; 
    padding: 0; 
    margin: 0 0.2em; 
}

चित्रों को विभिन्न इसलिए HTML/CSS को चिपकाया कॉपी किया जा सकता हैं झसे आज़माओ।

क्या सौदा है? मैं क्या गलत कर रहा हूं?

स्रोत

2010-01-14 Anonymous

मैं अतिप्रवाह जोड़ने की सलाह देते हैं: छिपा हुआ; (और ज़ूम: 1; IE6 के लिए क्रॉस ब्राउज़र संगतता बनाए रखने के लिए) एक समाशोधन div जोड़ने के बजाय कंटेनर div पर। साफ़ अपने स्रोत कोड में bloat जोड़ता है।

#container #header-usernav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    margin-left: 10px; 
    overflow: hidden; 
    zoom: 1; 
    height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg. 
}

स्रोत

2010-01-14 04:35:32 Sasha

केवल फ़्लोट किए गए बच्चों के साथ, आपका बाहरी कंटेनर 0px की ऊंचाई लौटाएगा।

<div class="clear"></div>

और निम्नलिखित नियम जोड़ें::

.clear { clear:both; }

उदाहरण के लिए: इस तरह के रूप में, आप जारी तत्व (रों) के तुरंत बाद निम्नलिखित जगह कर सकते हैं

<div id="container"> 
    <div id="header-usernav" class="span-6 last large"> 
     <div id="header-usernav-leftside"> 
      <div id="header-usernav-rightside"> 
      <ul> 
       <li>Register</li> 
       <li>Signin</li> 
       <li>Signout</li> 
      </ul> 
      <div class="clear"></div> 
      </div> 
     </div> 
    </div> 
</div>

स्रोत

2010-01-14 04:27:49 Sampson

यह मैक ओएस पर सफारी और फ़ायरफ़ॉक्स में काम नहीं कर रहा है। http://jsbin.com/ikige। समाशोधन div UL –

नोट के तुरंत बाद होना चाहिए, और सही किया गया है। धन्यवाद चेतन। – Sampson

जबकि इस तकनीक काम करता है, ज्यादातर लोगों को, इन clearfix दिनों किसी भिन्न रूप का प्रयोग करेंगे के रूप में जोड़ने अतिरिक्त मार्कअप की आवश्यकता नहीं है - चेतन या साशा के anwsers देखते हैं। –

यह क्योंकि हो रहा है आपके divs की कोई ऊंचाई नहीं है। आप अपने यूएल के तुरंत बाद clear: both के साथ एक खाली div जोड़ सकते हैं। या फिर आप यूएल

width: 100%; 
overflow: auto;

इन शैलियों में जोड़ सकते हैं एक विवरण के लिए this देखें।

स्रोत

2010-01-14 04:29:00

अपने में ul करने के लिए एक height: 28px; अपने सीएसएस जोड़ें। जोनाथन और चेतन ने पहले से ही यह क्यों काम किया है, इस बारे में बहुत अच्छी व्याख्या दे दी है, लेकिन दोहराने के लिए, फ्लोट किए गए तत्वों के माता-पिता अपने चलने वाले बच्चों की ऊंचाई से प्रभावित नहीं हैं।

स्रोत

2010-01-14 04:30:36

अच्छा स्पष्टीकरण, धन्यवाद! –

फ़्लोट पर मेरी छवि पृष्ठभूमि गायब क्यों होती है: बाएं?

उत्तर

संबंधित मुद्दे