2015-10-05 13 views
5

मुझे एक समस्या है जहां मेरा नेविगेशन बार सीएसएस में .container के साथ स्केल लगता है। अब, मैं काफी नौसिखिया हूं लेकिन मैंने सीएसएस में मूल्यों के साथ गड़बड़ करने की कोशिश की है, लेकिन इसका कोई फायदा नहीं हुआ है। यहाँ दोनों HTML और सीएसएस के लिए कोड है:नेविगेशन बार स्केलिंग समस्या

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    font-family: verdana; 
 
    background-image: url(images/bg2.jpg); 
 
    max-width: 100%; 
 
    max-height: auto; 
 
    background-position: 0px 100px; 
 
    background-repeat: repeat-x; 
 
    background-color: black; 
 
    background-size: 100%; 
 
} 
 
#header { 
 
    background-color: #000000; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
.container { 
 
    background-color: grey; 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    color: rgb(200, 200, 200); 
 
} 
 
#logoArea { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-image: url(images/logo.png); 
 
    float: left; 
 
    display: block; 
 
} 
 
#navArea { 
 
    height: 50%; 
 
    float: right; 
 
} 
 
#nav { 
 
    list-style: none; 
 
    margin-top: 5%; 
 
} 
 
#nav a { 
 
    color: #C8C8C8; 
 
    text-decoration: none; 
 
    width: 75px; 
 
    height: 50px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 0; 
 
} 
 
#nav li { 
 
    width: 75px; 
 
    height: 50px; 
 
    float: left; 
 
    margin-left: 30px; 
 
    background-color: #252525; 
 
    border: 2px solid silver; 
 
    border-radius: 8px; 
 
    padding: 0px; 
 
    text-align: center; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#nav li:hover { 
 
    background-color: grey; 
 
} 
 
.page { 
 
    background-color: rgba(19, 19, 19, 0.9); 
 
    padding: 20px; 
 
    padding-bottom: 1px; 
 
} 
 
p { 
 
    margin-bottom: 20px; 
 
} 
 

 
.box1 { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 100px; 
 
    background-image: url(images/logo.png); 
 
    background-repeat: no-repeat; 
 
    float: left; 
 
} 
 
    
 
#imageLogo { 
 
    width: 960px; 
 
    height: 324px; 
 
    background-image: url(images/Triicell-logo.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Test site</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body a link="#C8C8C8" vlink="#C8C8C8" alink="#C8C8C8"> 
 
    <div id="Header"> 
 
    <div class="container"> 
 
     <div class="box1"> 
 
     <a id="logoArea"></a> 
 
     </div> 
 
     <div id="navArea"> 
 
     <ul id="nav"> 
 
      <li>wp_1 
 
      </li> 
 
      <li>wp_2 
 
      </li> 
 
      <li>wp_3 
 
      </li> 
 
      <li>wp_4 
 
      </li> 
 
      <li>wp_5 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="mainArea"> 
 
    <div class="container page"> 
 
     <div id="welcome">Test site</div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

जैसा कि मैंने कहा, मैं एक नौसिखिया हूँ, वहाँ कुछ दर्दनाक स्पष्ट है कि मैं याद किया गया है अगर ऐसा है, मैं सराहना होगी अगर आप मुझे सही दिशा में इंगित कर सकते हैं। मैं सोच रहा हूं कि यह क्या हो सकता है, यह सोचने की कोशिश कर रहा है कि मैं अपने दिमाग को हर सुबह रैक कर रहा हूं। enter image description here

.container स्केलिंग के बाद: .container स्केलिंग से पहले

:

यहाँ संदर्भ के लिए मैं क्या बात कर रहा हूँ स्क्रीनशॉट के एक जोड़े हैं enter image description here

मैं क्या ' मैं इसे स्केल करने के लिए कर रहा हूं मैं .container की चौड़ाई बदल रहा हूँ 50%; किसी और चीज के बारे में चिंता न करें - मुझे पता है कि मैं बाकी को स्केल करने के बारे में क्या करने जा रहा हूं, यानी छवियां इत्यादि - लेकिन यह केवल उस नेविगेशन बार है जो जगह से बाहर निकलता प्रतीत होता है।

लेकिन हाँ, अगर कोई इस मुद्दे के साथ मेरी मदद कर सकता है तो मैं बहुत अच्छा होगा। उसमें विफल होने पर, कम से कम मुझे सही दिशा में इंगित करें।

+0

कृपया, क्या आप अधिक जानकारी में समझा सकते हैं कि आप क्या हासिल करने की कोशिश कर रहे हैं? साथ ही, यह लोगों को जवाब देने में मदद करेगा यदि आपने सीएसएस/एचटीएमएल के कुछ हिस्सों को हटा दिया जो सीधे समस्या से सीधे प्रासंगिक नहीं हैं। – Salketer

+0

@ डेरेक और स्केलिंग से क्या मतलब है? – vivekkupadhyay

+0

निश्चित रूप से। मैं नेविगेशन बार को कंटेनर (गहरा भूरा क्षेत्र) के शीर्ष पर अपनी स्थिति बनाए रखना चाहता हूं। और मैं कोड पर संशोधन करूँगा। और स्केलिंग करके, मेरा मतलब है कि तत्व उस आकार के आधार पर आकार बदलते हैं जिस पर इसे देखा जा रहा है। लेकिन मुझे नहीं लगता कि एनएवी बार को किसी भी स्केलिंग की ज़रूरत है, यह सिर्फ एक स्थिति की समस्या है। –

उत्तर

0

अरे आपके प्रश्न को और अधिक समझने योग्य बनाने के लिए धन्यवाद, यह बात यह है कि यदि आप कंटेनर 50% बनाते हैं, तो नौसेना के लिए कोई और जगह नहीं छोड़ी गई है क्योंकि #logoArea चौड़ाई बड़ी है यदि आप इसे काम करना चाहते हैं तो एनएवी को अगली पंक्ति में धक्का देता है, आपको #logoArea और/या #navArea की चौड़ाई कम करनी चाहिए। आशा है कि ये आपकी मदद करेगा।

+1

हां। आपका जवाब पैसे पर है। मेरे अपने प्रश्न का मेरा जवाब अब यह बताता है। बहुत बहुत धन्यवाद। तुम्हारी सहायता सराहनीय है। –

0

आप तैरता

इसके लिए स्पष्ट करने की जरूरत है आप #Header के बाद .clear वर्ग जोड़ सकते हैं।

.clear{ 
    clear:both; 
} 

या Header

#clearfix:after { 
    clear: both; 
    content: ""; 
    display: block; 
} 

में .clearfix वर्ग तो फिर तुम प्रबंधन कर सकते हैं जोड़ने के आसानी से आप .container चौड़ाई 50% या जो कुछ भी।

<li> 
    <a href="">wp_1</a> 
</li> 

मुझे आशा है कि इसे प्राप्त करने के जो आप चाहते हैं मदद करता होगा -

और यहाँ जैसे

<li>wp_1</a> 
      </li> 

आपके HTML कोड में कुछ गलती यह इस तरह होना चाहिए।

0

आह ... मैं देखता हूं कि यहां क्या गलत है। इसके लिए नेविगेशन बार के लिए पर्याप्त रीयल एस्टेट नहीं था जहां मैं इसे चाहता था। आप देखते हैं, नेविगेशन बार के बगल में एक लोगो होना चाहिए, लेकिन इसे हटाने के बाद, नेविगेशन बार अब स्केलिंग के बाद भी होना चाहता है।

केवल एक चीज यह जानना होगा कि नेविगेशन बार को कैसे स्केल करना है (यानी।इसे बनाओ ताकि एनएवी बार पत्राचार में इसका आकार बदल सके कि यह किस संकल्प पर प्रदर्शित किया जा रहा है), लेकिन मुझे लगता है कि यह एक और दिन के लिए एक लड़ाई है।

प्रश्न में योगदान देने वाले सभी लोगों के लिए धन्यवाद। मुझे पता था कि मेरी मूर्खता किसी भी तरह से मेरे बेहतर हो जाएगी। धन्यवाद, फिर भी।

0

चूंकि #navArea #Header के अंदर घोंसला है क्योंकि आपको पृष्ठ के प्राकृतिक प्रवाह से #navArea को निकालना होगा ताकि आप जो प्राप्त कर सकें।

यह कुछ ऐसा दिखाई देगा;

#navArea { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
} 
संबंधित मुद्दे