पृष्ठ लेआउट के सबसे निचले क्षैतिज खंड को अक्सर "पाद लेख" के रूप में संदर्भित किया जाता है। इसमें, पृष्ठ के अन्य ब्लॉकों की तरह, डिज़ाइन तत्व रखे जाते हैं, लेकिन दूसरों के विपरीत, इस विशेष ब्लॉक की स्थिति के साथ विशिष्ट समस्याएं अक्सर उत्पन्न होती हैं। वे इस तथ्य से जुड़े हैं कि विभिन्न ब्राउज़र सीएसएस भाषा के मानकों को अलग तरह से समझते हैं और ब्राउज़र विंडो के निचले किनारे पर पाद लेख प्राप्त करना काफी कठिन हो सकता है। इस समस्या के समाधान में से एक के लिए कोड नीचे दिया गया है।
ज़रूरी
CSS और HTML का बुनियादी ज्ञान
निर्देश
चरण 1
पृष्ठ के स्रोत कोड की पहली पंक्ति में, XHTML 1.0 संक्रमणकालीन विनिर्देश का संदर्भ दें:
चरण 2
पृष्ठ संरचना के मुख्य ब्लॉकों को दस्तावेज़ के मुख्य भाग (और टैग के बीच) के अंदर रखें। जिस ब्लॉक में मुख्य सामग्री रखी जाएगी उसमें दो नेस्टेड परतें होनी चाहिए। उदाहरण के लिए, बाहरी को पहचानकर्ता OuterDiv, और आंतरिक वाले - InnerDiv को दें:
यह वह जगह है जहाँ पृष्ठ की मुख्य सामग्री होगी।
उनके पीछे एक पहचानकर्ता के साथ एक पाद लेख ब्लॉक रखें, उदाहरण के लिए, FooterDiv:
पृष्ठ का पाद लेख।
चरण 3
एचटीएमएल कोड (टैग और टैग के बीच) के मुख्य भाग में सीएसएस शैलियों के विवरण के साथ एक बाहरी फ़ाइल का लिंक रखें:
@import "footerStyle.css";
चरण 4
संपूर्ण मास्टर पेज कोड को html एक्सटेंशन वाली फ़ाइल में सहेजें। यह इस तरह दिख सकता है:
दबाया हुआ पाद लेख
@import "footerStyle.css";
यह वह जगह है जहाँ पृष्ठ की मुख्य सामग्री होगी।
पृष्ठ का पाद लेख।
चरण 5
एक स्टाइलशीट फ़ाइल बनाएं - एक सादा पाठ फ़ाइल जिसे सीएसएस एक्सटेंशन और आपके द्वारा HTML कोड (footerStyle.css) में निर्दिष्ट नाम से सहेजा जाना चाहिए। इस फ़ाइल में पृष्ठ में प्रयुक्त ब्लॉकों के लिए निम्नलिखित शैली विवरण लिखें:
* {मार्जिन: 0; पैडिंग: 0}
एचटीएमएल, शरीर {ऊंचाई: १००%;}
तन {
स्थिति: रिश्तेदार;
रंग: # 222222;
}
#आउटरडिव {
मार्जिन: 0;
न्यूनतम ऊंचाई: 100%;
पृष्ठभूमि: #आआआ;
रंग: # 222222;
}
* html #OuterDiv {ऊंचाई: १००%;}
#फुटरडिव {
स्थिति: रिश्तेदार;
दोनों को साफ करो;
मार्जिन-टॉप: -60px;
ऊंचाई: 60 पीएक्स;
चौड़ाई: 100%;
पृष्ठभूमि-रंग: गहरा नीला;
पाठ-संरेखण: केंद्र;
रंग: #eeeff;
}
.इनरडिव {
चौड़ाई: 100%;
नाव छोड़ी;
}
