मुझे एक समस्या है जहां मेरा नेविगेशन बार सीएसएस में .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>
जैसा कि मैंने कहा, मैं एक नौसिखिया हूँ, वहाँ कुछ दर्दनाक स्पष्ट है कि मैं याद किया गया है अगर ऐसा है, मैं सराहना होगी अगर आप मुझे सही दिशा में इंगित कर सकते हैं। मैं सोच रहा हूं कि यह क्या हो सकता है, यह सोचने की कोशिश कर रहा है कि मैं अपने दिमाग को हर सुबह रैक कर रहा हूं।
.container स्केलिंग के बाद: .container स्केलिंग से पहले
:
यहाँ संदर्भ के लिए मैं क्या बात कर रहा हूँ स्क्रीनशॉट के एक जोड़े हैं
मैं क्या ' मैं इसे स्केल करने के लिए कर रहा हूं मैं .container की चौड़ाई बदल रहा हूँ 50%; किसी और चीज के बारे में चिंता न करें - मुझे पता है कि मैं बाकी को स्केल करने के बारे में क्या करने जा रहा हूं, यानी छवियां इत्यादि - लेकिन यह केवल उस नेविगेशन बार है जो जगह से बाहर निकलता प्रतीत होता है।
लेकिन हाँ, अगर कोई इस मुद्दे के साथ मेरी मदद कर सकता है तो मैं बहुत अच्छा होगा। उसमें विफल होने पर, कम से कम मुझे सही दिशा में इंगित करें।
कृपया, क्या आप अधिक जानकारी में समझा सकते हैं कि आप क्या हासिल करने की कोशिश कर रहे हैं? साथ ही, यह लोगों को जवाब देने में मदद करेगा यदि आपने सीएसएस/एचटीएमएल के कुछ हिस्सों को हटा दिया जो सीधे समस्या से सीधे प्रासंगिक नहीं हैं। – Salketer
@ डेरेक और स्केलिंग से क्या मतलब है? – vivekkupadhyay
निश्चित रूप से। मैं नेविगेशन बार को कंटेनर (गहरा भूरा क्षेत्र) के शीर्ष पर अपनी स्थिति बनाए रखना चाहता हूं। और मैं कोड पर संशोधन करूँगा। और स्केलिंग करके, मेरा मतलब है कि तत्व उस आकार के आधार पर आकार बदलते हैं जिस पर इसे देखा जा रहा है। लेकिन मुझे नहीं लगता कि एनएवी बार को किसी भी स्केलिंग की ज़रूरत है, यह सिर्फ एक स्थिति की समस्या है। –