मैं यह कहकर शुरू करूंगा कि मैं पूरी तरह से वेब विकास के लिए बहुत नया हूं और यह मेरी पहली प्रतिक्रियाशील साइट है इसलिए कृपया नम्र रहें और इसे ध्यान में रखें, मैं इस चरण में नोब शब्द की परिभाषा हूं । थोड़ी देर के लिए जवाब खोजने के लिए और कोई भाग्य नहीं होने के बाद मुझे उम्मीद है कि यहां कोई मेरी मदद कर सकता है।पृष्ठ ऊंचाई 100% व्यूपोर्ट?
मैं इस वेबसाइट के लिए एक होमपेज बनाने की कोशिश कर रहा हूं। डिज़ाइन बस पृष्ठ के बाईं ओर एक ब्लॉक है जो शीर्ष पर लोगो दिखाता है और फिर नीचे लिंक की एक श्रृंखला दिखाता है, जिसमें से सभी एक ही पृष्ठभूमि पर हैं। इसके दाईं ओर एक बड़ी छवि है जो बाकी स्क्रीन को भरती है। मैं चाहता हूं कि पूरा पृष्ठ ब्राउजर विंडो को भरने के लिए चाहे जो भी डिवाइस देखा जा सके, बिल्कुल स्क्रॉलिंग आवश्यक नहीं है, यानी चौड़ाई और ऊंचाई दोनों 100% व्यूपोर्ट। पेज की चौड़ाई मुझे बिल्कुल भी कोई दुःख नहीं दे रही है, जैसा कि मैं चाहता हूं, अलग-अलग स्क्रीन आकारों में मीठा समायोजन कर रहा हूं, साइडबार चौड़ाई के 20% और मुख्य छवि 80% पर है।
ऊंचाई एक अलग कहानी है हालांकि। मैं प्रतीत नहीं कर सकता, सीएसएस के किसी भी संयोजन में मैंने अभी तक कोशिश की है, ताकि व्यूपोर्ट का 100% व्यवहार करने की ऊंचाई प्राप्त हो सके। या तो साइडबार बहुत छोटा है और मुख्य छवि बहुत लंबी है या दोनों बहुत लंबी हैं आदि। मुख्य छवि मैं पहलू अनुपात को रखना चाहता हूं और इसे इसके अधिकांश भाग को प्रदर्शित करने के लिए आवश्यक रूप से इसे विभाजित करना चाहता हूं बार मैं पेज की ऊंचाई के 100% तक फिट होना चाहता हूं।
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
किसी भी मदद के इस के साथ वास्तव में सराहना की जाएगी और किसी भी बड़े पैमाने पर शौकिया गलतियों का कहना है संकोच नहीं करते: यहाँ वर्तमान में मेरे कोड है। मैं कोई आलोचना लेने और उससे सीखने के लिए तैयार हूं। धन्यवाद
पहली बात यह है कि मैं सुझाव दे सकता हूं कि उस शैली टैग को हटा दें और सीएसएस को अपने पृष्ठ पर स्थानांतरित करें। यदि आप मीडिया समीकरणों और सब कुछ को इस समीकरण में लाने जा रहे हैं तो आपको एक अलग सीएसएस पृष्ठ की आवश्यकता है। –