"पाद लेख" आमतौर पर वेब पेज लेआउट का सबसे निचला ब्लॉक होता है। इस पादलेख को स्थापित करने में सबसे आम कठिनाई यह है कि इसे हमेशा विंडो के निचले भाग में रखा जाए, पृष्ठ की पूर्णता या ब्राउज़र प्रकार पर ध्यान दिए बिना। लेआउट को ब्लॉक करने के लिए बड़े पैमाने पर संक्रमण के समय से समस्या के काफी कुछ समाधान हुए हैं, और उनमें से एक नीचे दिया गया है।
यह आवश्यक है
CSS और HTML का बुनियादी ज्ञान
अनुदेश
चरण 1
आइए सबसे आम पृष्ठ लेआउट योजना को आधार के रूप में लें - तीन ब्लॉक एक के ऊपर एक रखे गए हैं। शीर्ष (शीर्षलेख) को हमेशा खिड़की की ऊपरी सीमा से, नीचे (पाद लेख) - नीचे की सीमा पर, और मुख्य (शरीर) को हमेशा उनके बीच के सभी स्थान को भरना चाहिए। स्रोत कोड में एक्सएचटीएमएल 1.0 संक्रमणकालीन विनिर्देश का लिंक होना चाहिए, और शैलियों का विवरण बाहरी सीएसएस फ़ाइल में रखा जाना चाहिए (ओपेरा 9. XX के साथ समस्याओं से बचने के लिए)। संरचना का HTML विवरण मुख्य में रखा जाना चाहिए पृष्ठ का मुख्य भाग। यह, निश्चित रूप से, शीर्ष ब्लॉक से शुरू होगा, जिसके टैग में एक मान के साथ एक पहचानकर्ता विशेषता रखी जानी चाहिए, उदाहरण के लिए, divHead:
हैडर ब्लॉक।
मुख्य ब्लॉक में नेस्टेड ब्लॉकों की एक जोड़ी होनी चाहिए। बाहरी को divOut पहचानकर्ता दिया जाएगा, और आंतरिक को divContent दिया जाएगा:
मुख्य सामग्री।
पाद लेख divFoot पर सेट है:
पेज फ़ुटर।
चरण दो
पेज का पूरा HTML कोड इस तरह दिखना चाहिए:
तीन ब्लॉक
@import "style.css";
यह एक हेडर ब्लॉक है।
मुख्य सामग्री।
यह पृष्ठ का पाद लेख है।
चरण 3
शैली विवरण निम्नलिखित लेआउट तंत्र को लागू करता है: मध्य ब्लॉक (divOut) 100% ऊंचाई पर सेट है, शीर्ष ब्लॉक (divHead) में पूर्ण स्थिति होगी, और नीचे वाला - सापेक्ष। मुख्य सामग्री ब्लॉक (divContent) में, शीर्ष पर एक खाली स्थान होना चाहिए जो शीर्षक ब्लॉक की ऊंचाई के बराबर हो ताकि यह पृष्ठ की मुख्य सामग्री को ओवरलैप न करे। और नीचे के ब्लॉक (पाद लेख) के ऊपर इस ब्लॉक की ऊंचाई के बराबर एक ऋणात्मक मार्जिन होना चाहिए। यह इसे ब्राउज़र विंडो की निचली सीमा से ऊपर उठाएगा। इस तंत्र को निम्नलिखित सामग्री के साथ एक सीएसएस फ़ाइल का उपयोग करके कार्यान्वित किया जा सकता है: * {मार्जिन: 0; पैडिंग: 0}
html, शरीर {ऊंचाई: १००%;} शरीर {
स्थिति: रिश्तेदार;
रंग: # 000;
}
#divOut {
मार्जिन: 0;
न्यूनतम ऊंचाई: 100%;
पृष्ठभूमि: #एफएफएफ;
रंग: # 000;
}
* html #divOut {ऊंचाई: १००%;}
#divHead {
स्थिति: निरपेक्ष;
बाएं: 0;
शीर्ष: 0;
चौड़ाई: 100%;
ऊंचाई: 80 पीएक्स;
पृष्ठभूमि: # 2F5000;
बहुत ज्यादा गोपनीय;
पाठ-संरेखण: केंद्र;
रंग: #FFF;
} #डिवफुट {
स्थिति: रिश्तेदार;
दोनों को साफ करो;
मार्जिन-टॉप: -60px;
ऊंचाई: 60 पीएक्स;
चौड़ाई: 100%;
पृष्ठभूमि-रंग: # 2F5000;
पाठ-संरेखण: केंद्र;
रंग: #FFF;
}
.divसामग्री {
चौड़ाई: 100%;
बाईंओर तैरना;
पैडिंग-टॉप: 81px;
} आपके द्वारा HTML कोड में स्टाइलशीट के लिए निर्दिष्ट नाम style.css है।
