2012-11-16 13 views
11

सहित पृष्ठभूमि रंग मैं एक क्षैतिज नेविगेशन मेनू बनाने की कोशिश कर रहा हूं। मेनू को पूर्ण स्क्रीन चौड़ाई होने की आवश्यकता है, जिसमें सीमा चौड़ाई भी पूरी चौड़ाई चल रही है। मैंने इसे कम से कम कम किया है, इसके अलावा मैं मेनू के नीचे लगभग 15px का मार्जिन चाहता हूं, और इसके लिए मेरे मेनू के पृष्ठभूमि रंग का उपयोग करना चाहता हूं। इसके अलावा जब कोई वस्तु आच्छादित हो जाती है, तो होवर रंग सीमा के नीचे भी बढ़ाना चाहिए यदि यह समझ में आता है।सीएसएस - मार्जिन

यहाँ मेरी मेनू के एक बेला अब तक है - http://jsfiddle.net/J74eE/2/

Tried to insert my code here but the li items got converted to bullets 

मैं कंटेनर एनएवी के तहत एक मार्जिन की स्थापना की है, और मैं सीमा रंग मार्जिन क्षेत्र पर भी इस्तेमाल किया जा करना चाहते हैं। मैं किसी भी तरह से सीमा के नीचे विस्तार करने के लिए ली आइटम होवर रंग भी पसंद करूंगा लेकिन मुझे नहीं पता कि यह कैसे किया जा सकता है। यदि मैं ली आइटम पर मार्जिन और सीमा डालता हूं तो सीमा स्क्रीन की पूरी चौड़ाई नहीं चलाएगी।

अद्यतन

मेरी बेला अपडेट किया गया है कि मैं क्या हासिल करना चाहते हैं की एक नकली शामिल करने के लिए - http://jsfiddle.net/J74eE/3/

मैं गद्दी उपयोग नहीं कर सकते के रूप में है कि सीमा-नीचे नीचे धक्का, और मैं चाहता हूँ इसके नीचे पृष्ठभूमि रंग के साथ एक सीमा है।

+1

सुनिश्चित नहीं है कि आप वास्तव में क्या खोज रहे हैं - त्वरित मॉक अप मदद करेगा। –

उत्तर

11

मुझे आशा है कि आप इस के लिए देख रहे हैं: DEMO

सीएसएस

.nav-menu:after { 
    background-color:#FEFFE5; 
    position:absolute; 
    content:""; 
    left:0; 
    right:0; 
    height:15px; 
    top:40px; 
} 

आप after और beforeछद्म कक्षाएं के लिए उपयोग कर सकते हैं अपने वांछित परिणाम।

+0

बिल्कुल सही धन्यवाद! मैं इसका उपयोग कर सकता हूं: छद्म वर्ग के बाद मेरे ली तत्वों पर भी ताकि जब वे लाइन के नीचे की जगह को घुमाएंगे तो होवर रंग भी हो जाता है। – user1573618

8

पैडिंग द्वारा अपने मार्जिन को प्रतिस्थापित करने का प्रयास करें। बॉक्स मॉडल पर अधिक देखें: http://www.w3.org/TR/CSS2/box.html

.nav-menu { 
    background-color:#FEFFE5; 
    clear:both; 
    float:left; 
    padding:0px 0px 15px 0px; 
    border-bottom: 1px solid #dbd7d4; 
    width:100%; 
    font-size:13px; 
    z-index:1000; /* This makes the dropdown menus appear above the page content below */ 
    position:relative; 
} 
+1

यह पैडिंग के साथ काम करेगा, जब तक कि आपके पास 'सामग्री-क्लिप' शैली 'सामग्री-बॉक्स' पर सेट न हो। बाद के मामले में, पैडिंग क्षेत्र रंग नहीं होगा। सावधान रहें! –

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